CnBlogs custom blog style sharing

CnBlogs custom blog style sharing

After spending half the night on it, I finally managed to roughly finish the style of the blog.

The whole blog is based on blue, which is quite passionate and I like it.

What’s more frustrating is that both rightmenu and main are in position:absolute layout. Adding a footer is really disgusting. Although it is now position:fixed, when the number of tags and essays increases, it will definitely cover some content. I don't have js permission, so leave it alone for now.

1. Footer code: The MyFooter part directly inserts the inline Css style. I am too lazy to modify it. I will definitely remove the footer after a while.


Copy code
The code is as follows:

<div id="myFooter" style="position: fixed; bottom: 0px; width: 100%; height: 85px; background: none repeat scroll 0px 0px rgb(0, 120, 216);">
<p id="myFootText">Knowledge changes destiny, programmers save lives</p>
<p id="myFootCopy">ohmygirl@2014</p>
</div>

2. At the same time, the annoying promotional links and advertising banners at the bottom of the article are removed. It looks much cleaner. The CSS code is:


Copy code
The code is as follows:

/* advertise */
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
width:0;
height:0;
display:none;
overflow:hidden;
}

3. The position and size of the comment button at the bottom of the article are rather awkward; it is too far to the left and the clickable area is too small. Here are posted together:


Copy code
The code is as follows:

#RecentCommentsBlock li {
margin: 0;
width: 275px;
}
#RecentCommentsBlock li.recent_comment_body {
border-radius: 0;
margin: 0;
}
#RecentCommentsBlock li.recent_comment_title {
border-radius: 5px 5px 0 0;
margin: 3px 0 0;
}
#RecentCommentsBlock li.recent_comment_author {
border-radius: 0 0 5px 5px;
margin: 0;
}
.desc_img{
width:75px;
max-width:75px;
}

#blog-calendar{
background:white;
}

/* comment */
div.commentform{
margin-bottom:100px;
}
#commentform_title {
background: url("<a href="http://static.cnblogs.com/images/icon_addcomment.gif">http://static.cnblogs.com/images/icon_addcomment.gif</a>") no-repeat scroll 0 2px;
color: #0078d8;
font-size:14px;
}
div.commentform p{
margin-bottom:10px;
}
.comment_btn {
height: 35px;
width: 90px;
background: none repeat scroll 0 0 #0078d8;
border: 0 none;
border-radius: 5px;
color: white;
cursor:pointer;
}
.comment_btn:hover{
background:#317ef3;
}
#commentbox_opt,#commentbox_opt + p {
text-align:center;
}
#tbCommentBody{
width:100%;
resize:none;
}
#tbCommentAuthor,#tbCommentBody{
border:1px solid #0078d8;
}
#tbCommentBody:hover{
border:1px solid #fca021;
}
#comments > h3 {
background: none repeat scroll 0 0 #0078d8;
border-radius: 3px;
color: white;
padding: 8px;
border:0 none;
font-size:14px;
}
#comments{
font-size: 13px;
}
#comments h4{
margin-top:10px;
}
#comments h4 span {
color: #6c6351;
font-size: 12px;
}
.comment_actions {
border-bottom: 1px dashed #0078d8;
display: block;
padding-bottom: 10px;
}
.blog_comment_body {
color: #111;
font-size: 13px;
margin-bottom: 10px;
margin-top: 10px;
}
#comment_nav {
font-size: 14px;
margin-top: 10px;
text-align: right;
}

Finally, the CSS code for the blog theme is:


Copy code
The code is as follows:

/* header */
#header{
border:1px solid #044e97;
background:#0078d8 repeat;
box-shadow:0 0 5px;
}
h1{
background: none;
border-bottom:0 none;
}
#main{
margin-top:5px;
border-right:0 none;
min-height:1040px;
}
#Header1_HeaderTitle{
color:white;
font-weight:bold;
font-size:24px;
text-shadow:1px 5px 1px #000;
}
#Header1_HeaderTitle:hover{
color:#fca021;
}
#tagline{
color:white;
}
p.date{
background: none repeat scroll 0 0 #0078d8;
border-bottom: 1px solid #aaa;
border-radius: 5px;
color: white;
font-size: 14px;
font-weight: bold;
margin: 10px 10px 0 50px;
padding: 10px;
}
.postFoot, p.postFoot{
padding-bottom:2px;
border-bottom:1px solid #0078d8;
}
.postTitle{
padding:5px 0;
}
.postTitle a{
font-size:15px;
padding:2px 0;
}
.post h2{
border-bottom: 1px dashed #0078d8;
font-size: 1em;
margin-top: 10px;
padding: 0 0 10px;
}
.c_b_p_desc_readmore:hover{
color:#faa123;
}
#cb_post_title_url{
font-size:18px;
}
#MySignature{
border: 1px dashed #0078d8;
display: block;
padding: 5px;
}
#green_channel{
border: 1px dashed #0078d8;
}

/* right menu */
#rightmenu{
border:1px solid #0078d8;
background:#0078d8;
border-radius:10px;
}
#rightmenu ul{
background:white;
}
#rightmenu li{
background: none repeat scroll 0 0 #3385ff;
border: 1px solid #3385ff;
border-radius: 5px;
color: white;
margin: 10px;
padding: 5px;
width: 150px;
}
#rightmenu li a{
color:white;
padding-left:10px;
}
#rightmenu li:hover{
background:#317ef3;
}
#rightmenu h3{
color:white;
padding:2px 0 5px 10px;
font-size:18px;
border:0 none;
}

#blog-calendar{
background:white;
}
div.commentform{
margin-bottom:100px;
}
/* advertise */
#site_nav_under,#ad_under_post_holder,#under_post_news,#google_ad_c2,#under_post_kb{
width:0;
height:0;
display:none;
overflow:hidden;
}

/* calendar */
.Cal{
border:0 none;
width:100%;
height:200px;
font-size:14px;
}
.CalTitle{
font-size:15px;
}
.CalTodayDay{
background:#0078d8;
}
.CalTodayDay au{
color:#fc6700;
text-decoration:none;
}

<<:  About the selection of time date type and string type in MySQL

>>:  Linux system repair mode (single user mode)

Recommend

Implementation idea of ​​left alignment of the last row of flex box layout

Using flex layout, if it is a nine-square grid, i...

In-depth analysis of MySQL lock blocking

In daily maintenance, threads are often blocked, ...

Specific use of Mysql prepare preprocessing

Table of contents 1. Preprocessing 2. Pretreatmen...

CSS hacks \9 and \0 may not work for hacking IE11\IE9\IE8

Every time I design a web page or a form, I am tr...

A complete list of commonly used Linux commands (recommended collection)

Table of contents 1. System Information 2. Shutdo...

MySQL database SELECT query expression analysis

A large part of data management is searching, and...

Perfect solution for vertical centering of form elements

Copy code The code is as follows: <!DOCTYPE ht...

How to use border-image to implement text bubble border sample code

During the development activity, I encountered a ...

How to Communicate with Other Users on the Linux Command Line

It's easy to send messages to other users in ...

Detailed explanation of gcc command usage under Linux system

Table of contents 1. Preprocessing 2. Compilation...