题记

对于有强迫症的童鞋来说,一个长得不美观或者不能满足我们日常的审美需求的页面,总会有想要改造它的冲动,好吧,让我们来调试下博客园提供的默认主题样式,让页面更加清爽宜人,简洁大气。

Section One

打开后台设置界面,进入你的博客首页,打开调试器(chrome自带调试器或firebug),看到哪里不爽的,定位到页面dom结构的相关元素,开始调试,例如我想改变下body的背景:

其中http://files.cnblogs.com/cyStyle路径是在后台文件上传时的根路径,你可以上传样式,脚本,压缩文件等,不过是有大小限制的,并且更新文件时需要注意CDN的缓存。调试完毕后进入设置页面,在页面定制CSS代码框里输入你想要的代码即可,保存即可。返回博客首页发现body背景已经改变。对于权重不够的属性,可以在属性值后面加上 !important ,一招制敌~~~

Section Two

根据以上步骤一步步调试,直至达到你的审美观。当你调试完毕后,你可以把这些css打包成一个文件然后上传,在设置页面的页首html代码处引入,如:<link type="text/css" rel="stylesheet" href="(http://files.cnblogs.com/cyStyle/custom.cs" /> 如果你觉得你的样式足够可以替换原来主题提供的样式了,则可以在设置页面里禁用模板默认CSS。接下来你可以在设置页面的博客侧边栏公告处定义一些个人公共信息,例如:

<div class="pageview">欢迎第 <img border="0" src="http://cc.amazingcounters.com/counter.php?i=3182973&c=9549232" width="60" alt="访客统计" > 个访客</div><p class="para">关于我:<strong>热衷和关注前端开发的屌丝青年一枚~</strong></p><p class="para">博客:<a href="http://hcy2367.github.io/" title="chmyun's blog" target="_blank">http://hcy2367.github.io/</a></p><p class="para">联系我:<a href="mailto:hcy2367@163.com" title="email">hcy2367@163.com</a></p><a href="https://github.com/hcy2367"><img style="position: fixed; top: 0; right: 0; border: 0;" src="https://github-camo.global.ssl.fastly.net/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a>

Section Three

如果你想引入js,则需要发邮件到contact@cnblogs.com申请权限,为什么要引入js?比如我要改变页面加载后的dom结构,我要加载一些类库和插件(如代码高亮插件prettify.jsbootstrap),我要引入社会化分享(百度分享jiathis),我要做一些特效(最近特么流行的雪花漫天飞)等等,值得注意的是,最好不要直接在设置页面的页脚html代码加入内嵌脚本,否则会出现一些奇怪的现象,比如alert会被过滤掉,而外部文件不会,因为博客园后台会对html代码进行一些过滤的处理。完成这些后就可以定制属于我们自己想要的博客主题了。

值得注意的是:如果你想隐藏某些不想看到的模块,如日历模块,当你在dom就绪时尝试隐藏时你会发现该元素并没有隐藏,需要在window onload触发时再执行相关操作,原因估计是这些模块本来就被设计好在页面加载完毕后再加载的,或者是ajax异步加载引起的,具体原因需要探讨下。

Last

时间不早了,2014的最后一天还在这写博客,真苦逼,不管怎样,都希望大家在新的一年有新的突破,[加油]!

对酒当歌,人生几何,2015,你好!

转载于:https://www.cnblogs.com/cyStyle/p/4196506.html

