阿坏教你换博客个性背景

Posted on 2006-03-11 18:38 我是坏女生 阅读(5007) 评论(126)  编辑  收藏 所属分类: 呢喃呓语。。落

2006.3.11

[开篇_废话一些些]
咳,不是我不想教大家怎么改自己的模版,而是我呀,其实只是略懂皮毛啦,关键的还是要自己耐心面对一堆你不认识它们、它们也不认识你的代码,只要耐着性子去看,慢慢尝试在自己叶子上面修改,自然知道各个代码代表着什么含义。不过这也是有点代价的,就是在你修改的时候,要是哪里出了错,呵呵,你会死得好惨的,我说说我以前第一次修改模版的经历,改错一个地方,好端端的模版就那样给我毁了,因为当时我用的是OBLOG的后台,没有备份模版,所以只能重新选择模版,重新选的话,就只能从头开始……好悲痛的经历,所以日后要在你想要改造自己版版时候先给自己的模版备份一下,除非你对你自己的修改很确定很确定。

[稍微_渐进状况]
其实本来不打算写这个小教程的,看我多标榜自己啊,还教程~~~哈哈,不管,反正如果你能看懂我写的教程,那么说明我这个也算是教学的东东,除非,除非你偏要说你看不懂。(找抽吗?)鉴于好多好多来我这里的访客们都说喜欢我的叶子版版,还个别地向我求良药,呵呵,那好吧,我就写写吧,因为这里的东西运用到CSS,所以我就尽量写明白些,没办法了,如果你看不明白,别怪我,我表达能力有限。但是如果你因为这篇东西而让你的叶子从此个性化起来,呵呵,那么就一定要告诉我哦!我又会大大地臭美一番咯!

[还是_快了快了]
好啦,已经浪费掉了两个标题,不想再浪费下去,免得真心想要学的同学们着急,我从这里,开始告诉大家一些我修改模版的偏门技巧。我汗,我实在太骄傲了些。咳,言归正传。

其实我要告诉大家的是,我这个修改还不叫修改模版,因为真正意义上的修改模版是把整个版面,以及字体,标题,日历,留言啊等等一些细微的地方都做相应修改。我这个很直观,就是大家所看到的,我的背景给换了下来而已。因此,我这里只是教大家一个换背景图片的方法。至于要修改整个版面,我很遗憾地告诉你,目前博客生活只对我们开放了CSS.style的修改,而另外的一些自定义,我们是没有办法修改的。

[教程_获取CSS模版]
我狂倒,废话乱喷,终于喷到头了。

首先,做好事前的准备:打开你的叶子首页,点浏览器的最上方里的“查看”——“源文件”(你也可以用右键点“查看源文件”)这里可能会出现一些小状况,有些浏览器是无法弹出记事本,也就是说你没有办法获得你的源文件。我也不晓得什么原因,有可能你会跟我一样的状况,但是应该没有问题的,运气真衰到极点的人除外。如果你无法查看,建议你可以让别人帮你,在别人的浏览器上面打开你的源文件,然后让他把这个文件发送给你。

其次,获得源文件之后,你打开它,会看到一大堆信息,这些是你的博客的代码,这里以我的博客源文件为例,请你找到这一句“<link id="MainStyle" type="text/css" rel="stylesheet" href="/Skins/LuxInteriorDark/style.css"></link>”然后把“/Skins/LuxInteriorDark/style.css”弄下来,这个其实就是你模版的网络位置。

有了这个之后,好了,你把弄下来的这句,贴到你叶子的网络地址后面,这里要把你自己的用户名删除,如我的叶子地址是“http://www.cnweblog.com/kid0030/”那么贴好后应该是这样子“http://www.cnweblog.com/Skins/LuxInteriorDark/style.css”记住哦,要把你自己的用户名删除了再贴这一句。

这时候,会弹出一个小窗口,提示你下载STYLE.CSS,好,你把它下载下来,这个就是你叶子的CSS模版。这里也许你下载不成功,我也不晓得什么原因,反正我当时是无法下载下来的,建议你找DUDU要你的叶子的CSS模版文件。

[教程_背景图与颜色]
呵呵,有了这个模版文件之后呢,你的修改工程就即将开始。还有一点要注意,请看看你的输入法,这里要设置成英文的标点符号!!不然你的修改将不起任何作用。

下载好CSS模版之后,打开它,你会看到里面都是些你不认识的语言,千万别头晕,这时候就需要你细心了!!不过放心,用到的东东只有BODY这一块,就在这个文件的最前面嘛,是不是?

在这里呢,我要给大家解释清楚一些关于你的背景图片,还有背景颜色的名词,对你做修改很有帮助。

