淡淡的艳舞

Posts tagged with "blog"

新模版的源代码

Monday, 7. May 2007, 06:27:02

12 comments

乱码?!

Monday, 23. October 2006, 11:52:36

Opera, blog

装了个雅黑字体后,突然发现BLOG的中文标题和中文标签,还有侧边的中文链接都变成乱码,删掉这个字体后还是不能解决问题.

用IE7和opera浏览都是相同情况,不过浏览其他网站没有问题,难道是opera的社区出问题了?还是我的系统问题?

----------------------------------------------------------------------------------------------------
10.24 Update

早上看到Myopera首页banner变成这样了,注意右上角,坟墓?!

Blog首页日志很多还是乱码~~,难道被投毒了?~~

13 comments

BLOG更新问题

Tuesday, 10. October 2006, 13:05:29

hehehe, 刘禹锡诗, Opera, blog

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

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

~~刚发现,没法置顶- -~~

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

2 comments

Lingr,Say it !

Wednesday, 4. October 2006, 06:05:48

blog, chat

在线聊天室,只要在Lingr注册一个账号就可以创建自己的ChatRoom;还可以加入别人的聊天室.

最主要的是支持Opera,让我这个OPfan非常满意.

MychatRoom

1 comment

五.补充内容

Thursday, 7. September 2006, 10:31:20

blog, Opera, CSS

如何移动模版中的相关元素?
关键词 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;
}

No comments

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

Thursday, 7. September 2006, 10:28:32

blog, Opera, CSS

如更变侧边栏的修饰物及相关背景?
关键词 #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 为内容搜索.
可改动的地方也不多,从略.

No comments

1 2 Next »

Showing posts 1 - 6 of 11.