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

How to write configuration files and use MyBatis simply

How to write configuration files and use MyBatis ...

How to deploy Angular project using Docker

There are two ways to deploy Angular projects wit...

SQL implementation of LeetCode (184. The highest salary in the department)

[LeetCode] 184. Department Highest Salary The Emp...

MySQL partitions existing tables in the data table

Table of contents How to operate Operation proces...

Analyze Tomcat architecture principles to architecture design

Table of contents 1. Learning Objectives 1.1. Mas...

MySQL 5.7.13 installation and configuration method graphic tutorial on Mac

MySQL 5.7.13 installation tutorial for Mac, very ...

Solution to 1067 when Mysql starts in Windows

I just started working a few days ago and install...

Share the 15 best HTML/CSS design and development frameworks

Professional web design is complex and time-consu...

Detailed explanation of eight methods to achieve CSS page bottom fixed

When we are writing a page, we often encounter a ...

MySQL's conceptual understanding of various locks

Optimistic Locking Optimistic locking is mostly i...

Implementation of interactive data between QT and javascript

1. Data flows from QT to JS 1. QT calls the JS fu...

HTML table tag tutorial (23): row border color attribute BORDERCOLORDARK

In rows, dark border colors can be defined indivi...

Ubuntu 20.04 firewall settings simple tutorial (novice)

Preface In today's increasingly convenient In...