1)背景颜色:background-color/background
颜色的代码,相信你应该知道的吧?如果你连这个都不知道,那我劝你还是打消你修改模版的念头,先回去好好看看什么是颜色代码,上百度搜关键词就OK了。网上有很多提供颜色代码的地址,不用你自己费心去记,想换颜色的时候直接贴过来就是了。
例:{background-color:yellow}

  {background-color:#000000}
例子里面的第一个代码,是英文的颜色,黄色;第二个代码是#数字,这是最常用的颜色代码,表示黑色。

如果你想你的背景颜色为透明,那么请记住这个设置:transparent
例:body{background-color:transparent}

教你一个便捷的方法,你在你的CSS模版里面用搜索功能,搜查background-color还有background,那么整个CSS里面的背景颜色都会给找出来,你就直接在上面换上你想要的颜色代码即可。这样就不用你挨个代码去查找了。

2)背景图片:background-image
background-image这个的主要功能也就是用来显示图片,如果需要显示图片的话,那么只要在后面加上url(图片的地址)就可以了,不显示嘛,那是最简单不过的了,什么也不要就行了,因为这个默认的就是none。
例:{background-image:url(你要换上去的图片的网络地址)}

    {background-image:url('none')}

好了,知道了上面两个定义之后,估计你对你的博的背景构设语言有了大致的了解。

[教程_图片显示问题]
说到换上你自己的个性化图片作为背景,除了你的背景颜色与图片搭配之外,其实很重要的一点就是你的图片的大小问题,这个严重影响到你的背景图片是否能正常显示。

所以这里就对图片的显示做了定义:

1)图片是否重复显示 background-repeat
有时候图片是需要重复显示的,因为,很可能你找到的背景图片只是一小块,那么直接放上去的话估计是不可能占满你整个叶子。现在有了这个定义,就能帮助你更好地铺展你的背景图片了。

图片的重复方式有三种:水平方向重复(横向地铺开),垂直方向重复(纵向地铺开),水平垂直两个方向都重复
实现它们的语言分别是:repeat-x, repeat-y, repeat
例:如果我想要把图片水平方向重复,那么在你的CSS模版里面的BODY设置里找到backgroud-repeat,然后在它后面加上repeat-x,也就是写成:backgroud-repeat:repeat-x

2)图片不重复显示
当然,图片也可以不重复的。no-repeat这个就是用来表示只显示一幅背景图片,而不是重复出现的。

如果我要加一幅图片,然后希望它不重复显示,那么我要在BODY里面这样修改:
background-image:  url(http://www.cnweblog.com/images/cnweblog_com/kid0030/5668/o_20illustrated_10.jpg);
background-repeat: no-repeat;

3)图片是否滚动:background-attachment
当你把图片加好之后,这时候的效果是图片会随着你的滚动条而滚动,也就是说你平时浏览网页要拉下来看下面的东西时候,滚动鼠标,这时,你的网页底板也会随着鼠标滚动而一起动。

但是你是不是发现在你浏览我的叶子时候,无论你鼠标如何滚动,我的背景图片还是这样地“坚定不移”呢?如果你想要得到这样的效果,那么请你记住这个设置:fixed
例:background-attachment:fixed

[教程_结束]
好了,说到这里,似乎你对上面的一些定义很是明白了,那么恭喜你,我没有其他话要说了,你已经可以很好地运用这些方式去给你的叶子换个很好很个性的版子了。

