iNove导航栏和侧边栏样式的修改
此次iNove导航栏的修改是完全参照WordPress的经典主题Twenty Eleven,貌似最近导航栏流行的都是黑底白字的样式,这不得不说谷歌老大是互联网行业的风向标。
先看一下更改后的样式效果:
修改的文件自然是博客主题的层叠样式表文档(style.css),导航栏控制代码是:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 | /* navigation START */ #navigation { background:#FFF; border-bottom:1px solid #A6A6A6; } #menus li { display:inline; list-style:none; } #menus li a { background:transparent url(img/menu.gif) no-repeat; display:block; color:#382E1F; height:31px; line-height:31px; padding:0 20px; margin-left:-10px; text-decoration:none; font-size:11px; float:left; z-index:1; } #menus li a:hover, #menus li a.current { background-position:0 -31px; } #menus li.current_page_item a, #menus li.current-cat a { background-position:0 -62px; } #menus li a.home { background-position:0 -93px; width:45px; padding:0; margin-left:0; text-indent:-999em; } #menus li a.home:hover { background-position:0 -124px; } #menus li.current_page_item a.home { background-position:0 -155px; } #menus li a.lastmenu:hover { background-position:0 0; cursor:default; } #searchbox { background: url(img/searchbox.gif) no-repeat; width:209px; height:21px; display:block; float:right; margin-top:4px; margin-right:10px !important; margin-right:5px; padding:3px 2px; } #searchbox .textfield { background:none; border:0px; width:185px; float:left; } #searchbox .button { background:none; border:0px; width:18px; height:18px; cursor:pointer; float:left; margin-top:1px; } #searchbox .searchtip { color:#999; } /* navigation END */ |
只需把Twenty Eleven的导航栏代码稍作修改,替换以上的代码即可,如下所示:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | /* navigation START */ #navigation { background:#181818; border-bottom:1px solid #A6A6A6; } #menus li { display:inline; list-style:none; } #menus li a { color: #eee; display:block; line-height: 3.333em; padding: 0 1.2125em; text-decoration:none; font-size:11px; float:left; z-index:1; } #menus li a:hover, #menus li a.current { background: #f9f9f9; /* Show a solid color for older browsers */ background: -moz-linear-gradient(#f9f9f9, #e5e5e5); background: -o-linear-gradient(#f9f9f9, #e5e5e5); background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#f9f9f9), to(#e5e5e5)); /* Older webkit syntax */ background: -webkit-linear-gradient(#f9f9f9, #e5e5e5); color: #373737; } #menus li.current_page_item a, #menus li.current-cat a { font-weight: bold; } #searchbox { background: url(img/searchbox.gif) no-repeat; width:209px; height:21px; display:block; float:right; margin-top:8px; margin-right:10px !important; margin-right:5px; padding:3px 2px; } #searchbox .textfield { background:none; border:0px; width:185px; float:left; } #searchbox .button { background:none; border:0px; width:18px; height:18px; cursor:pointer; float:left; margin-top:1px; } #searchbox .searchtip { color:#999; } /* navigation END */ |
默认的侧边栏widget的分割是图片实现的分割线,代码如下:
1 2 3 4 5 6 | #centersidebar, #northsidebar .widget, #southsidebar .widget { background:url(img/widgetsep.png) bottom no-repeat; padding:10px 15px 16px; } |
我把这条分割线去掉,然后用widget的标题加底色来分割,代码如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | #centersidebar, #northsidebar .widget, #southsidebar .widget { padding:4px 15px 6px; } #centersidebar .widget h3, #northsidebar .widget h3, #southsidebar .widget h3 { background: #E1E7E9; margin: 0 -10px; padding: 5px 10px; font-size: 11px; border-bottom: 1px solid white; } |