Susie’s Thoughts

Inserting a background image on your page can be done in many different ways. You can insert an image in the body tag or in one of the div tags that represent the layout of your page. More information about inserting a background image can be found on the htmldog.com website.

I wanted the picture to the left of my blog title and description so I inserted it as a background for the header. My code for the header now looks like this:

#header{
height:339px;
width:100%;
background-color:#FAFFFF;
background:#FAFFFF
url(’http://www.geocities.com/susieswe/blog2/background1.jpg’) left top no-repeat;
}

The height of the header is the same as the height of the picture I used. I set the height of the header tag after I had decided which picture to use and what size it should be.

To be able to use my own picture I needed a host to store the picture for me. I used my old Yahoo! Geocities account. The easiest way to get the URL right is to upload the picture to your host, surf to the picture and copy the URL from the address bar on your browser.

To be able to place the blog title and the description, so that they don’t overlap the image, I have to add a piece of code to the style sheet.

#blog-title {
color:#B5582C;
font-family:cursive, arial, sans-serif;
font-style:italic;
font-weight:bold;
font-size:4em;
margin: 20px 20px 30px 220px;
}

#description {
color:#695838;
font-style:italic;
font-weight:bold;
font-size: 1.5em;
margin: 5px 20px 5px 220px;
}

Information about margins and padding can be found at htmldog.com. You can find information about how to write shorter code on the page Shorthand Properties.

You can find the xhtml file here and a test blog here.

If you're new here, you may want to subscribe to my RSS feed. Thanks for visiting!

Since the font size issue seems to be a really complicated one, I started by defining a basic font for the whole document. I inserted font-family: verdana, arial, helvetica, sans-serif; and font-size: 80%; in the first section of the style sheet resulting in a code that looks like this:

html, body{

margin:0;

padding:0;

text-align:center;

background-color:#7C9D82;

font-family: verdana, arial, helvetica, sans-serif;

font-size: 80%;

}

I didn’t want to use a font size that the user can’t change, but I wanted something that works on different browsers so I used the information from the Elastic Design site. The next thing I will do is to create the styles for all the other parts of the template.

The blog title needs a font family, font size and color. More information about fonts can be found at HTML Dog. You have to create an ID for the title and use that for the header <h1> tag in your XHTML document. More information about Classes and Id’s can be found here, or from the links section in my sidebar. Information about the available font-families can be found here.

This is the style sheet code for the blog title and description:

/* Blog title and description

———————————————– */

#blog-title {

color:#B5582C;

font-family:cursive, sans-serif;

font-style:italic;

font-weight:bold;

font-size:4em;

}

#description {

color:#695838;

font-style:italic;

font-weight:bold;

font-size: 1.5em;

}

You also have to add this code to your XHTML file:

<h1 id=”blog-title”><$BlogTitle$></h1>
<p id=”description”><$BlogDescription$></p>

This is the code for the sidebar titles:

/* Sidebars

———————————————– */

.sidebar-title {

color:#B5582C;

font-weight:bold;

font-family:cursive, arial, sans-serif;

font-style:italic;

font-size:1.7em;

letter-spacing: 0.1em;

}

And this code goes in the XHTML file:

<h2 class=”sidebar-title”>Previous Posts</h2>

You can use the same code for all your sidebar titles.

This is the code for the Date Header:

/* Posts

———————————————– */

.date-header {

color:#B5582C;

font-family:cursive, arial, sans-serif;

font-style:italic;

font-weight:bold;

font-size:1.9em;

letter-spacing:.3em;

}

And this code goes in the XHTML file:

<h2 class=”date-header”><$BlogDateHeaderDate$></h2>

This is the code for the Post title:

.post-title {

font-family: cursive, arial, sans-serif;

font-style: italic;

font-size: 1.8em;

letter-spacing:.2em;

color:#020704;

}

.post-title a, .post-title strong {

color:#020704;

text-decoration:none;

}

.post-title a:hover {

color:#020704;

text-decoration:none;

background-color:#FAFFFF;

}

Code for the post body and footer:

.post-body {

line-height:1.6em;

font-size:1.2em;

}

p.post-footer {

text-align:right

}

And this code goes in the XHTML file:

<h3 class=”post-title”><BlogItemUrl><a href=”<$BlogItemUrl$>” title=”external link”></BlogItemUrl>
<$BlogItemTitle$>
<BlogItemUrl></a></BlogItemUrl></h3>

<div class=”post-body”>

<p><$BlogItemBody$></p>
</div>

<p class=”post-footer”>Posted by … </p>

