FileMeta

File Identity and Metadata Project

A Project by Brandt Redd

Monday, September 3, 2018

Custom CSS for Blogger

Lets say you succeeded in creating a cool website and you developed your own css style that's simple, clean and functional. Besides, you even made a responsive design. Now you want to add a blog to that site and use the same style on your blog as you do on the rest of your site.

You choose Google blogger because it's simple to use, capable, and free. Blogger lets you customize your site and, if you include advertisements, they're at your choice.

You go to the settings for your blog, select the "Theme" tab, and click "Edit HTML" because that's how you load custom CSS. "Holy Caramba!" there's over 2000 lines in the blogger template! It's all been automatically generated with no comments. You might spend days or weeks figuring it all out!

Thankfully, it's much easier than that.

The Minimal Blogger Template

Rather than try and modify the thousands of lines you found in blogger, start with this minimal template.

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'
    xmlns:b='http://www.google.com/2005/gml/b'
    xmlns:data='http://www.google.com/2005/gml/data'
    xmlns:expr='http://www.google.com/2005/gml/expr'>

  <head>

    <b:include data='blog' name='all-head-content'/>

    <title><data:blog.pageTitle/></title>

    <b:skin>
      <![CDATA[
      body {
        font: $(body.font); 
        color: $(body.text.color); 
        background: $(body.background); 
        padding: 0 $(content.shadow.spread) $(content.shadow.spread) $(content.shadow.spread); 
        $(body.background.override) margin: 0; 
        padding: 0; 
      }
      ]]>
    </b:skin>

  </head>

  <body>
    <b:section id='main' showaddelement='yes'>
      <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
    </b:section>
  </body>

</html>

We're going to assume that you're somewhat familiar with HTML and it's relative XML. If not, study a few tutorials and come back to this.

The minimal template has five important parts:

  1. Front Matter: This is all of the stuff at the beginning. It includes the xml declaration, the DOCTYPE, and the opening tag with all of the namespaces. Leave this alone. It needs to be there but you don't really need to do anything with it.
  2. <b:include... /> : This tells Blogger where to put all of its header content. Leave it alone too.
  3. <title> : This is where the page title goes. The default will fill in the title of your blog which is usually exactly what you want. So, leave this alone.
  4. <b:skin> : This is where your CSS style goes. The version in this basic template is the absolute minimum. It uses the $ tags to fill in values from the built in blogger theme editor. You're going to replace the style with your own. Doing so, without Blogger's special $ tags will disable the blogger theme editor, but you'll get exactly the look you want and have many more customization options.
  5. <body> : This is the template for the body of your blog. The basic template has a single-column layout and it only has one widget in place which is the blog body.

To this basic template we will make two customizations. We will update the CSS styles to improve the look of the blog and we'll change the layout by modifying the body template.

Adding Your CSS Styles

The first customization is to add a full set of CSS styles. These go within the <b:skin> CDATA section in the minimal template. Delete the existing body style and add your full set of styles. The set from my previous blog post is a good starting point. Paste the full text of the styles directly in.

To that basic style set, we will add a few more styles to support the layout of the blogger site. In this case, I'm using a two-column layout. You can modify this for a different number of columns.

/* ========= Column Layout ========= */

#columns {
    display: block;
    border: none;
    margin: auto;
}

#column1 {
    display: table-cell;
}

#column2 {
    display: table-cell;
    width: 15em;
}

@media only screen and (max-width: 30em) {
    #column1 {
        display: block;
    }

    #column2 {
        display: block;
    }
}

The first three styles here set up the wrapper for the set of columns and then the styles for the two columns themselves. Setting display to "table-cell" is a handy way to position the columns side-by-side without using an actual table.

The "@media only..." clause indicates that the next section only takes effect if the width of the screen is less than 30em (em is relative to the font size). In that case we change display to "block" (instead of "table-cell") which will cause the so-called columns to be laid out top to bottom. The net result of this is a responsive design. On narrow displays (e.g. phones) the blog will be laid out vertically with the first section above the second.

Now we'll add a few styles to customize the Blogger look. The styles below are tied to the class names of specific blogger elements. I've inserted blank styles for others that you might want to customize. If there's some other element you want to customize that I didn't include here, you can discover the right reference by bringing up your blog in the Chrome or Edge browser, using programmer tools to examine the element you want to change and then look to see what class is applied to the element or a near parent of the element.

The comments help explain what each style is doing.

/* ========= Blogger-Specific Styles ========= */

