Custom Blog Garden skin: Dark fluid responsive layout

Blog Park Skin Template Although there are more than 100 sets, but I need a few pieces of work, from the layout, mostly fixed layout, and some use the table layout, and some of the sidebar in the HTML page code order in front of the main content. These layouts are not conducive to page scaling and different screen size and resolution of device browsing, especially in today's web browsing device screen size and resolution of the era of diversification, fluid and responsive layout is the best choice. From the color, the blog park has 3 good dark skin, but does not meet the requirements of my layout.

I want my blog skin to meet the following requirements: template selection: Cannot use the table layout, the sidebar in the HTML page code order placed behind the main content, the page structure and style concise. Facilitates custom CSS styling. Color: The main background color is a dark color, text and other colors are bright.     Layout: Horizontal center, two-column layout on the left side bar, fluid + responsive layout. Here are the three requirements to customize the blog skin.

1. Select a set of existing blog templates

The people of the blog Park can not freely design the static HTML page of the blog, unless your work has been approved by the blog Park, and then as a shared template for the majority of the blog Park people to choose to use. But the blog Park has more than 100 sets of templates, mostly to meet the static HTML page selection requirements. In addition, the template of the blog Park has a set of CSS style, this must be taken into account. For a comprehensive consideration, enter the blog management settings, where you choose a template called "Lessismore". As you can see, this template is a good base for custom styles.

2. Color, font, retouching and layout tweaks

      It's easy to customize the color of a page by choosing a template that's good for your custom style, combined with the browser's developer tools. However, the styles of individual places (such as code blocks) are defined in the Style property of HTML page elements, without class and ID attributes, which are generated automatically by JavaScript, and custom styles are difficult to retreat from without affecting accessibility. In addition, I have some local fonts, font size, background color has been adjusted, some places added border and shadow effect, some places have margin, padding fine-tuning. The following is the specific CSS code:

/*------Css code-----------------------------------*/#navigator  { background:  #666;  } #navList  { font-size: 16px; }.blogstats { font-size: 12px; } #sideBar  { width: 20%; border: none; padding: 0; }    # sidebar h3 { padding-left: 8px; background-color:  #666; &nbsp #sideBarMain   { padding-left: 8px; }body { background-color:  #333; color:  #fff;  font-size: 14px; }h1, h2, h3, h4, h5, h6, th, .feedbackcon,  .blogStats { color:  #fff;  } #main  { border: 1px solid # e5e5e5; }.day { margin: 20px 0px; }.posttitle { padding-left:  20px; font-size: 16px;              border-bottom-color:  #666; }.postbody, .postcon { padding: 0px 20px 10px;                         border-bottom: 1px solid  #666; }.postdesc { padding-right: 20px;  }a, .postCon a, .postBody a, .feedbackCon a { color:  #0dd;  }    a:hover, a:active, a:focus { color:  #ff8;  text-decoration: none;&nbsp #navigator,  #MySignature,  .day, .post { border:  1px solid  #e5e5e5;      border-radius: 8px; box-shadow:  2px 2px 10px  #aaa;  } #navigator  { border-radius: 8px 8px 0px  0px; }.post { border-right: none; border-top: none;          bordEr-radius: 0px 0px 8px 8px; padding-top: 1px; }.cnblogs_code, .cnblogs _code div {     color:  #000; font-family: consolas,  monospace, sans-serif; }

3. Layout

3.1 Horizontal Center

Overall horizontal centering the most common method is to place everything inside the body centered within a container element, which acts as a child of the body and then horizontally centers the container. In the selected "Lessismore" template, the div with the ID home satisfies the requirements of this container. The following is the horizontally centered CSS code:

Body {/* Other major browsers do not need this style, but it is necessary to center the IE6/7 */text-align:center;}    #home {/*margin:0px Auto; the content can be centered in other main browsers except IE6/7 */margin:0px auto;    /* Because of body text-align:center, style has inheritance, so to reset the text to the left to align */text-align:left; max-width:960px;}

3.2 Improvements to the navigation bar

The default style of the navigation bar for the "Lessismore" template is to float each item in the navigation bar to the left, with the div named. Blogstats floating Right, showing the height of the div that sets the navigation bar container to prevent the navigation container from collapsing without heights caused by the float. I don't think it's necessary to float Li to the left, just display:inline it, and then add the UL and the div named. Blogstats to the left and right floats respectively. Finally, it's best to clear the float so that the div as a navigation container wraps around the contents. The CSS code is as follows:

