Blog CSS style customization

Every time I see so wide screen but not full of feeling is really throwaway, code is squeezed automatic line is difficult to see well, and then see backstage there is a CSS custom function, and then try it, found that this function is very powerful indeed.

Skills:

Using F12 to view the source code, you will find that they have been designed to be very convenient to customize, and there are comments, as follows:

But want to spit groove is why the width is fixed px Ah, a little doubt is not with JS detection and then set up or too ear nose ...

For several hours, the effect is satisfactory, my custom is as follows:

/*Convention: 1. The original attribute is commented, and the new attribute is below. 2. If the above is an empty comment description, the new attribute is below. *//*------------------------------Banner header information--------------------------*//*title*/#header{position:relative;Top:0; Left:Auto;/*width:950px;*/width:95%;Height:310px;margin:Auto;Border:None;padding:0;background:None;}/*Blog Title*/#blogTitle{position:relative;Top:130px; Left:0;width:740px;Height:75px;margin:0;Border:None;padding:0;/**/Padding-left:2%;background:None;}/*navigation Bar Item Connection*/#navList a{Display:Block;width:70px;Height:31px;float: Left;text-align:Center;Padding-top:9px;font-size:14px;font-family: Microsoft Black, Microsoft Black, Microsoft ya Black, Microsoft ya Black;/*black question mark??? */    /**/Color:#666;}/*--------------------------------The main content panel----------------------------------------*//*main panel*/#main{position:relative;Top:0; Left:Auto;/*width:950px;*/width:95%;Height:Auto;margin:Auto;Border:None;Padding-right:0;}/*Content Panel*/#mainContent{float: Right;/**/width:80%;}/*panels for all item collections*/#mainContent. Forflow{background-position:Right top;}/*panel for each item*/. Day{position:relative;/*width:690px;*/width:90%;Height:Auto;margin:0 20px 0 20px;Border:None;padding:0;}/*title*/. Posttitle{position:relative;/*width:690px;*/width:100%;margin:0;Border:None;padding:0;}/*Item Content*/. Postcon{position:relative;/*width:690px;*/width:100%;Height:Auto;margin:10px 0 0 0;Border:None;padding:0;Color:#494949;font-family:Arial,helvetica,sans-serif;font-size:14px;Font-weight:Normal;text-decoration:None;Line-height:1.4;}/*description of the item*/. Postdesc{position:relative;width:690px;Height:30px;margin:0;Border-bottom:#ccc 1px dashed;padding:0;Color:#666;font-family:Arial,helvetica,sans-serif;font-size:12px;Font-weight:Normal;text-decoration:None;Line-height:1.4;}/*----------------------------------View the blog details page--------------------------------------*//*Blog Main panel*/#topics{position:relative;/*width:710px;*/width:95%;Height:Auto;margin:0;Border:None;padding:0;}/*Blog Title*/#topics. Posttitle{position:relative;/*width:690px;*/width:100%;margin:0;Border:None;padding:0;}/*Blog Content*/. Postbody{position:relative;/*width:690px;*/width:100%;Height:Auto;margin:0;Border:None;padding:0;Color:#494949;font-family:Arial,helvetica,sans-serif;font-size:14px;Font-weight:Normal;text-decoration:None;Line-height:1.6;}/*The author information below*/#author_profile{float: Left;/*width:280px;*/width:30%;Margin-top:0;Margin-bottom:10px;Color:#000;Margin-left:0;font-size:12px;}/*recommended icon, this thing by default is the right floating, depressed and no one to recommend me I also want to deal with it well want to directly display:none forget ...*/#div_digg{float: Right;Margin-bottom:10px;Margin-right:30px;font-size:12px;/*width:125px;*/width:33%;text-align:Center;Margin-top:10px;}/*recommended small hand icon*/. Diggit{float: Left;width:46px;Height:52px;background:url (' http://static.cnblogs.com/images/upup.gif ') no-repeat;text-align:Center;cursor:Pointer;Margin-top:2px;Padding-top:5px;}/*against the little hand icon*/. Buryit{/*Float:right;*/float: Left;Margin-left:20px;width:46px;Height:52px;background:url (' http://static.cnblogs.com/images/downdown.gif ') no-repeat;text-align:Center;cursor:Pointer;Margin-top:2px;Padding-top:5px;}/*--------------------------------side bar----------------------------------------*//*Side Bar*/#sideBar{/*width:205px;*/width:Auto;/*Try it or set it to auto otherwise the page will overlap when zooming*/Height:Auto;float: Left;}

.

Blog CSS style customization