这里,我特地把我的模版修改贴出来,大家可以比较一下自己的修改:
body {
 font-size : 76%;
 font-family : Verdana, Arial, Helvetica, sans-serif;
 padding: 0px;
 color: #FFFFFF;
 margin: 0;
 text-align: center;
 background-color:transparent;(我把背景颜色设置为透明,这样放上去的图片的某个部分才不会被原来的颜色覆盖)
 word-wrap:  break-word;
}
body {
 margin: 0px;
 background:transparent;(这里同样要设置为透明色)
 background-image:  url(http://www.cnweblog.com/images/cnweblog_com/kid0030/5668/o_20illustrated_10.jpg);(添加你想要的背景图片的网络地址)
 background-repeat: repeat;(这里,其实可以用不重复显示,因为我找来的图片很大。。)
        BACKGROUND-ATTACHMENT: fixed(让图片坚定不移!!)

}

千万千万别忘记,在你修改好这些东西之后,点“保存”,然后把你这个修改好的CSS整个模版复制,贴到你叶子的后台管理——选项——CONFIGURE——Custom CSS Selectors里面,然后点“SAVE”就大功告成啦!!赶紧来看看你的叶子首页是否如你所愿……

嘿嘿,如果你成功弄好了你的叶子,请你要一定告诉我!!!让我大大臭美一番啊!!

评论共2页: 上一页 1 2 

Feedback

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-11 18:40 by 我是坏女生
吼吼,辛苦写的东西~~~自己先顶!!

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-11 19:31 by bluedudu
hiahia,真是效率啊~!
可惜我的第一次失败,正在摸索中

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-11 19:34 by 我是坏女生
@bluedudu
呵呵,你哪里失败了?告诉我,让我给你想想。。不怕的,多多尝试。。

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-11 20:09 by 狼之心
呵呵,两个字,复杂啊!哪天我兴起,我大概会弄的!

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-11 20:15 by 我阿坏
@狼之心
我就说。。写出来就是有人会认为复杂。。其实真是如SNAKE说得那样,会的人不难,不会的人就觉得难。。

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-11 21:07 by 看海
坏坏你太厉害了 开始准备把我的博客好好的更新一下,可是没能成功 ,大概是属于你说的那类不能动的人了 看来我有必要保存你的教案 好好的研究之后再来给我的博客动手术了 辛苦了 谢谢!!

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-11 21:14 by 我是坏女生
@看海
呵呵,谢谢你的支持。
如果你在途中遇到什么问题,欢迎你直接提出,或许我在教程里面写的不够明白,这样子我正好能修改教程。别人就不会犯同样的错误了

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 01:05 by 我们在这个世界上终究会变成孤儿!
晕倒晕倒。。看不懂啊。改天你帮我弄好啦。。。哈哈。。可以吗?

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 09:29 by 我阿坏
@我们在这个世界上终究会变成孤儿!
你们啊,就是属于懒人一类了。。真是的~~~

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 11:03 by 昨叶何草
我不懒啊,我连看都没有看。(掩嘴)

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 11:13 by 我是坏女生
@昨叶何草
......不想说什么。。早知道不写了哇

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 11:49 by 迦迦
有足够的时间我也来试试看
呵呵

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 11:59 by 昨叶何草
坏,不要这样哇,不要因为我们的一两句话就否定了你当初的心。我是对这些实在是不懂,我上次添加一个音乐都弄得一团遭,这次怎么大工程,我实在是没有信心。
我不看,也是因为看不懂啊

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 13:24 by 我是坏女生
@迦迦
看不明白就找我。。我对你负责

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 13:26 by 我是坏女生
@昨叶何草
你播放器怎么了?很简单的啊。直接把代码复制贴到公告栏里面就可以了。。
呵呵,你是要有实践并且成功了才会有信心做下去。。很多人就是失败了,然后就放弃了。。

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 14:22 by bluedudu
@我是坏女生
唉~我的图片总是不合适~不是太小,就是放上去后感觉很奇怪

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 14:22 by bluedudu
如果让图片repeat又感觉奇怪的感觉

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 14:31 by 我阿坏
@bluedudu
孩子。。那你可以选择壁纸的图片作背景拉。我也很烦要调大小,所以就索性找桌面壁纸了~~~

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 16:48 by 迦迦
好的
有你这句话我就放心了!!!!!

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-12 18:05 by 我阿坏
@迦迦
嗯嗯。。哈哈

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-13 11:16 by 迦迦
呜呜到这步::有了这个之后,好了,你把弄下来的这句,贴到你叶子的网络地址后面,这里要把你自己的用户名删除,如我的叶子地址是“http://www.cnweblog.com/kid0030/”那么贴好后应该是这样子“http://www.cnweblog.com/Skins/LuxInteriorDark/style.css”记住哦,要把你自己的用户名删除了再贴这一句。

之后啥没有东西弹出来啊?

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-15 16:17 by 靴子上面的洞
我真看不懂...再说了,怎么放背景音乐来的?

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-15 16:34 by 我是坏女生
@迦迦
傻瓜。。你还没有点回车阿。。。

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-15 16:36 by 我是坏女生
靴子上面的洞:
把这个代码直接复制贴到你后台的选项——CONFIGURE——公告栏里面。。
<embed src="你的音乐的网络地址" hidden autostart="true" loop="true"></embed>

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-15 17:41 by 懒人
55555.......看不懂,好想请你到我家做客。呵

# re: 阿坏教你换博客个性背景  回复  更多评论   

2006-03-15 18:46 by 靴子上面的洞
坏坏姐,有空到我家坐坐.
又发现一个问题艾...我改了背景图片.可是原来我选的模版居然还在,哭死.
改了一个下午了...
评论共2页: 上一页 1 2