Skip navigation.

四.自定义BLOG模版 - 侧边栏部分

, ,

如更变侧边栏的修饰物及相关背景?
关键词 #sidewrap

#sidewrap {
width:190px;
float:right;
font-size:11px;
overflow:hidden;
color:#fff;
background:#161616 url(/community/graphics/users/9/speaker.jpg) bottom right no-repeat;
padding-bottom:185px;
}

这里的color元素影响到这一部分,见图中每个链接前的那个小点.

background则影响整个侧边栏底层背景,可以设定背景的图片的放置方式,但不影响上面图中的容器背景. width能影响侧边栏的宽度,不建议更改.
这是官方的修饰用背景图 http://my.opera.com/community/graphics/users/9/speaker.jpg


如何设定侧边文字链接的颜色和字体大小?
#side a:link, #side a:visited, #side a:active {
color:#fff;}

此代码代码影响侧边TAGS和LINK的文字颜色.

#side li {
font-size:11px;
list-style-type:square;
padding:2px 0;}

此代码影响自定义链接的文字大小,并对TAGS有一定的影响.

如何更改侧边栏标题的属性?
关键词 #side caption

#side h2, #side caption {
background:#161616 url(/community/graphics/users/9/sideh2.gif) top left no-repeat;
font-size:11px;
font-weight:bold;
margin:0 0 1px 0;
padding:2px 0 2px 5px;
text-align:left;
color:#ffde00;}


看看我的标题栏,请自行修改.

还有下面一段代码,改改背景色,如果够细心的话能够发现标题哪里起了变化.
.sidebox {
width:190px;
background:#121212;
border-bottom:1px solid #000;
margin-bottom:15px;}



如何更改侧边栏容器的背景?
关键词 .sidebox .pad 对应着改.

.sidebox .pad {
background:#121212 url(/community/graphics/users/9/sidebox.gif) top left repeat-x;;
padding:5px;}



怎么样改变日历的相关属性?
关键词 #calendar

#calendar {
border-spacing:1px;
clear:both;
margin-bottom:15px;
width:190px;
background:#121212 url(/community/graphics/users/9/sidebox.gif) top left repeat-x;
border-bottom:1px solid #000;}

影响整个日历的背景和宽度.相关属性请自行修改.

#calendar th {
font-size:10px;
line-height:18px;
height:18px;
text-align:center;
color:#999;}


这段代码影响日历的星期标识,见图

可设定颜色,字体大小,对齐方式等相关.

#calendar td {
line-height:16px;
border-top:1px solid #222;
border-right:1px solid #000;
border-bottom:1px solid #000;
border-left:1px solid #222;
padding:1px 3px;
text-align:center;
font-size:10px;
color:#555;}

这段代码影响没有发布日志的日历日期的颜色及边框的相关属性.

#calendar td.l {
background:#dfdfff;}

这段代码影响已发布日志的日历日期的背景色.


如何修改ALBUM SLIDESHOW相关属性?
请以关键词 ALBUM SLIDESHOW 为内容进行搜索

#albumslides p {
margin:0 0 1px 0;
color:#444;}

这段代码对播放按钮起作用

#control_left, #control_right {
color:#fff;}

这段代码对前进后退按钮起作用.


如何定义侧边栏的个人头像相关内容?
请以关键词 QUICK PROFILE 为内容搜索.
可改动的地方也不多,从略.

三.自定义BLOG模版- 内容部分五.补充内容

How to use Quote function:

  1. Select some text
  2. Click on the Quote link

Write a comment

Comment
(BBcode and HTML is turned off for anonymous user comments.)

If you can't read the words, press the small reload icon.


Smilies

January 2010
S M T W T F S
December 2009February 2010
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