如何定制我的 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 文件不再可使用此方式定制。

分享博文至:

    48 条评论

  1. 21. hi - 2018年2月28日 19:11

    It’s going to be ending of mine day, except before finish I am reading this enormous paragraph to increase my knowledge.

  2. 22. hi - 2018年3月2日 15:53

    Spot on with this write-up, I actually feel this website needs a lot more attention. I’ll probably be back again to read through more, thanks for the info!

  3. 23. water filtration system cost - 2018年3月20日 16:33

    Some filters use multiple filtration technique.

  4. 24. water damage restoration forms - 2018年3月21日 12:51

    Water injury restoration would not should be a headache.

  5. 25. trash removal service cost - 2018年3月22日 02:49

    Welcome to Take-Out Trash Junk Elimination Service.

  6. 26. carpet cleaning services marietta ga - 2018年3月25日 11:47

    Dave Hastert is a tremendous carpet cleaning guy.

  7. 27. towing services decatur ga - 2018年3月26日 23:08

    We offer tow service and roadside assistance 24 hours.

  8. 28. blockchain technology stocks etf - 2018年3月27日 04:00

    First, we’ll clarify the blockchain basics.

  9. 29. water treatment specialist near me - 2018年3月28日 19:48

    417 open jobs for Water Treatment Specialist.

  10. 30. free robux generator - 2018年3月31日 02:06

    hey friends if you want a best geaphics games then try roblox robux its amazing game ever if you want amazing features realistics geaphics games then try my link

  11. 31. floor polishing company in dubai - 2018年4月2日 02:02

    Cleans and prepares flooring for top polish.

  12. 32. tow truck services near me - 2018年4月3日 02:09

    Tow Truck & Wrecker Towing Service Northline TX.

  13. 33. blockchain technology stocks nyse - 2018年4月3日 14:23

    And it seems that blockchain has plenty of other makes use of.

  14. 34. lawn care athens ga - 2018年4月5日 21:18

    In addition they do seasonal lawn companies.

  15. 35. mold removal costs are currently deductible - 2018年4月7日 03:33

    Apply baking soda on to moldy surfaces.

  16. 36. mold removal spray drywall - 2018年4月9日 08:07

    Ask them if they cannot take away the mold or mildew.

  17. 37. richmond tree service marietta ga - 2018年4月10日 03:22

    We offer Professional Tree Care Service in Atlanta Georgia.

  18. 38. tow truck services memphis tn - 2018年4月10日 03:49

    © 2007-2018 - Nationwide Towing Providers & Merchandise.

  19. 39. mold removal cost bathroom - 2018年4月12日 10:50

    Jeny is a known expert on black mildew take away.

  20. 40. car mold removal service near me - 2018年4月14日 17:24

    You do not have to make use of a mould killing product.

发表评论