How to Color Layout or Layout Blogger

To color each section or widget in the Blogger / Blogspot Layout, it cannot be applied to HTML5 types.

How to color each widget in the Blogger / Blogspot layout One of the most striking features of HTML5's structure is that it is written in capital letters, both in the opening and closing sections.

Examples like this:

<?xml version="1.0" encoding="UTF-8" ?>
    <!DOCTYPE html>
    <HTML>
    <head>
    <title>Hello world!</title>
    </head>
    <body>
    </body>
    <HTML>

Requirements to be able to color the Layout / Layout view on Blogger, you must change the writing of the <HTML> code which is capital letters) to lowercase letters. So the opening looks like this <html> and the lid is like this </html>

The next condition is, we must add (or replace) the skin template, with something like this:

<b:template-skin>
    <![CDATA[
    // Your CSS code here
    ]]></b:template-skin>

In this skin we can color any section and widget in Layout.

Layout coloring instructions can more or less be applied as follows:

Want to color the entire Layout / Layout view:

body#layout{background:#2469d8!important}

If you want to color the Layout / Layout section:

body#layout #content-wrapper{background-color:#673e7d}

body#layout #header-wrapper{background-color:#f442df}

body#layout #sidebar-wrapper{background-color:#f4416e}

body#layout #footer-wrapper{background-color:#d6634d}

If you want to color each widget in Layout / Layout. For example widgets in the sidebar:

#layout #sidebar-wrapper
.widget-content{background:##5fd64d!important;border:none!important}

Customize the ID or Class tag or the selector above according to your template structure.

When put together, the results of the application become like this:

<b:template-skin>
    <![CDATA[
    body#layout{background:#2469d8!important}
    body#layout #content-wrapper{background-color:#673e7d}
    body#layout #header-wrapper{background-color:#f442df}
    body#layout #sidebar-wrapper{background-color:#f4416e}
    body#layout #footer-wrapper{background-color:#d6634d}
    #layout #sidebar-wrapper
    .widget-content{background:##5fd64d!important;border:none!important}
    ]]></b:template-skin>

Similarly, a tutorial on how to enhance the appearance of the layout / layout by giving color to each section and widget.

Hope it helps and good luck trying.

How to Color Layout or Layout Blogger

Advertiser