#navigator {height:auto; overflow:hidden; *zoom:1;} /* Div named. Blogstats has already been floating right in the selected template, no more setting */#navList {float:left;} #navList li {display:inline; float:none;}

3.3 Two-column and fluid layout

Default implementation of the 3.3.1 template

I found a lot of blog Park skin Templates as well as the vast majority of blog Park people use or custom skin, either the main content and sidebar are fixed width, or the sidebar fixed width of the main content adaptive width. As if there is no sidebar and the main content is non-fixed width, this is not conducive to page scaling.

My layout requirement is that the sidebar is left and the main content is on the right, with two columns of layout. Of course, the sidebar on the right is also very good layout, but for reasons of habit, I choose the sidebar on the left. The reason for selecting a fluid layout is to facilitate scaling. Because I implemented the two-column layout as well as the fluid layout, I put these two aspects together as a description. There are several ways to implement multi-column layouts, and the "Lessismore" template is already a two-column layout on the left side of the sidebar, using a floating approach. The multi-column layouts implemented in floating mode are more specific to the details and have more different ways. The "Lessismore" template defaults to the main content (ID maincontent) width set to 100% to the right, the sidebar (ID is sidebar) fixed width 220px left floating. The left margin (margin-left) of the main content is then set to a sufficient negative value ( -250px), and the sidebar "pulls" to the left side of the main content. However, the sidebar will overlap with the content inside the main content. So, in the main content, a div named Forflow is nested as a container for other elements, and the margin-left of the container is set to a value large enough to avoid overlapping. The main code is as follows:

#mainContent {width:100%; Margin-left: -250px; float:right;} #sideBar {width:220px; float:left;}. Forflow {margin-left:266px;}

Such a two-column layout implementation is a fixed side bar width, the main content width adaptive design. is not conducive to scaling, and the implementation of the more awkward.

advantages and disadvantages of 3.3.2 fluid layout

