PLANESCAPE

[翻译自WhyOpera上的Redesigning My.Opera space, blog and photo gallery in X easy steps [Part 1]
]

很多人喜欢我写的How to make few basic changes to your Opera Space这篇教程，于是决定尝试写一篇更加完整的关于如何自定义opera blog页面的教程，并加入例子。

如何开始？
1. 首先点击连接Preferences(http://my.opera.com/Username/account/)
2. 再选择Web page layout(http://my.opera.com/Username/account/layout.dml)
3. 然后点击连接custom style sheet(http://my.opera.com/Username/account/usercss.dml)

看到相应页面没有？
Enter CSS文本框:这就是填写下面所讲代码的位置，在点击save前，记得要选中Use my custom style sheet together with the current theme

part 1：自定义opera blog的标题部分
标题文字、子标题文字、标题图片和菜单背景

标题文字
如果打开默认模版（主题）的CSS文件（main.css），你将会看到关于标题的定义，下面将其复制出来，并加以说明：

[COLOR=orangered]#top h1 [/COLOR]{
margin:0;
width:100%;
overflow:hidden;
font-size:30px;
font-family:'trebuchet ms',arial,helvetica,sans-serif;
line-height:normal;
padding-top:22px;
}

代码说明：
margin:0 - CSS的margin属性定义元素围绕的空间。这里margin属性的取值为0，这里可以看到margin属性的例子和详细定义。
width:100% - CSS的width属性定义元素宽度。这里width属性值设置为100%，表示其所定义元素的宽度可以达到其所在容器的最大宽度，这里可以看到width属性的例子和相关定义。
overflow:hidden - CSS的overflow属性设置元素大小超过容器空间后的处理方式。这里overflow属性值设置为hidden，元素大于容器的部分将被剪裁掉，而且不会显示滚动条。这里可以找到overflow属性的例子。
font-size:30px - font-size属性设置字体大小，这里取值为30px，px表示大小单位为像素，这里可以找到更多相关说明。
font-family:'trebuchet ms',arial,helvetica,sans-serif - font-family设置字体属性列表，为当前元素指名字体名称，这里的font-family取值为'trebuchet ms',arial,helvetica,sans-serif，其中第一个值为'trebuchet ms',值与值之间用逗号隔开。这里可找到更多例子。
line-height:normal - line-height属性设置两行之间的间距，值为normal表示采用通用间距。这里可找到更多例子。
padding-top:22px - padding-top属性设置当前元素与容器顶部的距离，这里的距离被设置为22个像素。这里有padding-top属性的详细解释。

如何自己设置这些属性？
这里我给出了4个相关例子，教程最后还有对应效果截图。

Example 1:为元素添加了color和font-style属性

[COLOR=red]#top h1[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]36px[/COLOR];
font-family:'[COLOR=indigo]Impact[/COLOR]',arial,helvetica,sans-serif;
font-style:[COLOR=indigo]bold[/COLOR];
color:[COLOR=indigo]#808080[/COLOR];
line-height:normal;
padding-top:22px;
}

Example 2:

[COLOR=red]#top h1[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]40px[/COLOR];
font-family:'[COLOR=indigo]GothicE[/COLOR]',arial,helvetica,sans-serif;
font-style:[COLOR=indigo]italic[/COLOR];
line-height:normal;
padding-top:22px;
}

Example 3:

[COLOR=red]#top h1[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]32px[/COLOR];
font-family:'Comic Sans MS',arial,helvetica,sans-serif;
line-height:[COLOR=indigo]normal[/COLOR];
color:[COLOR=indigo]#FFFF00[/COLOR];
padding-top:22px;
}

Example 4:

[COLOR=red]#top h1[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]36px[/COLOR];
font-family:'[COLOR=indigo]Georgia[/COLOR]',arial,helvetica,sans-serif;
line-height:normal;
padding-top:22px;
}

子标题
如果打开默认模版（主题）的CSS文件（main.css），你将会看到关于子标题的定义，下面将其复制出来，并加以说明：

[COLOR=orangered]#subtitle[/COLOR] {
margin:0;
font-size:12px;
width:100%;
overflow:hidden;
}

代码说明：
margin:0 - CSS的margin属性定义元素围绕的空间。这里margin属性的取值为0，这里可以看到margin属性的例子和详细定义。
font-size:12px - font-size属性设置字体大小，这里取值为12px，px表示大小单位为像素，这里可以找到更多相关说明。
width:100% - CSS的width属性定义元素宽度。这里width属性值设置为100%，表示其所定义元素的宽度可以达到其所在容器的最大宽度，这里可以看到width属性的例子和相关定义。
overflow:hidden - CSS的overflow属性设置元素大小超过容器空间后的处理方式。这里overflow属性值设置为hidden，元素大于容器的部分将被剪裁掉，而且不会显示滚动条。这里可以找到overflow属性的例子。

如何自己设置这些属性？
这里我给出了4个相关例子，教程最后还有对应效果截图。

Example 1:

[COLOR=red]#subtitle[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]10px[/COLOR];
font-family:'[COLOR=indigo]Verdana[/COLOR]',arial,helvetica,sans-serif;
font-style:[COLOR=indigo]bold[/COLOR];
color:[COLOR=indigo]#C0C0C0[/COLOR];
}

Example 2:

[COLOR=red]#subtitle[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]20px[/COLOR];
font-family:'[COLOR=indigo]GothicI[/COLOR]',arial,helvetica,sans-serif;
font-style:[COLOR=indigo]italic[/COLOR];
}

Example 3:

