首页> 建站 > iNove导航栏和侧边栏样式的修改

iNove导航栏和侧边栏样式的修改

2012年6月2日 发表评论阅读评论

此次iNove导航栏的修改是完全参照WordPress的经典主题Twenty Eleven，貌似最近导航栏流行的都是黑底白字的样式，这不得不说谷歌老大是互联网行业的风向标。

先看一下更改后的样式效果：

inove_change

修改的文件自然是博客主题的层叠样式表文档（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;
}
分类: 建站 标签: , , 浏览量:2,273 次阅读
  1. 本文目前尚无任何评论.
  1. 本文目前尚无任何 trackbacks 和 pingbacks.