博客园自定义主题样式相关推荐

  1. 博客园自定义鼠标样式

    博客园自定义鼠标样式: 上传背景图片到服务器(在博客设置-> 文件中上传,上传前将图片后缀改为.ico) 添加代码到相应的位置 设置鼠标样式 博客设置-> 设置中页面定制 CSS 代码: ...

  2. 博客园自定义(全部样式分享)

    博客园自定义 更新后的代码2021.12.08 /*星光*/ .wall{position: fixed;top: 0;left: 0;bottom: 0;right: 0; } div#midgro ...

  3. 博客园自定义markdown样式

    一.操作 进入自己的博客首页,点击管理>设置>页面定制CSS代码 将你的markdown样式CSS代码拷贝进去,可以参考下面样式分享 想自定义属性的话,可以找到下面样式对应的字段,改掉就行 ...

  4. 博客园自定义主题 皮肤

    https://www.cnblogs.com/jingmoxukong/p/7826982.html?utm_source=gold_browser_extension 我是参考的这个博主,取舍一些 ...

  5. 博客园自定义主题代码

    发一下好看的 要开通js权限 , 皮肤用simple memory , 最好禁用模板 侧边栏: <!DOCTYPE html> <html> <style> /*最 ...

  6. 博客园自定义样式主题 -- cnblogs theme

    目录 博客园自定义样式主题 1. 子标题 2. 导航栏 3. 文章主体样式 4. 引言样式 5. 代码不换行 6. 个性签名 7. 上一篇和下一篇 8. 评论 9. 提交按钮 10. 隐藏广告和搜索框 ...

  7. 博客园自定义页面风格设计 后续篇(页面设计模式及代码高亮 鼠标点击效果升级)...

    前言 在之前所写过的博客园自定义页面风格设计篇中,我们已经说明了其中两种风格的页面设计,鼠标图案的修改,公告栏的设置,背景音乐的制作,关于CSS以及用Canvas和requestAnimFrame做动 ...

  8. 博客园CodingLife模板样式优化

    博客园CodingLife模板样式优化,小屏和大屏均做了优化,感兴趣的园友可以复制到你的页面定制CSS代码中, 源码地址:http://www.cnblogs.com/blog/customcss/3 ...

  9. ithoughts怎么自定义样式_博客园自定义样式

    显示结果为: 类似的可以修改博客标题, 字体大小, 导航栏, 侧边栏等等. 公告栏 公告栏也可以添加很多自己喜欢的样式,而且可以添加时钟, 访问人数, 访问地区, 个人介绍等等 我这边引用了 hone ...

最新文章

  1. twofive(记忆搜索)
  2. Python中format_map与format字符串格式化的区别
  3. chrome扩展程序开发
  4. hbase数据库介绍,HBASE的特点,表结构逻辑视图,Row Key,列族,时间戳,Cell
  5. 分析Linux磁盘管理与文件系统专题三
  6. 如何量化技术团队的效能?
  7. Eclipse 取消 Import 堆叠
  8. 联想集团“2022年及未来10大科技趋势”预测
  9. pandas最快入门(一)-读取与数据结构
  10. 计算机中安装音乐软件是一种,电脑必装的八款软件,你装了吗?
  11. UE5 Live Coding编译出错时乱码问题解决方法
  12. 【数字孪生】UE4虚幻引擎WebUI插件,UE4.26中使用WebUI加载HTML的video无法显示的问题
  13. jzoj3339. wyl8899和法法塔的游戏
  14. 四川取消英语计算机考试,四川远程教育2019年英语考试取消了吗
  15. 网络通 浏览器 无法上网
  16. 文章收录技巧(怎么提升网站伪原创文章的收录)
  17. 残留的过往伤感QQ日志_说太多,不如沉默
  18. mp4 转 mp3 命令行工具(超快)
  19. login-shell和non login-shell区别 & bash配置文件实验报告
  20. IEEE 802.15.4 CSMA-CA算法翻译(IEEE 802.15.4-2006 7.5.1.4 CSMA-CA algorithm)

热门文章

  1. 解题报告 Toy Bricks
  2. .net 下URL重写
  3. jsp页面获取系统的日期时间
  4. (44)Verilog HDL 计数器设计
  5. (43)FPGA面试技能提升篇(Questa简介)
  6. FPGA跨时钟域处理方法FIFO
  7. 为什么学计算机的人不用360,为什么会电脑的人都鄙视他人安装360?
  8. 2020.xilinx开发环境
  9. STM32F103_EXTI外部中断
  10. android toolbar控件,Android Toolbar控件