Code for comments:

/* Comments

———————————————– */

#comments h4 {

font-family:cursive, arial, sans-serif;

font-style:italic;

font-size: 1.5em;

color:#B5582C;

letter-spacing:.2em;

}

And this code goes in the XHTML file:

<div id=”comments”>
<BlogItemCommentsEnabled><a name=”comments”></a>
<h4><$BlogItemCommentCount$> Comments:</h4>
…

You can find the xhtml file here and a test blog here.

Before we start working on the design in detail it’s good to get some information on how different browsers and platforms work. I use Firefox at home and Internet Explorer at work and both my blogs look pretty decent in these browsers. In Explorer you have to have text size set to medium to be able to read it though. My operating system is Windows XP on my desktop computer and Windows 2000 on my laptop. I downloaded Opera today and discovered some problems in the layout, so my design isn’t ok even though I thought so. I know only about 1-2% of my visitors’ uses Opera, but I still would like to have a design that works. So I guess I have to get into this part a little deeper and I’m going to do that by looking at this website first:

Css-discuss Wiki

Fonts and font size

A blog is about writing and of course reading, so one of the most important things to consider is what kind of font and font size to use. Because of all the different browsers and different operating systems around it isn’t easy to get it right and good-looking for everyone. I have some problems on this part myself and have to try to get something that is readable for both my blogs on all the different systems we have out there. I can’t test my site on a Linux or Mac computer, I only have to trust people to tell me if there are problems, but I will test my site in different browsers and different screen resolutions.

On the above site I found a couple of articles discussing font sizing and would suggest you to look into it before we continue working on the style sheet for this template.

How Do I Size Fonts?
Can I Force Text to Stay a Certain Size?
LineHeight
UsingFontSize

Open the layout xhtml file in your web page editor and start inserting the blogger tags. The easiest way to insert them is to copy and paste them from Blogger’s help page. Locate the<head></head> tags in your xhtml file and insert the tags that goes there.

<title><$BlogPageTitle$></title>
<$BlogMetaData$>

Locate the <body></body> tags in your template file and the header column. If you have used CSS Creator for your layout the header column will be the one with the text Head in it. Copy and paste the tags <$BlogTitle$> and <$BlogDescription$> to insert your blog title and description. You don’t have to worry about formatting at this point. We are going to do that later.

Locate the left column and insert the tags for your profile, previous posts and archive pages.

Locate the main column and insert the tags for your date header, posts and comments.

When you have inserted all the tags into your template it’s time to test it. If you are using your original blog for testing, make sure you have a backup of your original template to go back to. I would recommend though that you create a new blog for testing purposes; you can always delete that blog when your template is ready. Remember to either paste your style sheet into the template file or link to the style sheet file. If you link the file you have to upload it to another server and use the complete URL to that site. Use one of the tutorials for more information on how to use style sheets.

Copy your code from the editor and paste into the template editor on the Blogger site and republish your site.

Good luck and if you have any questions feel free to ask!

Edit: I have uploaded a new version of the layout file with the most important tags inserted and also the style sheet file. You can examine the file by clicking here. You can also check out how the template look like when added to a blog and with some posts inserted by clicking here.

You need to know something about CSS (Cascading Style Sheets) to be able to create the look of your template. The easiest way is to have one of the tutorials open in a separate window while you work.

You can find some tutorials here:
HTML Goodies basic css tutorial
HTML Goodies Classes and Id tutorial
CSS Tutorial

You also need some knowledge about XHTML and can find tutorials here:
Xhtml tutorial
A three part XHTML tutorial

Information about the required blogger tags can be found on the Blogger help page.
If you use another blogging host or software you need to find the right tags from your provider’s website.

If you don’t have a picture to create your color scheme around you can use one of these online tools instead:

Color Schemer Online
Color Blender
Color schemes generator 2

To be able to use your own pictures on a layout you need to get a host to store those images for you. I have a free Yahoo!Geocities account and use that for storing all the images and files I use here.

The first thing I did when creating the template for this blog was choosing a photo. I liked the colors on my photo of the galley M/Aux Marita a rainy winter day. I edited the picture in Adobe Photoshop a bit and used the color picker to create a color scheme for my template. You can see the colors I picked and used in the table below.

I wanted to create a table-less design, but haven’t had time to get into the coding part myself, so I used an online CSS layout creator for the layout. There are a couple around but I really liked this CSS Creator.

Here is a link to the XHTML file the CSS Creator generated [layout1.html].

Here is a link to the style sheet the CSS Creator generated [layout1.css].