自定义博客园皮肤 黑色主题
2016-06-07 17:50
369 查看
自定义博客园皮肤 黑色主题
我的css主要是参考这位博主的自定义博客园皮肤的博客。对他的代码做了一些简化,有一些我认为没有什么需要的就删去了。我选择的主题也是lessismore这个主题,记得在设置自定义的CSS的时候不要勾选
设置home居中 即整体居中
设置sideBar的宽度为15% 而不是固定的
设置各种颜色和边框
我给h2/h3设置了单独的颜色 因为我博客中这两个级别的标题会较多
另外markdown格式的用单引号包裹起来的` code`显示有误,需将字体颜色设置为黑色
设置宽度自适应 大屏幕显示器会更宽
设置底部IT新闻/文章
我的css主要是参考这位博主的自定义博客园皮肤的博客。对他的代码做了一些简化,有一些我认为没有什么需要的就删去了。我选择的主题也是lessismore这个主题,记得在设置自定义的CSS的时候不要勾选
禁用模板默认CSS
自定义CSS
设置顶部导航栏的大小,并设置为横向一行设置home居中 即整体居中
设置sideBar的宽度为15% 而不是固定的
#navigator { background: #666; height:auto; overflow:hidden; *zoom:1;} #navList { font-size: 16px;float:left;} ul#navList li{display: inline; float: none; } .blogStats { font-size: 12px;float: right;} #home {margin: 0px auto; text-align:left; } #mainContent { width: 100%;} .forFlow { margin-left:17%; } #sideBar { width: 15%; border: none; padding: 0; float: left;} #sideBar h3 { padding-left: 8px; background-color: #666; } #sideBarMain { padding-left: 8px; }
设置各种颜色和边框
我给h2/h3设置了单独的颜色 因为我博客中这两个级别的标题会较多
另外markdown格式的用单引号包裹起来的` code`显示有误,需将字体颜色设置为黑色
body { background-color: #333; color: #fff; font-size: 14px; } .postBody h2{color:#70d282} .postBody h3{color: #00ccff;} h1, h4, h5, h6, th, .feedbackCon, .blogStats {color: #fff; } .day { margin: 20px 0px; } .postTitle { padding-left: 20px; font-size: 20px;border-bottom-color: #666; } .postBody, .postCon { padding: 0px 20px 10px;border-bottom: 1px solid #666; } .postDesc { padding-right: 20px; } a, .postCon a, .postBody a, .feedbackCon a, .pager a { color: #0dd; } .pager a{border:none} .pager {font-size: 14px;color:#ffffff} a:hover, a:active, a:focus { color: #ff8; text-decoration: none; } #navigator, #MySignature, .day, .post { border: 1px solid #e5e5e5; border-radius: 8px; box-shadow: 2px 2px 10px #aaa; } #navigator { border-radius: 8px 8px 0px 0px; } .post { border-right: none; border-top: none; border-radius: 0px 0px 8px 8px; padding-top: 1px; } code { color: #000;}
设置宽度自适应 大屏幕显示器会更宽
@media screen and (max-width:1366px){ #home{width:980px;} } @media screen and (min-width:1366px){ #home{width:1366px;} }
设置底部IT新闻/文章
#under_post_news{width:50%;float:left;} #under_post_kb{width:50%;float:right;} .c_ad_block#ad_c2{margin-top:-5%;float: right;}
显示正文时不显示侧边栏
这个是利用JS实现的,代码如下<script> //Date: 2016-06-06 //Author: psklf var detail = $("#cb_post_title_url"); if (detail.text() !== ""){ $("div#sideBar").hide(); var mainArticleArea = $("div.forFlow"); mainArticleArea.width("100%"); mainArticleArea.css("margin-left","0"); $("div.forFlow #comment_form").css("margin-left","40px"); } </script>
相关文章推荐
- 如何在各种编程语言中生成安全的随机数
- ABAP标准列表和选择屏幕
- AndroidStudio配置及SVN使用代码管理
- Android开源框架——依赖注入ButterKnife
- SSH kEYS生成步骤
- 注意push和pop方法
- PHP内核研究(内存管理1)
- c++ 初始化顺序
- 第15周-阅读程序(3)
- Sed命令用法总结
- spark 5、共享变量
- php cURL library is not loaded
- JDK1.8 集成了Base64加密解密包
- FPS游戏服务器设计的问题
- 树的计数问题和通过一个中序遍历序列和一个先序遍历序列来确定一棵二叉树
- 树的计数问题和通过一个中序遍历序列和一个先序遍历序列来确定一棵二叉树
- 学习java就要多看书!
- 乐学成语——显示主界面
- 使用SQL Profile稳定SQL语句的执行计划
- Java开发常用的在线工具