[COLOR=red]#subtitle[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]20px[/COLOR];
font-family:'[COLOR=indigo]Comic Sans MS[/COLOR]',arial,helvetica,sans-serif;
color:[COLOR=indigo]#FFFFFF[/COLOR];
}

Example 4:

[COLOR=red]#subtitle[/COLOR] {
margin:top;
width:100%;
overflow:hidden;
font-size:[COLOR=indigo]14px[/COLOR];
font-family:'[COLOR=indigo]Georgia[/COLOR]',arial,helvetica,sans-serif;
color:[COLOR=indigo]#CCCCCC[/COLOR]
}

标题图片和菜单背景
如果打开默认模版（主题）的CSS文件（main.css），你将会看到关于标题图片和菜单背景的定义，下面将其复制出来，并加以说明：

[COLOR=orangered]#top2[/COLOR] {
height:116px;
padding-left:15px;
background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x;
border-bottom:1px solid #fff;
}
[COLOR=orangered]#menu[/COLOR] {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

代码说明：
height:116px - CSS的height属性定义元素高度。这里height属性值设置为116px，，这里可以看到height属性的相关定义。
padding-left:15px - padding-left属性设置当前元素与容器左部的距离，这里的距离被设置为15个像素。这里有padding-left属性的详细解释。
background:#2f569b url(/community/graphics/users/1/top.gif) top left repeat-x; -

• #2f569b - 颜色的16进制数值。指的这个颜色
  
• url(/community/graphics/users/1/top.gif) - 标题图片的路径。
  
• top - 设置标题图片与其容器顶部之间的距离。
  
• left - 设置标题图片与其容器左边之间的距离。
  
• repeat-x - 表示图片以平铺的方式显示。
  

border-bottom:1px solid #fff; - border-bottom属性可以用来设置边框底部，其取值可以是一个列表，可加入所有对边框底部的描述，值之间用空格隔开。这里大小取值为1，颜色设为了#fff。这里有更多相关说明。
clear:both; - 当前元素的左右边都不允许存在浮动元素。这里有更多相关说明。
background:#e9e9e9 url(/community/graphics/users/1/menu.gif); - CSS中设置背景效果的属性，上面已做过说明。这里有更多相关说明。

下面是例子中要用到的图片：
example1.pngexample2.pngexample3.pngexample4.png
这里只改动了标题图片，没有改菜单背景，菜单背景你可以自行修改

Example 1:

[COLOR=orangered]#top2[/COLOR] {
height:116px;
padding-left:15px;
[COLOR=indigo]background:#000000 url(http://my.opera.com/all4fun/homes/blog/example1.png) top left repeat-x;[/COLOR]
border-bottom:1px solid #fff;
}
[COLOR=orangered]#menu[/COLOR] {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

Example 2:

[COLOR=orangered]#top2[/COLOR] {
height:116px;
padding-left:15px;
[COLOR=indigo]background:#2f569b url(http://my.opera.com/all4fun/homes/blog/example2.png) top left repeat-x;[/COLOR]
border-bottom:1px solid #fff;
}
[COLOR=orangered]#menu[/COLOR] {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

Example 3:

[COLOR=orangered]#top2[/COLOR] {
height:116px;
padding-left:15px;
[COLOR=indigo]background:#FF9900 url(http://my.opera.com/all4fun/homes/blog/example3.png) top left repeat-x;[/COLOR]
border-bottom:1px solid #fff;
}
[COLOR=orangered]#menu[/COLOR] {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

Example 4:

[COLOR=orangered]#top2[/COLOR] {
height:116px;
padding-left:15px;
[COLOR=indigo]background:#AFC5DA url(http://my.opera.com/all4fun/homes/blog/example3.png) top left repeat-x;[/COLOR]
border-bottom:1px solid #fff;
}
[COLOR=orangered]#menu[/COLOR] {
clear:both;
background:#e9e9e9 url(/community/graphics/users/1/menu.gif);
}

例子效果图
Example 1:

Example 2:

Example 3:

Example 4:

example4-part1.txtexample4-part2.txtexample4-part3.txtexample4-part4.txt
教程Part 1结束

相关资料：

• Styling My Opera profile pages by Jere Purmonen
  
• W3schools CSS guide
  
• CSS is not hard to learn – if you recognise it for what it is
  
• CSS Toolshed
  
• CSS Beauty
  
• CSS Creator
  
• CSS Discuss Wiki
  
• CSS Zen Garden
  
• Andy Budd's CSS Links
  

虽然oprea已经提供了一些漂亮的blog主题，但谁不希望能在自己的blog中加入一些个性化的元素？这些就需要通过自定义CSS来完成。

可以看到，opera blog已经提供了使用自定义CSS的功能

但对于自定义CSS，opera并没有给出详细说明（反正我没找到相关资料），让人难以下手。

上网搜了一下，看到一个叫做Opera Designs的blog提供了一些opera blog的自定义主题下载。分析了一下它所提供的主题，收获不小。

opera blog的自定义CSS放在blog空间中一个叫做user.css的文件中

在blog被加载的时候，会首先使用user.css中的样式表，对于其中为定义的部分，在到用户选择的主题样式表中查找。

也就是说编写自定义样式表的时候，最好以一个默认主题为基础，再加入自己的东西（我想没有谁会有精力自己重写全部样式表的）。

下面就来看看如何用自定义样式表修改标题图片：
opera blog中显示标题的容器叫做#top2，改标题图片要做的工作也就是为这个容器添加一个背景图片，CSS代码如下：

#top2 {
padding-left:15px;
background-image: url([COLOR=red]背景图片路径[/COLOR]);
height: 146px;
}

将这一部分代码填入自定义CSS文本框即可。
注意最后保存时一定要选择

保存后刷新几次就可以看到改动结果。