CSS/HTML Basics for Bloggers–Part 1

 

It’s hard to believe that when I first started this blog just over a year ago I knew absolutely nothing about CSS/HTML. I’ve learnt so much in the past year and I’ve really enjoyed it. So many bloggers want to be able to tweak their theme but aren’t sure on how to do it so I thought I’d share some of my knowledge to help you achieve the effect you want on your blogs.

This is going to be a 2 part guide. The 1st part will focus on those bloggers that use Google Blogger and then in the 2nd part I will focus on Wordpress.

I will use the HTML from one of my old blogger blogs to demonstrate what you need to change to achieve the desired result.

This is the code at the top of my template.

<Variable name="bgcolor" description="Page Background Color"
             type="color" default="#135" value="#ffffff">
   <Variable name="textcolor" description="Text Color"
             type="color" default="#ccc" value="#666666">
   <Variable name="linkcolor" description="Link Color"
             type="color" default="#9bd" value="#F5A9A9">
   <Variable name="pagetitlecolor" description="Title Color"
             type="color" default="#eee" value="#cccccc">
   <Variable name="descriptioncolor" description="Blog Description Color"
             type="color" default="#79b" value="#666666">
   <Variable name="titlecolor" description="Post Title Color"
             type="color" default="#fc6" value="#F5A9A9">
   <Variable name="bordercolor" description="Border Color"
             type="color" default="#468" value="#ffffff">
   <Variable name="sidebarcolor" description="Sidebar Title Color"
             type="color" default="#579" value="#F5A9A9">
   <Variable name="sidebartextcolor" description="Sidebar Text Color"
             type="color" default="#ccc" value="#999999">
   <Variable name="visitedlinkcolor" description="Visited Link Color"
             type="color" default="#a7a" value="#999999">

The code above sets the default colours for your theme.  So to change these colours on your blog just look up the html code for your desired colour here and replace the numbers above with the html code number for the colour you require. Simple!

body {
      background:$bgcolor;
      margin:0;
      color:$textcolor;
      font: x-small $bodyfont;
      font-size/* */:/**/small;
      font-size: /**/small;
      text-align: center;
      }

This code sets the body of your blog. The $bgcolor is the variable you defined in the previous step.  You can change the text align to left or right if you don’t wish it to be centred. And the text color is what you specified in the previous step.  The margin is the space around the outside of the theme.

a:link {
      color:$linkcolor;
      text-decoration:none;
      }
   
a:visited {
      color:$visitedlinkcolor;
      text-decoration:none;
      }
   
a:hover {
      color:$titlecolor;
      text-decoration:underline;
    }

This code specifies the colour and text decoration for your links. As before the link and title colours were specified in the first step. Text decoration can be set at ‘none’ for normal text, ‘underline’, ‘italic’ or ‘bold’.

#header {
background: url(http://zzzz.jpg) no-repeat top center;
height: 335px;
width: 924px;
}

This code is for your header. If your header is too big or small, change the height and/or width in this html.

#outer-wrapper {
  width: 950px;
  margin:0 auto;
  text-align:$startSide;
  font: $bodyfont;
  background: #ffffff;
  }

The outer wrapper area includes the posting area, sidebars and header.  Changing the "width" will make that area larger or smaller.
Just remember that if you change the size of this area you’ll need to amend the size of your posting area and the sidebars too.  The total width of your posting area/sidebars must be less than or equal to the width of the outer wrapper.

#main-wrapper {
  width: 600px;
  float: $startSide;
  padding-left: 10px;
  padding right: 10px;
  margin-left: 0px;
  margin-right: 10px;
  word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
  overflow: hidden;     /* fix for long non-text content breaking IE sidebar float */
  }

The main wrapper is your posting area size. To make it bigger or smaller just increase or decrease the width. Padding-left adds space to the left of the posting area and padding-right adds space to the right. If those values were both 0 then there wouldn’t be any gap between the post area and he sidebars. It is of course important to have a space between page elements otherwise your blog would look crowded and hard to read.

*/
h2.date-header {
  margin:4.5em 0 1.5em;
  border-bottom: 0px dotted $bordercolor;
  text-align: left;
  text-transform:uppercase;
  }

This code helps change the apeearance of the date on your posts.  ‘text-transform’  means what case the date is in. Uppercase makes it all capitals, lowercase makes it all non capitals.

‘Border Bottom’ sets the border underneath the date.

.post h3 {
  margin:.25em 0 .5em;
  padding:0 0 4px;
  font-size:170%;
  font-weight:normal;
  font-family:fraktur;
  line-height:1.4em;
  color:$titlecolor;
  text-transform:lowercase;

This is the code for your post titles. Increasing or decreasing font size will of course make your titles bigger or smaller. Font weight can be normal or bold. And you can also change the text to lower or uppercase (like the previous step) under ‘text-transform’.

So these are the basics to tweaking your theme in Blogger but of course if you have any questions just drop it in the comments section!