The core of the fluid layout is to define the width of the column in percent, and in the case of a multi-column layout with floats, each column defines the width as a percentage (or the horizontal margin of the partial column using a percentage), as long as the total width of all the columns (which takes into account the total width of the box model, not just the width of The horizontal scroll bar does not appear when the page is zoomed in, which is exactly what I need.

However, the fluid layout also has its limitations: one cannot make a column width adaptive. But since the percentage of each column is well-distributed, it's not a big problem. Secondly, if the screen is wide, the gap between the columns will be very large. This solves this problem by setting the maximum width of the container #home. The last style of the front horizontal center code is max-width:960px, just to solve the problem. Unfortunately, the dominant IE6 in the Celestial kingdom does not support the Max-width attribute. But this is not a big problem, because the particularly wide screen is not uncommon, even so, widescreen fonts and other content is relatively wider and larger, the proportion of the coordination. Third, if the screen is very narrow, or a large proportion of the scale, each column will be very slender, also not conducive to reading. The solution to the problem of a small screen width is the "responsive layout" that is to be said later. Large scale scaling problem at present I do not know what good solution, but also please know a lot of friends advice! But given the fact that large scale scaling is rare, this is not a big problem. The following is the realization of two columns of fluid layout.

3.3.3 Custom Implementations

Wordy so much, in fact the implementation of the code is very few, as follows:

#sideBar {width:20%;} #mainContent {margin-left:auto; width:78%;}. Forflow {Margin:auto;}

First, this is a floating-based layout. Because the existing styles of the "Lessismore" template already float the #maincontent to the right (must), the #sidebar floats to the left (not necessarily), so the custom style does not have to be set for floating styles. Second, the width of the sidebar is set to 20%, the main content is set to 78%, which is necessary, leaving a 2% gap between the two columns. Finally, all margins of the #maincontent left margin -250px and. Forflow are reset to auto.

4. Responsive layout and CSS media query

4.1 Why responsive layouts and media queries

Why respond to layouts and media queries? Since smartphones and tablets have grown up, their screens are small, but the resolution is getting higher! This results in these devices, the content on the Web page will look very small, and even can not see clearly, not conducive to reading. While scaling is possible, it is always a poor design experience to have users zoom in every time they open a Web page. Moreover, the multi-column layout of the pages on these small screen devices look very slender, but also unfavorable to reading. Below is a comparison of my blog's previous and post-application media queries via opera Mobile emulator analog ASUS Nexus 7:

Figure: Before applying media query, after applying media query

Below is a comparison of my blog's views before and after applying media queries via opera Mobile emulator analog Samsung Galaxy S III:

Figure: The image on the left is the application media query, right after the application media query

By contrast, it is true that the media query has been applied much better than the previous display.

4.2 Core technologies for media queries

The core technology that the responsive layout relies on is the CSS media query. It can be defined by the @viewport Rule window area to the physical size of the device as a benchmark, to solve the small screen High resolution page content display small problem. Unfortunately, the current implementation of this rule of the browser is not much, WP8 on the IE10 and newer version of the Opera browser implementation or partial implementation of this rule. For common browsers on devices such as Android and iOS, you need to use the <meta> tags within HTML for the same purpose. The declaration of this <meta> tag is as follows:

<!--HTML Code--><meta name= "viewport" content= "Width=device-width, initial-scale=1.0" >

Another core of CSS media queries is the @media rule, which has a high browser support rate, which is supported by most browsers except for IE8 and the browsers below. Because our responsive layouts are primarily for mobile smart devices, and browsers on these devices mostly support @media rules, IE8 and the following versions do not support or have a big problem.

4.3 Implementation of a responsive layout

For my blog layout, implementing a responsive layout of the CSS code is simple, as follows:

@-ms-viewport {width:device-width;} @media (max-width:990px) {#home {margin:0 15px;    }} @media (max-width:640px) {#sideBar, #mainContent {width:100%;} . post{Border-left:none;}}

But this is not enough, the @viewport rules are not supported by popular browsers on devices such as Android and iOS. So you have to use the <meta> tag inside the HTML. However, almost all of the HTML templates in the blog Park do not define META tags related to media queries, and I cannot manually change the static HTML page of the blog template. What do we do? You can only add <meta> tags to HTML by using JavaScript. Fortunately, we can add their own JS through the "Top HTML code" in the background management settings of the blog park. Here is the required JS code:

<script type= "Text/javascript" > $ (document). Ready (function () {var meta = document.createelement ("meta        ");        Meta.name = "Viewport";        Meta.content = "width=device-width, initial-scale=1.0";    $ (' head '). prepend (meta); });</script>

4.4 Disadvantages and improvements of responsive layouts

Responsive layouts are implemented using the methods described in section 4.3, but there are also drawbacks to responsive layouts. When the window area is small in width, the two-column layout of the responsive entire page becomes a column, and the sidebar is laid out at the bottom of the blog. If the blog content is very long, want to reach the sidebar will need to page multiple times. This is also detrimental to content access.

How to overcome this shortcoming? We can provide a jump anchor link at the top of the page (or any other convenient place) so that when you click on the link, you can jump directly to the sidebar. To implement this function, an easy way is to first in the blog Park Background Management settings page first code, add a link, such as:

<a id= "Jumptoaside" href= "#asideAnchor" > Skip to Sidebar </a>

Then, in the blog Park background management set up the bulletin code, add a link, such as:

<a id= "Asideanchor" name= "Asideanchor" ></a>

This way, you can overcome the drawbacks of the responsive layout and quickly access the sidebar. I have implemented this function for my blog (jump link should use some CSS style), see this article if you use a browser that supports media query, please reduce the width of the browser to a certain extent, you will see the top right corner of the page appears the text content "Jump to Sidebar" link, click on it, You can jump right to the sidebar. If you're using a vertical screen of your smartphone to browse this blog, you'll usually see this jump link as well.

5. Summary

After I tested with Chrome, IE10, FireFox, IETester, and opera Mobile emulator, the redesigned blog skins were pretty good on most devices and browsers. At least the layout is better than the default skins on many blog parks. However, if you are using IE6 browser to browse this blog, you will see an ugly interface, because the blog used a larger width of the picture, and IE6 does not support max-width properties, large pictures broke the layout. But if you use IE6 to browse my other posts without a particularly large-width image, the interface will be much better. As for the other design elements of the blog skin can only be based on personal preferences. Now I am using this skin is what I want to achieve in this article, the conditional interested friends can browse my blog through the mobile phone or tablet to test the effect. You can also use a PC browser that supports media queries for page scaling to change the window width to test the effect.

Of course, at the moment, the current skin (template) style you see on my blog is not necessarily the same as described in this article, because I can change the style of my blog at any time.

Due to the limited level, the mistakes in the text are unavoidable, please correct or give advice!

Custom Blog Garden skin: Dark fluid responsive layout