/* The header before a set of posts on a particular date.
On the main page this appears before each new date.
On a post page this appears right before the post header.
*/
.date-header {
    font-size: 1.5em;
    font-weight: bold;
    color: var(--clr_accent2);
    margin-top: 0.5em;
    margin-bottom: 0;
}

.post-outer {
}
.post-outer::after {
    /* Draw a gradient line between blog posts */
    content: "";
    clear: both;
    display: table;
    background-image: var(--gradient_hr);
    height: 0.2em;
    width: 100%;
    margin-top: 1em;
}

/* The title of a particular post. Blogger uses h3 but we make the style match h1. */
.post-title {
    font-size: 2.0em;
    font-weight: normal;
    color: var(--clr_accent1);
    margin-top: 0.2em;
    margin-bottom: 0.2em;
}

.post-header {   
}

.post-body {
}

.post-footer {
}

/* Widget titles are <h2>. The second column where my controls are located is class='sidebar' */
.sidebar h2 {
    padding: 0 0.2em;
    background-image: linear-gradient(to right, #D0D0D0, #E8E8E8, #E8E8E8, #D0D0D0);
}

/* Customize the previous, next, and home links to look like buttons. */
.blog-pager-older-link, .blog-pager-newer-link, .home-link {
    display: inline-block;
    padding: 5px;
    color: white;
    background-color: var(--clr_accent2);
    border: 1px solid black;
    border-radius: 5px;
    text-decoration: none;
}
.blog-pager-older-link:hover, .blog-pager-newer-link:hover, .home-link:hover {
    color: white;
    text-decoration: none;
    background-color: var(--clr_accent2);
}
.blog-pager-older-link:visited, .blog-pager-newer-link:visited, .home-link:visited {
    color: white;
    text-decoration: none;
    background-color: var(--clr_accent2);
}

.blog-feeds {
    display: none;
}

Updating the Layout

All of the styles above belong in the <b:skin> section. The other thing we'll do is customize the blogger layout. Previously we had just one column Now we'll set up two columns.

The following replaces the <body> in the minimalist layout:

<body>
  <div id="main" >

    <!-- Header -->
    <header>
      
      <!-- logo -->
      <b:section id='MainSiteBlock' class='siteblock' maxwidgets='1' showaddelement='no'>
      <b:widget id='Header1' locked='true' type='Header'>
        <b:includable id='main'>
          <h1>
            <a expr:href='data:blog.homepageUrl'>
              <data:title/>
            </a>
          </h1>
          <h2>
              <data:description/>
          </h2>
        </b:includable>
      </b:widget>
      </b:section>

      <!-- main navigation -->
      <div class="menu">
        <ul>
          <li>
            <a href="http://google.com">Google</a>
          </li>
          <li>
            <a href="http://ofthat.com">Of That</a>
          </li>
        </ul>
      </div>
    </header>

    <div id='columns'>
      <b:section id='column1' class='maincolumn' showaddelement='yes'>
        <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
      </b:section>
      <b:section id='column2' class='sidebar' showaddelement='yes'>
        <b:widget id='BlogArchive1' locked='false' title='Archive' type='BlogArchive'/>
      </b:section>
    </div>
    
  </div>
</body>

This layout has a header with a logo (title) on the left and navigation on the right. That's followed by the columns wrapper with two columns in it.

Each column has one <b:section> element which is where you can place Blogger widgets. Setting "showaddelement" to "yes" lets you use the Blogger Layout settings to add, customize, and remove widgets in those sections.

Applying and Maintaining the Layout.

Save these changes in the Layout section of your blog setup and you'll see a two-column layout much like the one I use on this blog itself.

Most likely, you'll want to make some additional changes. So, you go back to Layout in your blog setup. Because you're using a custom layout, you can no longer use the layout designer. Instead you have to use "Edit HTML". When you click on that you find that it's back to more than 2000 lines of XML/HTML hybrid. Don't panic, Blogger simply filled in the default settings for your "Blog" widget. You can use search to find the elements that you changed including the styles in the <b:skin> element, and the "column1" and "column2" identifiers for the layout. You may choose to add more comments as keys to know where to make future changes.

Adding and Configuring Widgets

The custom Theme described here, plus any additional customizations you may make (e.g. three columns), is fully compatible with the Layout editor on blogger. Use the layout editor to add and configure widgets (also called "gadgets") such as Subscribe, About, Links, and more.

Blogger Reference

The various elements in the blogger layout are documented in the following sections. This will help you get into more advanced stuff:

No comments:

Post a Comment

Note: Only a member of this blog may post a comment.