Show the new template (share a full set of CSS and images)

Source: Internet
Author: User

New template. You can take it by yourself and paste the CSS below. There are six images in total. Or you can directly use the CSS provided below, which already uses an absolute URL for the image. As long as I do not change the directory, I can always use it (the possibility of changing the directory is basically 0 ). Old Rules: This template is still based on the custom template. Select the Custom template in the background and disable the default CSS of the template.CodePaste it to your custom CSS.

Notes:

1. The template idea comes from the Netease blog. I just modified one piece and wrote a set of CSS for the blog garden. Therefore, do not praise me if you are an artist or beat me if you are an artist;

2. Green is more environmentally friendly, and it is said that it is also eye-catching, so I chose to introduce such a template into the blog Garden;

3. My original (do/use) template is adaptive full screen, and many people find that the screen is too wide to seeArticleYou have to twist the header to seriously affect the visual consistency. Therefore, this template limits the width and applies to the width of 1024 and above;

4. Because the resolution of the monitor is constantly increasing, the text in many places is increased to 14px to facilitate reading;

5. A bug: You must select calendar display. Otherwise, a problem may occur. There is a DIV in that place and there is no way to block it;

6. one problem: I hate old things, so I only use IE7 and ff3. IE6 is definitely not good, because I use the sub-Selector ">" and ff2 may be okay;

7. Style definition is too dead, so I used to write articles with my own style, which may not look good;

8. CSS Sprites is used. However, because HTML code cannot be modified, all images cannot be merged. Otherwise, there should be only one image.

In view of the above 1, 3, 5, 6, and 7, it is not convenient to publish a formal template. If you want to use it, you can do it yourself. You cannot set it in the background. Sorry for this.

The following is the CSS code. If necessary, add the code to your template according to the steps described in the first section. If you have any questions, please leave a message below and I will try my best to solve the problem:

/* Do not change */
# Entrytag {margin-top: 20px; font-size: 9pt; color: Gray ;}
. Topiclistfooter {text-align: Right; margin-Right: 10px; margin-top: 10px ;}
# Divrefreshcomments {text-align: Right; margin-Right: 10px; margin-bottom: 5px; font-size: 9pt ;}

