如何定制我的 CSS 样式?

字体 -
标签:,

尽管无忧博客给您提供了很多的模版供您选择,您可以很方便地更改博客外观,但可能还是不能满足您的要求,比如,您希望上传您自己喜欢的主题照片,或者您的公司的标志 LOGO,或者您很熟悉 CSS 样式表的设计,希望修改一些颜色、图片,“秀”出自己的风格。这些要求并不过分,无忧博客可以也应该满足您。

激活插件 Jason’s Customciser

首先,要定制您的 CSS 文件,您需要在管理后台的“插件菜单”下选择激活插件“Jason’s Customciser”。但请注意,正如这个插件的说明所示,使用这个插件,您可能需要了解一点 HTML 和 CSS 的基本知识,否则,可能会有些摸不着头脑。当然,您可以 Google 一下,网上有关 HTML 和 CSS 的介绍很多。

定制 CSS 中的背景图和配色

插件激活后,您可以在管理后台的“外观”菜单下看到子菜单“定制 CSS 样式表”,点击进入。就可以修改目前您使用的模版主题下定义的背景图和所有的样式文件颜色值。

要修改背景图片,在对应的图片左方的输入框中填写您希望使用的图片的 URL 地址即可。有两点必须注意:

  1. 图片是在网上可调用的,不是您计算机中的本地图片。要使用本地图片,请先将其上传到网上,并经过测试可用,否则,此图片将不能显示,在您的博客显示页面中也将会是空的一块。因此,在填写链接前,先将复制到浏览器的地址栏测试一下,看是否可以正常显示;
  2. 图片的大小最好和原CSS文件中使用的图片大小一致,您可以用鼠标右键点击右侧的图片块,选择“将背景图另存”获取该图片,再在图片编辑软件中打开,查看或直接编辑它,再将其上传到网上(参见“如何上传和插入图片”以及“如何在博主介绍中添加照片?”)。

要修改 CSS 样式表定义的颜色,在色块左侧编辑相应色彩的 HTML 编码,如黑色是 #000000 或者 #000,红色 #FF0000 或者 #F00。具体的配色就看您的喜好了。

在编辑好这些设定后,点击页面下方的“更新选项”,即可保存您的新设置,这时候您可以点击页面头部的“查看网站”,看看在套用了您定制的 CSS 样式文件后,您的博客新形象。可能需要不断地调整,才能达到满意的效果。

模版样式文件中的一些常见定义

每个模版主题的样式表文件中有很多的样式定义。因为 Wordpress 的模版有很多的开发者,无忧博客不过是将收集一些好的模版主题,并将其修改至符合中文显示习惯而已,所以,具体到每个模版,它们的 CSS 样式定义都可能略有不同,甚至差别巨大。您在编辑前可能需要查看页面的源文件,或者在源文件中找到 css 文件的链接,下载下来研究一下。

如果有空的话,也可以看看 Wordpress 的主题开发文档,以下是一些大致通用的定义(不能保证一定如此 微笑

  • header 一般是头部的信息
  • content 或者container 一般是主体内容部分的定义
  • post、entry、entrybody 是文章显示部分
  • commentarea、commentform 是评论部分
  • sidebar 是侧栏部分
  • footer 是页面脚部的定义
  • albumlist 是相册列表部分,相册内容部分的定义和文章内容显示基本上为共用
  • taglevel 是侧栏标签云的各类权重标签的显示定义

恢复默认设置

如果您订制的 CSS 文件乱了,或者想恢复使用默认的模版主题设置,点击页面下方的“重置选项”按钮,就会删除您的个人设置,恢复到默认的背景图片和配色。

定制的局限

鉴于 Wordpress 的模版设计原理,目前的样式定制还只能局限在编辑主题中 CSS 文件中已定义的背景图和颜色,其他部分不能修改,也就是说,大的框架是不能变化的。

还有个别的模版,如 water-1.0,因为已经有了“主题选项”,其 css 文件不再可使用此方式定制。

分享博文至:

    13 条评论

  1. 1. 生命活水- - 2007年5月7日 08:27

    在哪里发表文章呢?我怎么也找不到地方?

  2. 2. 石自彬 - 2007年10月4日 06:54

    请问管理员,我的博客为什么那个“最新留言”的那个版面不能使用呢?51博客能不能留言啊。我自己添加了一个评论的摸版来做留言版,感觉不好。

  3. 3. 博客管理员 - 2007年10月5日 14:43

    您可以定制侧边栏

    http://blog.51.ca/faq/?p=60

  4. 4. essay4less - 2012年9月24日 06:46

    Very big thnaks for this!

  5. 5. Kenneth - 2017年4月11日 00:44

    This site was… how do I say it? Relevant!! Finally I have found something that helped me. Many thanks!

  6. 6. Programming Project Help - 2017年6月15日 00:54

    Dissertation Guidance Provides quality Online Dissertation Help for students.

  7. 7. Accounting Assignment Writing Service - 2017年6月15日 02:23

    Really i appreciate the effort you made to share the knowledge. This is really a great stuff for sharing. Keep it up . Thanks for sharing.

  8. 8. geometry dash - 2017年9月12日 22:16

    It’s my first time to visit this site & I’m really surprised to see such impressive stuff!

  9. 9. five nights at freddy's - 2017年9月12日 22:17

    Really great post, Thank you for sharing This knowledge.Excellently written article, if only all bloggers offered the same level of content as you, the internet would be a much better place. Please keep it up!

  10. 10. Lelio Vieira Carneiro Junior - 2017年11月9日 23:19

    I have read so many content regarding the blogger lovers but this post is in fact a nice paragraph, keep it up.

  11. 11. Lelio Vieira Carneiro Junior - 2017年11月11日 11:07

    Thank you for the good writeup. It actually was once a leisure account it.

    Glance complex to more introduced agreeable from you! By the way, how could we be in contact?

  12. 12. Itamar Serp - 2017年11月11日 15:52

    Greetings! Very helpful advice within this post! It is the little changes that produce the largest changes.

    Thanks a lot for sharing!

  13. 13. wiki.griffins.com - 2017年11月24日 04:32

    Do you mind if I quote a couple of your posts as long as I provide credit and sources back to your blog? My blog site is in the exact same area of interest as yours and my visitors would truly benefit from a lot of the information you present here. Please let me know if this ok with you. Thank you!

发表评论