目录
博客园自定义样式主题1. 子标题2. 导航栏3. 文章主体样式4. 引言样式5. 代码不换行6. 个性签名7. 上一篇和下一篇8. 评论9. 提交按钮10. 隐藏广告和搜索框11. 侧边栏公告12 . 侧边评论13. 侧边栏样式14. 公告板头像15. 签名2. 最终结果3. Reference
博客园自定义样式主题
不得不说，博客园自带的主题的样式都很一般，不过好在提供了自定义接口，所以就折腾一番吧。
首先选择基础的主题（我的是red_autumnal_leaves)，否则全部自己写工作量还是不小的。
可以通过F12查看主题自带的基础样式，然后在此基础上修改并保存下来。
1. 子标题
子标题想定义成链接，so，点击管理、设置、子标题 填写如下内容：
<a href="/b4zinga" target="_blank">/b4zinga</a>
以下【2 - 13】都是最终写在 管理、设置、页面定制css代码
完整代码详见github /b4zinga/PythonTools/blob/master/cnblogs%20theme.css
2. 导航栏
/*******************博客导航栏 *********************/#navList {float: left;}#navList li {border: none;font-size: 16px;}.blogStats {display: none;}
3. 文章主体样式
/************** 主体内容样式 ***********************/.postBody {padding: 20px 40px;}#cnblogs_post_body {font-size: 15px;}#cnblogs_post_body h2 {/*标题h2*/border-left: 5px solid #FF3300;padding: 10px 20px;line-height: 2;background: #d6dbdf8a;margin: 30px 0;font-size: 25px;}#cnblogs_post_body h3 {margin: 20px 0;padding: 10px 20px;border-left: 5px solid #FF3300;font-size: 20px;}#cnblogs_post_body h4{font-size: 18px;margin: 20px 0;}
4. 引言样式
/********************************引言样式*****************************/blockquote {border-left: 5px solid #FF3300;}blockquote strong {color: red;font-size: 18px;}
5. 代码不换行
pre {/*控制代码不换行*/white-space: pre;word-wrap: normal;}
6. 个性签名
/******************* 个性签名 ****************************/#MySignature {box-shadow: 8px 1px 10px #989898;padding: 10px;text-shadow: 1px 1px 1px #FFF;font-size: 17px;border-left: solid 5px #FF3300;background: #F3F3F3;border-radius: 10px 10px 50% 10px;line-height: 2.4;margin: 40px 0;}#MySignature a {text-decoration: none;color: #4183c4;font-weight: bold;}#MySignature a:hover {text-decoration: underline;color: #f60;}#MySignature span {color: #f60;}
7. 上一篇和下一篇
/********************** 上一篇下一篇 *************************/#post_next_prev {font-size: 14px;color: #535353;}
8. 评论
/************************评论********************************//*评论列表*/#blog-comments-placeholder {border-radius: 10px;background: #fff;padding: 30px 40px;}.feedback_area_title {background: url(///skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;border: 1px solid #FF3300;border-left-width: 5px;border-radius: 10px;border-right-width: 5px;padding: 15px 50px;}
9. 提交按钮
/******************** 提交评论按钮 *******************************/#btn_comment_submit {border: solid 1px #fd6d0dd1 !important;width: 90px;height: 40px;color: #fff !important;background-color: #fd6d0dd1 !important;border-radius: 5px;font-size: 16px;cursor: pointer;}
10. 隐藏广告和搜索框
/********************隐藏广告******************************/#ad_t2, #cnblogs_c1, #under_post_news, #cnblogs_c2, #under_post_kb {display: none;}/*******************隐藏搜索框*****************************/#widget_my_google, #google_q{display: none;}
11. 侧边栏公告
/*****************************侧边栏公告***********************/#blog-news > img {/*头像*/display: block;margin: auto;border-radius: 50%;}#profile_block {font-size: 15px;padding: 20px;line-height: 1.8;}#profile_block > a:link {color: #F60;}/*公告结束*/
12 . 侧边评论
/****************************侧边评论**********************************/li.recent_comment_body {line-height: 30px;}
13. 侧边栏样式
/**********************sideBar博客侧边栏容器**********************************/#sideBarMain h3, .newsItem h3 {font-size: 1.2em;height: 50px;line-height: 50px;text-indent: 0.5em;background: url(/skins/red_autumnal_leaves/images/titlebg.png) no-repeat left center #fff;padding: 0 0 0 50px;margin-bottom: 0;border: 1px solid #FF3300;border-left-width: 5px;border-radius: 10px;border-right-width: 5px;}.newsItem, .catListComment, .catListEssay, .catListView, .catListFeedback,#blog-calendar, #sidebar_postcategory, #sidebar_postcategory, #sidebar_postarchive, #sidebar_search {border-radius: 10px;box-shadow: 1px 2px 3px #A7A8AD;background-color: #fff;}#sideBarMain ul {background-color: #fff;padding: 15px 20px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}#sideBarMain li {line-height: 40px;border-bottom: 1px solid #ddd;font-size: 14px;}
以上【2 - 13】都是最终写在 管理、设置、页面定制css代码
完整代码详见github /b4zinga/PythonTools/blob/master/cnblogs%20theme.css
14. 公告板头像
管理、设置、博客侧边栏公告：
<img src="/avatar/1346826/030642.png">
15. 签名
管理、博客签名：
GitHub:<a href="/b4zinga" target="_blank">/b4zinga</a><br>博客园 : <a href="/0x4D75/" target="_blank">/0x4D75/</a>
配置中个人信息相关配置请酌情修改。
2. 最终结果
最终的结果也就是像本篇博客这个效果啦
本人对CSS可以说是一窍不通的，本次配置主要是网上一通参考，再综合个人多次尝试，经过一番增删改查，最终完成本次配置，总体来是还算比较满意。
3. Reference
吴煜伦比的疯丫头 /real-me/p/8336741.html
