CnBlogs自定义博客样式

转载于 2014-10-09 00:07:00 发布 · 78 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/ohmygirl/p/blogStyle.html

本文记录了一次博客样式的调整过程，包括使用蓝色基调的主题、去除烦人的广告链接、调整评论按钮的位置与大小等细节。

弄了半个晚上的时间，总算马马虎虎搞好了博客的样式。

整个博客是蓝色的基调，比较激情，我喜欢。

比较郁闷的是，rightmenu 和 main都是position:absolute 布局的。要添加一个footer，还真是被恶心到不行，现在虽然做成了position:fixed的，但标签和随笔增多的时候，肯定会覆盖一部分内容。没有js权限，暂时先放着吧。

1. footer的代码：MyFooter部分直接插入了内联的Css样式，懒得修改了，过段时间肯定要把footer去掉。

1 <div id="myFooter" style="position: fixed; bottom: 0px; width: 100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);">
2   <p id="myFootText">知识改变命运，码农拯救人生</p>
3   <p id="myFootCopy">ohmygirl@2014</p>
4 </div>

2. 同时去掉了文章底部烦人的推广链接和广告banner。看着清净了不少，CSS代码为：

1 /* advertise */
2 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
3     width:0;
4     height:0;
5     display:none;
6     overflow:hidden;
7 }

3.文章底部的评论按钮的位置和大小都比较尴尬，位置太靠左，且可点击范围太小。这里一并贴出来：

 1 #RecentCommentsBlock li {
 2     margin: 0;
 3     width: 275px;
 4 }
 5 #RecentCommentsBlock li.recent_comment_body {
 6     border-radius: 0;
 7     margin: 0;
 8 }
 9 #RecentCommentsBlock li.recent_comment_title {
10     border-radius: 5px 5px 0 0;
11     margin: 3px 0 0;
12 }
13 #RecentCommentsBlock li.recent_comment_author {
14     border-radius: 0 0 5px 5px;
15     margin: 0;
16 }
17 .desc_img{
18    width:75px;
19    max-width:75px;
20 }
21 
22 #blog-calendar{
23     background:white;
24 }
25 
26 /* comment */
27 div.commentform{
28     margin-bottom:100px;
29 }
30 #commentform_title {
31     background: url("http://static.cnblogs.com/images/icon_addcomment.gif") no-repeat scroll 0 2px;
32     color: #0078d8;
33     font-size:14px;
34 }
35 div.commentform p{
36     margin-bottom:10px;
37 }
38 .comment_btn {
39     height: 35px;
40     width: 90px;
41     background: none repeat scroll 0 0 #0078d8;
42     border: 0 none;
43     border-radius: 5px;
44     color: white;
45     cursor:pointer;
46 }
47 .comment_btn:hover{
48     background:#317ef3;
49 }
50 #commentbox_opt,#commentbox_opt + p {
51     text-align:center;
52 }
53 #tbCommentBody{
54     width:100%;
55     resize:none;
56 }
57 #tbCommentAuthor,#tbCommentBody{
58    border:1px solid #0078d8;
59 }
60 #tbCommentBody:hover{
61    border:1px solid #fca021;
62 }
63 #comments > h3 {
64     background: none repeat scroll 0 0 #0078d8;
65     border-radius: 3px;
66     color: white;
67     padding: 8px;
68     border:0 none;
69     font-size:14px;
70 }
71 #comments{
72     font-size: 13px;
73 }
74 #comments h4{
75     margin-top:10px;
76 }
77 #comments h4 span {
78     color: #6c6351;
79     font-size: 12px;
80 }
81 .comment_actions {
82     border-bottom: 1px dashed #0078d8;
83     display: block;
84     padding-bottom: 10px;
85 }
86 .blog_comment_body {
87     color: #111;
88     font-size: 13px;
89     margin-bottom: 10px;
90     margin-top: 10px;
91 }
92 #comment_nav {
93     font-size: 14px;
94     margin-top: 10px;
95     text-align: right;
96 }

最后，博客主题部分的css代码为：

  1 /* header */
  2 #header{
  3     border:1px solid #044e97;
  4     background:#0078d8 repeat;
  5     box-shadow:0 0 5px;
  6 }
  7 h1{
  8     background: none;
  9     border-bottom:0 none;
 10 }
 11 #main{
 12     margin-top:5px;
 13     border-right:0 none;
 14     min-height:1040px;
 15 }
 16 #Header1_HeaderTitle{
 17     color:white;
 18     font-weight:bold;
 19     font-size:24px;
 20     text-shadow:1px 5px 1px #000;
 21 }
 22 #Header1_HeaderTitle:hover{
 23     color:#fca021;
 24 }
 25 #tagline{
 26     color:white;
 27 }
 28 p.date{
 29     background: none repeat scroll 0 0 #0078d8;
 30     border-bottom: 1px solid #aaa;
 31     border-radius: 5px;
 32     color: white;
 33     font-size: 14px;
 34     font-weight: bold;
 35     margin: 10px 10px 0 50px;
 36     padding: 10px;
 37 }
 38 .postFoot, p.postFoot{
 39     padding-bottom:2px;
 40     border-bottom:1px solid #0078d8;
 41 }
 42 .postTitle{
 43     padding:5px 0;
 44 }
 45 .postTitle a{
 46     font-size:15px;
 47     padding:2px 0;
 48 }
 49 .post h2{
 50     border-bottom: 1px dashed #0078d8;
 51     font-size: 1em;
 52     margin-top: 10px;
 53     padding: 0 0 10px;
 54 }
 55 .c_b_p_desc_readmore:hover{
 56     color:#faa123;
 57 }
 58 #cb_post_title_url{
 59     font-size:18px;
 60 }
 61 #MySignature{
 62     border: 1px dashed #0078d8;
 63     display: block;
 64     padding: 5px;
 65 }
 66 #green_channel{
 67     border: 1px dashed #0078d8;
 68 }
 69 
 70 /* right menu */
 71 #rightmenu{
 72     border:1px solid #0078d8;
 73     background:#0078d8;
 74     border-radius:10px;
 75 }
 76 #rightmenu ul{
 77     background:white;
 78 }
 79 #rightmenu li{   
 80     background: none repeat scroll 0 0 #3385ff;
 81     border: 1px solid #3385ff;
 82     border-radius: 5px;
 83     color: white;
 84     margin: 10px;
 85     padding: 5px;
 86     width: 150px;
 87 }
 88 #rightmenu li a{
 89     color:white;
 90     padding-left:10px;
 91 }
 92 #rightmenu li:hover{
 93     background:#317ef3;
 94 }
 95 #rightmenu h3{
 96     color:white;
 97     padding:2px 0 5px 10px;
 98     font-size:18px;
 99     border:0 none;
100 }
101 
102 #blog-calendar{
103     background:white;
104 }
105 div.commentform{
106     margin-bottom:100px;
107 }
108 /* advertise */
109 #site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
110     width:0;
111     height:0;
112     display:none;
113     overflow:hidden;
114 }
115 
116 /* calendar */
117 .Cal{
118     border:0 none;
119     width:100%;
120     height:200px;
121     font-size:14px;
122 }
123 .CalTitle{
124     font-size:15px;
125 }
126 .CalTodayDay{
127     background:#0078d8;
128 }
129 .CalTodayDay a u{
130     color:#fc6700;
131     text-decoration:none;
132 }