虚 室

侧边的功能强大了许多,突然发现自己不会改CSS了 - . - （╯︿╰﹀

opera blog 越来越好玩了.

首先,侧栏slideshow下面少了相册列表.

其次,侧栏的TAG群没了(可能是因为有搜索功能),这个倒无所谓,主要的是发表新文章时下面没有TAG可选了,不知道我发布新日志后会不会出现.

刚发现,没法置顶- -

又发现一个不同点,上传到opera空间图片文件相对引用失效,一定要使用绝对地址,图片才能正常显示.

如何移动模版中的相关元素?
关键词 float

模版中某些容器位置是可以移动的,如果代码中有float这个项.
比如menu栏的位置就可以自定义,见如下代码

#menu li {
float:left;
line-height:26px;
height:27px;
overflow:hidden;
font-size:13px;
list-style:none;
width:12%;
margin:1px 0 0 0;
padding:0;
}

可以改成float:right;,那么菜单栏将会在右边显示.
其他相关请自行查找.

如何改变元素显示宽度?
关键词 max-width
　　　mini-width
　　　width

以下代码
#wrap1 {
margin:0 auto;
max-width:882px;
background:#acaea7 url(/community/graphics/users/4/wrap1.gif) top left repeat-y;
}

改变max-width数值,就会影响blog页面修饰条wrap1的可见宽度.不过此处在IE中似乎不起作用,可以用width定义.
其他相关也请自行查找.

如何移动侧栏的位置?
关键词 #mainwrap
　　　#main
#sidewrap

#mainwrap {
width:100%;
margin-right:-210px;
padding-bottom:12px;
float:left;
}
把float:left;改成float:right;即可把侧边栏的项目移到左边,这里的left和right恰恰与现实中的"左右"相反.改了位置之后还需要改下面这段代码,不然会影响页面美观.因为,移动之后,侧栏会与日志的文章紧靠在一起,见下面代码.

#main {
min-height:400px;
margin-right:210px;
padding-bottom:15px;
}
把margin-right改成margin-left,数值根据自己的需要而定.

#sidewrap {
width:190px;
float:right;
font-size:11px;
overflow:hidden;
}

还需要把#sidewrap位置改成float:left;

如何改变已发布日志的背景?
关键词 .post

.post {
padding:16px 0 10px 0;
margin-bottom:10px;
width:100%;
overflow:hidden;
border-top:1px dashed #93425F;
background:#fff url(图片地址);
}
如果没有background:#fff url(图片地址);,请自行加入.

如何修改日志中链接默认的相关颜色?
关键词a:link, a:active
　　　a:visited
　　　a:hover

代码如下,与链接默认显示、悬停时,动作后的颜色有关.
a:link, a:active {
color:#1757b1;
text-decoration:underline;
}

a:visited {
color:#0049aa;
text-decoration:underline;
}

a:hover {
text-decoration:none;
color:#1488fd;
}

同时也影响日志中相关的链接选项,如"edit post".对于日志中重新定义过的链接颜色,不受影响.

如何修改侧栏链接框单独的背景?
关键词#content li

虽然侧栏的容器的背景可以全局定义,但这段代码影响第二层背景,不仅限于侧栏自定义链接框和TAGS栏且包括其他项目,如Trackbacks的背景,见代码.

#content li {
margin:0;
list-style-position:inside;
background:#FEFEFE url(背景地址);
}

list-style-position还以通过none来定义,显示效果略有不同.background元素可以自行加入.

如何用背景图替代日志间的分割线?
关键词.post
　　　#firstpost
　　　#lastpost

前面已经讲过修改日志的单独背景,这里的修改正是这种方法的进一步运用.见修改后的效果图.


.post {
padding:16px 0 10px 0;
margin-bottom:10px;
width:100%;
overflow:hidden;
border-top:1px dashed #93425F;
}
日志之间分割线本来受上面代码中border-top:1px dashed #93425F;控制,相关表示的是像素,显示模式和颜色.其中dashed表示虚线,如果用solid则是实线(其他相关的Boder也可以这样改).


现在进行具体的修改,见下面修改过的代码.

.post {
background: #fff url(http://my.opera.com/community/graphics/smilies/pleased.gif) bottom center no-repeat;
border:none;
width:100%;
overflow:hidden;
padding-bottom:60px;
}
在background中别的不细说,只是要注意一下背景图片的显示位置,这里显示方式为底部居中不平铺(bottom center no-repeat).
border:none;表示没有边框,也可以仅仅修改border-top为0PX,效果是一样的.padding-bottom:80px;影响背景图片的高度,效果体现为两篇日志间的间隔距离,不过对最后一篇日志来说,就是底部留空多少.

还有两段影响顶部日志和底部日志的代码要修改,方法一样,不再解说.见下面两段修改过的代码.
#firstpost {
padding-top:0;
border:none;
background: #fff url(http://my.opera.com/community/graphics/smilies/pleased.gif) bottom center no-repeat;
padding-bottom:60px;
}


#lastpost {
background: #fff url(http://my.opera.com/community/graphics/smilies/pleased.gif) bottom center no-repeat;
padding-bottom:80px;
border:none;
}

如何使日志中文章的首字大写?
关键词.content:first-letter

这段代码窃自某人的模版,直接加入模版源码中即可
.content:first-letter {
color: #000;
background:#F5D3CB;
padding: 5px 6px;
margin: 4px 4px 0 0;
font-size: 20px;
font-weight:bold;
font-family: arial,sans-serif;
display: block;
float:left;
}

影响首字的颜色、背景颜色、字体及大小等属性,效果见图.


下在的代码能影响每篇评论的首字属性

div:first-letter {
color: #000;
font-size:18px;
}