Skip navigation.

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

, ,

如何更改整个页面的背景及文字属性?
关键词 body

body {
background:#292929 url(/community/graphics/users/9/bg.gif);
margin:0;
padding:0;
font-family:'lucida grande','lucida sans unicode','bitstream vera sans'trebuchet ms',arial,sans-serif;
font-size:12px;
text-align:center;
color:#222;}

上面代码里的background并不对文字所在页面起作用,只是关系到底层的背景.font-sizecolor可以设定已发布文章的字体大小和文字颜色. 这里的属性只影响宏观环境,如果对某个元素单独设置过,以单独的设置为准.



如何改变Blog页面的背景颜色和文字对齐方式?
关键词 #content #footer 其他相关内容请自行查找.

#content, #footer {
clear:both;position:relative;
background:#e4e4eb ;
min-width:739px;max-width:812px;
text-align:left;
margin:0 auto;}

替换backgoround选择符中的颜色代码,就可以改变背景色,在颜代码后面加上 url(图片地址),可以设定Blog页面的背景图片.如果这段代码中没有backgoround元素,请自行添加. text-align请自行选择对齐方式,默认是左对齐.

如何更改Blog页面修饰用的侧边条属性?
关键词 #wrap 我不清楚还有个mainwarp 起什么作用.

翻译不太准确.总共有四个wrap,如果要使整个自定义页风格统一,修改是必需的.
#wrap1 {
margin:0 auto;
max-width:897px;
min-width:778px;
background:#232323 url(/community/graphics/users/9/wrap1.gif) top left repeat-y;}

#wrap2 {
background:transparent url(/community/graphics/users/9/wrap2.gif) top right repeat-y;}

#wrap3 {background:#fff;
margin:0 auto;
max-width:867px;
min-width:778px;}

.twocol #wrap3 {
background:#fff url(/community/graphics/users/9/side.gif) top right repeat-y;}

#wrap4 {
padding:0 10px;
max-width:847px;
min-width:758px;}

.onecol #wrap4 {
background:transparent url(/community/graphics/users/9/wrap4a.gif) 100% 210px no-repeat;}

.twocol #wrap4 {
background:transparent url(/community/graphics/users/9/wrap4b.gif) 100% 210px no-repeat;}

请自行参照修改,不多说了,修改后就会知道具体是指哪几个部份.


如何改变已发布文章的标题大小和颜色?
关键词 .post .title

.post .title {
margin:0;font-size:18px;
color:#111;}

这里的属性对应每篇文章单独页面的标题,更改font-size的值就可以改变标题字体的大小;color值可以变更颜色.

链接标题颜色的代码
.title a:link, .title a:visited, .title a:active {
color:#2a3faa;
text-decoration:none;}

对应整个BLOG页面里的文章.

下面的代码是悬停时的颜色
.post .title a:hover {
color:#c53800;}



如何改变已发布文章标题下的日期字体大小及颜色和标签的颜色?

.postdate, .post .tags {
margin:0 0 2px 0;
font-size:11px
;
color:#fff;}

#content .tags a:link {
color:#fff;}


两段代码请参照修改,如果相关代码没有color元素,请自行添加.


如何修改置顶主题标识的相关属性?
关键词 .post .sticky

当你把一个主题置顶以后,这个主题旁边会出现一个 STICKY POST的标识,以下代码可以修改相关属性.
.post .sticky {
float:right;
margin:0;
font-size:10px;
color:#999;
background:#fff url(/community/graphics/users/8/sticky.gif) top right no-repeat;
padding:0 25px 0 4px;
height:26px;
line-height:20px;}


如何改变页面底部RSS按钮的相关颜色?
#meta a:link, #meta a:visited, #meta a:active {
color:#fff;}

如图

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

Comments

boyu 13. October 2006, 04:54

thx for sharing~

LQ 18. October 2006, 10:03

我想问下ABOUT页面的背景颜色怎么改.thx!

淡淡的艳舞 18. October 2006, 10:19

是指单独的ABOUT页面吗,这个是和BLOG页面的颜色是统一的,不用单独修改.

Blog页面的背景颜色改变了自然也会改变,包括其他Menu页面.

LQ 18. October 2006, 10:28

我在做这个扳子的时候,ABOUT页面不知道为什么颜色变了,
你进去帮我看下,thx.
http://my.opera.com/linq/blog/

淡淡的艳舞 18. October 2006, 11:05

是不是指ABOUT页面的Personal部份的背景,白色的?找到与#profile有关的background(你的都是 background: #F5F5F5;),改成你要的颜色看看.

LQ 18. October 2006, 11:27

效果出来了.恩,非常感谢.^__^

cielle 27. January 2007, 21:58

是打开这个commom-css来自定义吗?
我打开之后里面的代码改不动啊?
不能删除也不能复制。。。怎么回事呢?

淡淡的艳舞 28. January 2007, 10:47

楼上的,仔细看看第一部份吧.

http://my.opera.com/cyberghost/blog/show.dml/449783

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

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