CSS Basics For Bloggers
Changing your Wordpress templates will often result in display changes. In some cases, major or drastic changes will occur. In this post John H. Gohde will introduce bloggers to the basics of CSS. And, tell them how to restore the original look to their webpage theme display layouts.
The Basics of CSS is Simple
The basics of CSS are really simple. All blog pages and posts are organized into sections. Usually you will have a page header and a page footer, with the body of text appearing between your header and footer. How your body of text appears depends upon the number of columns in your theme, with one; two, or three columns being the most common. With a three column theme, your main body of text is often called the centercolumn, while your columns to the left and right of center are called sidebars or usually your leftsidebar and your rightsidebar.
CSS coding is usually stored in only one Worpress template called the Stylesheet (style.css). In CSS, your major sections of organization, as in header,footer, centercontent, leftsidebar and rightside bar are called an ID selector. ID selectors in CSS are denoted by a name that starts with a number sign symbol (i.e., #). While in your other HTML templates, they are denoted by id= without any # symbol.
In his previous post, John H. Gohde discussed modifying your Header (header.php) template that used the following original coding.
<span id="blogtitle">
<h1><a href="<?php echo get_settings(’home’); ?>"><?php bloginfo(‘name’); ?></a></h1>
<div id="sitedesc"><?php bloginfo(‘description’); ?></div>
<?php } ?>
</span>
</div>
Simple themes use only one level of ID, while complex themes will use two or more levels of IDs. The CSS that you need to change will always be at the lowest ID level. The corresponding CSS coding for the above IDs would be #headerwrap and #blogtitle. And, the CSS code that should be changed is the lowest level, or #blogtitle.
Usually changing your use of your <H1>, <H2>, and <H3> HTML coding elements in your theme’s templates will result in major display changes. To correct them, you will have to manually edit your theme’s Stylesheet (style.css) template in the Design – Theme Editor option of Wordpress.
CSS Stylesheet
From your Stylesheet use your web browser’s find command to locate #blogtitle. In a well designed theme, your H1 tag CSS coding definition will be located immediately below it, as the following example shows.
color: #4F4F4F;
background-color: transparent;
text-align: center;
padding: 7px;
}
#blogtitle h1 {
font-size: 26px;
color: #666666;
}
In a badly designed stylesheet the H1 tag will not be listed below it. In that case, you will have to search for your H1 CSS coding that should be located somewhere above #blogtitle on your Stylesheet. Once located, copy the H1 CSS coding to just below your #blogtitle CSS coding.
Once you have gotten #blogtitle paired together with its own H1 CSS coding definition, you are now in a position to fix your display problems by changing your CSS coding. In John’s previous post, he started using the H3 tag in the page header, while previously only the H1 tag was used. So, the only change that you will need to make is to add a H3 and the CSS class .title after the H1. Once that has been done, your corrected modified coding should now look something like the following.
color: #4F4F4F;
background-color: transparent;
text-align: center;
padding: 7px;
}
#blogtitle h1, h3, .title {
font-size: 26px;
color: #666666;
}
John H. Gohde had previously showed you how to improve your SEO optimization of your blog title. Now, John has just shown you how to keep all your Wordpress pages and posts looking the same.
The beauty of using CSS ID selectors to define elements of HTML coding is that changes made in how a <H3 >tag displays in one of your sections, such as page header, will not affect how the same <H3> displays in your other sections. Hence, in your posts you can define <H3> tags to display differently.
[tags]John H Gohde, CSS, Worpress template, CSS Stylesheet[/tags]
