Blog customization Garden Code

Blog customization Garden Code

Version: 2019-08-08

This article based on Simple Memory template, and has acquired CSS and JS rights, this version is not the final version.

If wrong, please point out that open source code can be revised and improved, only for learning exchanges, please indicate the source reprinted!

This article documents on the blog home page optimization process of trying to park and the associated CSS source code.

Prior to this by default in the "Management - part of the setup options," Well contents displayed per page, in the "management - make the following settings" section.

Part 1 custom CSS Code ( body part)

You should first solve the problem of scaling and mobile web client-side image display incomplete, where the use of mobile terminal mode "forced to use web client" to modify the body set up section.

By Dream Weaver to view the full size (min-width, max-width ) set format adaptation, and set the width to 100% .

1 body{
2 width: 100%;
3 min-width: 740px;
4 max-width: 865px;
5 }

Optimization can make use of the rest of the browser modify elements under developer mode gradually improve (with the "Select elements" and "elements highlighted" can save time reading the code), then the "Edit" section of the properties copied to the appropriate location blog Park .

Setting blog main title font format (rollover).

1 /* bundle-simplememory.min.css (1, 561) */
2 a:link {
3     color: rgb(102, 8, 116);
4     text-decoration: none;
5 }

Setting blog main title font format.

1 /* bundle-simplememory.min.css (1, 1047) */
2 #blogTitle h1 a {
3     color: rgb(102, 8, 116);
4 }

Set the article title font format, each page will inherit this format (rollover).

1 /* bundle-simplememory.min.css (1, 2597) */
2 .postTitle a:link, .postTitle a:visited, .postTitle a:active {
3     color: rgb(102, 8, 116);
4     transition: all .4s linear 0s;
5 }

Set the article title font format, each page will inherit this format.

1 /* bundle-simplememory.min.css (1, 2659) */
2 .postTitle a:hover {
3     margin-left: 30px;
4     color: rgb(102, 8, 116);
5     text-decoration: none;
6 }

Set post section of font styles, and cancel the original template comes with the " clock " pattern.

 1 /* bundle-simplememory.min.css (1, 2833) */
 2 .postDesc {
 3     font-size: 13px;
 4     background: none;
 5     color: rgb(0,127,0);
 6     float: left;
 7     width: 100%;
 8     clear: both;
 9     text-align: left;
10     padding-left: 0px;
11     padding-right: 5px;
12     margin-top: 0px;
13     line-height: 1.5;
14 }

Set nickname, age and other garden font format.

1 /* bundle-simplememory.min.css (1, 3410) */
2 #sideBar a {
3     color: rgb(255, 0, 255);
4 }

Set the background color (transparency).

1 /* bundle-simplememory.min.css (1, 253) */
2 body {
3     color: #000;
4     background-color: rgba(255, 255, 0, 0.1);
5     min-height: 101%;
6     font-family: bold;
7 }

Setting announcements, labels, box of transparency.

 1 /* bundle-simplememory.min.css (1, 722) */
 2 #home {
 3     margin: 0 auto;
 4     width: 65%;
 5     min-width: 950px;
 6     background-color: rgba(255, 225, 255, 0.5);
 7     padding: 30px;
 8     margin-top: 50px;
 9     margin-bottom: 50px;
10     box-shadow: 0px 6px 18px rgba(127,127,127,0.5);
11 }

Setting announcements, labels, box shadows and location.

 1 /* bundle-simplememory.min.css (1, 4334) */
 2 .newsItem, .catListEssay, .catListLink, .catListNoteBook, .catListTag, .catListPostCategory, .catListPostArchive, .catListImageCategory, .catListArticleArchive, .catListView, .catListFeedback, .mySearch, .catListComment, .catListBlogRank, .catList, .catListArticleCategory {
 3     background: #f8f8f8 !important;
 4     margin-bottom: 25px;
 5     margin-top: 25px;
 6     width: 225px;
 7     word-wrap: break-word;
 8     box-shadow: 0px 2px 6px rgba(127,127,127,0.5);
 9     box-sizing: border-box;
10     border: 10pt solid #f8f8f8 !important;
11     border-top-width: 5pt !important;
12 }

Remove the ad (recommended articles).

1 /* blog-common.min.css (1, 18665) */
2 .c_ad_block {
3     margin-top: 10px;
4     line-height: 1.5;
5     display: none;
6 }

Setting the article "recommended" column located Avatar and "support" the middle, saving space.

 1 /* blog-common.min.css (1, 18975) */
 2 #green_channel {
 3     padding: 10px 0;
 4     position: absolute;
 5     left: 180px;
 6     margin-bottom: 10px;
 7     margin-top: 10px;
 8     border: #c0c0c0 1px solid;
 9     font-size: 12px;
10     width: 350px;
11     text-align: center;
12 }

Remove the ad (the latest IT news).

1 /* blog-common.min.css (1, 21519) */
2 #ad_t2 {
3     margin-top: 5px;
4     line-height: 1.8;
5     display: none;
6 }

Removing the reference pattern portion built, due to the different templates.

1 /* bundle-simplememory.min.css (1, 15084) */
2 .postBody blockquote {
3     background: url('images/comment.gif') no-repeat 25px 0;
4     background-image: none;
5     min-height: 35px;
6     _height: 35px;
7     line-height: 1.6em;
8     color: #333;
9 }

Set the navigation bar fonts, change the font, increase shadow.

1 /* bundle-simplememory.min.css (1, 1589) */
2 #navList a:link, #navList a:visited, #navList a:active {
3     color: rgb(0, 0, 0);
4     text-shadow: 0px 1px 1px rgba(255,255,0,0.5);
5     font-weight: bold;
6 }

Pages are still imperfections, such as incomplete picture shows part of the phone side, after scaling body part is left-aligned cause about margin asymmetry unsightly, title position lacks the background image, and so on. (No plans to improve)

Part 2 bulletin board optimization ( bar section)

Add text and pictures.

1  Welcome to Langyuan Qihan hut, where you can enjoy mathematics and physics wonderful!
2 <div> <IMG the src = "https://images.cnblogs.com/cnblogs_com/sxwlttsd/1497926/o_33012779.jpg" width = "100" height = "100"> </ div>

You can also increase JS member, and more.

Blog Park View source code itself, not to open back up!

Blog customization Garden Code

Guess you like