/* For tags */
* {Margin: 0; padding: 0 ;}
Body {color: #005327; Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg1.jpg) Repeat-x top # 13b66d; font-size: 14px ;}
Table {border-collapse: collapse ;}
IMG {border: 0 ;}
Ul {overflow: hidden ;}
Li {list-style: none ;}
H1, H2, H3, H4 {font-weight: bold ;}
Input, textarea {Background: ece9d8; Border: 1px solid # 11995b; Vertical-align: middle; font-size: 12px; padding: 2px ;}
A {color: # ffffff; text-Decoration: none ;}
A: hover {text-Decoration: underline ;}
. Clear {clear: Both ;}

/* Header */
# home {margin: 0 auto; width: 963px ;}< BR ># header {text-align: center ;}
# blogtitle {Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) No-repeat-263px 0; Height: 160px ;}< BR ># blogtitle H1 {margin-top: 80px ;}
# blogtitle H1 a {font-size: 32px; color: #007034 ;}< BR ># blogtitle H2 {font-size: 14px; font-weight: normal; color: #007034 ;}< BR ># navigator {Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) No-repeat-261px-160px; Height: 124px ;}< BR ># navigator ul {padding: 46px 0 0 160px ;}< BR ># navigator Li {float: Left; width: 90px; font-weight: bold ;}< BR ># navigator IMG {display: none ;}
# navigator A: hover {text-Decoration: none; color: #138a59 ;}< br> # navigator. blogstats {text-align: Right; margin: 30px 30px 0 0 0 ;}

/* side bar */
# sidebar {width: 260px; float: Left; overflow: hidden; margin-left: 10px; line-Height: 1.6em; font-size: 12px; color: #077042 ;}< BR ># sidebar H3 {color: #9affd5; font-size: 14px ;}< BR ># calendar ar {padding: 20px; Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) No-repeat 0-73px; margin-bottom: 10px ;}< BR ># calendar. cal {width: 200px; Height: 180px ;}< BR ># calendar. caltodayday {Background: # 13b66d; font-weight: bold ;}< br> # calendar. caltitle {width: 120px; margin: auto; font-weight: bold; color: # ffffff ;}< br>. newsitem, # leftcontentcontainer> Div {Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg2.jpg) No-repeat bottom left; padding: 20px; margin-bottom: 10px ;}< BR ># sidebar H3 {Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) No-repeat 0 0; padding: 22px 0 30px 26px; margin:-20px ;}< BR ># sidebar Li {margin-left: 1em; text-indent: -1em ;}< br>. divrecentcomment {margin-left: 1em ;}

/* default page */
# maincontent {float: Right; margin-left:-290px; width: 100%; Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg4.jpg) repeat-y 275px 0 ;}< br>. forflow {margin: 0 8px 0 274px; overflow: hidden; Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg3.jpg) Top right no-repeat ;}< br>. day {margin: 0 20px ;}< br>. daytitle {display: None ;}< br>. posttitle {padding: 20px 0 10px; font-weight: bold ;}< br>. postcon {margin-left: 20px; line-Height: 1.6em ;}< br>. postdesc {border-bottom: 1px dashed # 11995b; padding: 16px; font-size: 12px; text-align: Right ;}< br>. topiclistfooter {font-weight: bold; Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg5.jpg) Bottom right no-Repeat; margin: 0; padding: 20px;}

/* View post */
# Topics {margin: 0 20px; line-Height: 1.8em ;}
# Topics. posttitle {margin: auto; width: 500px; text-align: center ;}
# Topics. posttitle A {font-size: 24px; color: #005327; line-Height: 30px ;}
# Topics. posttitle A: hover {text-Decoration: none ;}
# Topics. postdesc {border: none; padding-bottom: 0 ;}
# Topics IMG {display: none ;}
# Topics. Post IMG {display: block ;}
. Postbody P {margin: 8px 0 ;}
# Entrytag {color: #005327 ;}
. Feedback_area_title {Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg) 0-434px no-Repeat; Height: 30px; padding: 58px 0 0 30px; color: #9affd5; font-weight: bold ;}
. Feedbackitem {margin: 20px; padding-bottom: 20px; border-bottom: 1px dashed #005327 ;}
. Feedbackmanage {float: Right ;}
. Feedbackcon {margin: 6px 0 0 20px ;}
. Commentform {margin: 0 20px ;}

/* For list */
. Entrylisttitle,. postlisttitle,. thumbtitle,. forflow H3 Div,. gallerytitle {font-size: 18px; margin: 20px 0 0 20px ;}
# Myposts,. entrylist, # taglist,. Gallery {padding: 0 20px 20px; Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg5.jpg) Bottom center no-Repeat ;}
# Myposts. postlist {border-bottom: 1px dashed #005327; padding: 12px 0 ;}
# Myposts. postdesc2 {text-align: Right; font-size: 12px ;}
# Myposts. posttext2 {margin-left: 20px ;}
. Pager,. entrylistdescription,. thumbdescription,. entrylistitem {margin: 8px 20px ;}
. Entrylistposttitle {padding: 20px 0 10px; font-weight: bold ;}
. Entrylistpostsummary {margin-left: 20px; line-Height: 1.6em ;}
. Entrylistitempostdesc {border-bottom: 1px dashed # 11995b; padding: 16px; font-size: 12px; text-align: Right ;}
. Topiclistfooter {font-weight: bold; back ground: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg5.jpg) Bottom right no-Repeat; margin: 0; padding: 20px ;}
. Gallery table {width: 95%; margin: auto; text-align: center ;}
# Taglist table {text-align: Left; margin: 20px auto 0 ;}

/* Footer */
# Footer {text-align: center; color: # FFF; Background: URL (http://images.cnblogs.com/cnblogs_com/dingxue/144960/o_bg6.jpg)-261px-284px no-Repeat; Height: 110px; padding-top: 10px ;}

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.