Susie’s Thoughts

To be able to create the header image you need to know how to do the following:

• Open a picture or create a new in your software.
• Create layers.
• Select a part of the picture with the Magic Wand tool.
• Erase the selected pixels.
• Scale a picture.
• Resize the canvas.
• Create custom colors.
• Pick a color from the picture.
• View and use rulers.
• Select font and font size.
• Insert text in an image.
• Move the objects and arrange them on the canvas.
• Save a file for the web as a jpg or gif image.

You can find the GIMP manual here and for Photoshop I recommend you to use the help file that comes with the software. You can also use one of the Photoshop or GIMP tutorials I have added to my links section in the sidebar.

I used the Magic Wand to get rid of the background around the flower. In this picture it was easy because of the contrast between the flower and the background. In a picture with lesser contrast you might need other tools to get rid of unwanted pixels.

The next step is to duplicate the layer and get rid of the background layer. You might not need to do this in Photoshop, depending on how you created the picture. Just make sure you have a layer with a transparent background and the rest of the process will be easy.

Resize the image to a 200 pixels height and 300 pixels width. In GIMP resizing an image is called Scale image and in Photoshop Image size.

Resize the canvas size to 800 pixels width, but keep the height as 200 pixels. The image is now the same size as the header. Resizing the canvas is called Canvas size both in GIMP and Photoshop

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

I have created a template for my daughter Naomi and her fiancé Booker’s wedding blog. You can find the blog here. In my next post I will tell you how I created the header image in Adobe Photoshop CS.

I created the borders around my footer by adding the border style, color and width to my style sheet. More information about border style, border color and other border properties can be found at the W3School web site. I wanted some space between the border and the text and therefor needed to add some padding. I also aligned the text to the right.

This is the style sheet code

p.post-footer {
border-color:#B5582C;
border-style:double;
border-width:3px;
padding:5px;
text-align:right;
}

This is the XHTML part of the code

The blogger tags is in blue and the XHTML tags in red. Remember to add comments into your code to make it easier to read later on.

<!– Begin Post footer –>
<p class=”post-footer”>
Posted by <$BlogItemAuthorNickname$> @
<$BlogItemDateTime$> <BlogItemCommentsEnabled>
<a href=”<$BlogItemPermalinkURL$>#comments”><$BlogItemCommentCount$> comments</a>
</BlogItemCommentsEnabled>
</p>
<!– End Post footer –>

The above code adds a footer looking like this

Posted by Susie @ 14:22 0 comments

I want the text Posted by Susie @ 14:22 at the left of the page and use the em tag to be able to do that. I nees to add the following code into the style sheet. First I needed to add the p command with a dot and then the suffix post-footer as in the style sheet code above, but added with the tag em. How and why we do this is explained on the CSS Syntax page at W3Scool.

p.post-footer em {
display:block; The display property is explained here.
float:left;
text-align:left;
font-style:normal;
color:#020704;
}

When I’ve added all the code I need into the style sheet I only have to add the em tag to the XHTML code like this:

<!– Begin Post footer –>
<p class=”post-footer”>
<em>
posted by <$BlogItemAuthorNickname$> @
<a href=”<$BlogItemPermalinkUrl$>” title=”permanent link“><$BlogItemDateTime$></a>
</em>

The above code adds a footer looking like this

Posted by Susie @ 14:22 0 comments

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

In my last post I asked what web design is and before we start changing the margins and the padding for headers and other elements on the page it could be good to check out some of the tutorials around talking about web usability. As so many of you pointed out in your comments, a blog should look the way the creator wants it to look. On the other hand, I write my blogs because I want to be read, everyone doesn’t have to agree with my ideas, but I want at least people to take a quick peek at my writing before their 30 or 20 seconds are up.

I teach IT at a business school and when it comes to business sites it’s even more important to design and create something that makes people want to stay. One of the recourses we have used at school is Jacob Nielsen’s Useit.com web site about usable information technology. I also use the WebReference.com web site. The WebReference.com web site has articles about both the technical aspects and the look of the page. Many of the articles are aimed more at professionals designing corporate web sites and don’t necessarily apply for personal sites. I guess it’s all about how much time and effort you want to put on your template.

One important part of the template is using white space in your design. White space is sometimes also referred to as negative space, and refers to the open areas between the graphics and text on your web page. White space also tells you where one section ends and another begins. Of course the space doesn’t have to be white, you can use your own colors. Even though I don’t like the layout of About.com, they do provide a lot of useful information on graphics design. The information here is more for print than the web,but it is still useful. Another good resource is the Web Style Guide.

To make the sidebar items a little easier to read I’ve added some margins to the side bar titles. My sidebar code now looks like this:

/* 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;
margin:40px 0px 10px 0px;
}

I added the information about the margins for the sidebar-title to my stylesheet. 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.

The next step would be to add some space to the way your posts are displayed. The code for my posts now look like this with the new code in red.

/* Posts
———————————————– */
.date-header {
color:#B5582C;
font-family:cursive, arial, sans-serif;
font-style:italic;
font-weight:bold;
font-size:1.9em;
letter-spacing:.3em;
margin:30px 0px 10px 5px;
}

.post-title {
font-family: cursive, arial, sans-serif;
font-style: italic;
font-size: 1.8em;
letter-spacing:.2em;
color:#020704;
margin:15px 0px 8px 0px;
}

.post-title a, .post-title strong {
color:#020704;
text-decoration:none;
margin:15px 0px 8px 0px;
}

.post-title a:hover {
color:#020704;
text-decoration:none;
background-color:#FAFFFF;
margin:15px 0px 8px 0px;
}

.post-body {
line-height:1.6em;
font-size:1.2em;
margin:5px 15px 5px 15px;
}

You can find the xhtml file here and a test blog here. It’s difficult to see what the profile looks like in the xhtml file, you can only examine the changes properly in the test blog.

There are different types of blogger tags you can use for your profile. You can find more information on the Blogger help page about the different tags to use. I have used the tag <$BlogMemberProfile$>.

When you use the <$BlogMemberProfile$> tag the following code and text will automatically be inserted into your XHTML file.

<div id=”profile-container“>
<h2 class=”sidebar-title“>About Me</h2>
<dl class=”profile-datablock“> <dt class=”profile-img“>
<a href=”http://www.blogger.com/profile/5722910″>
<img width=”73″ alt=”My Photo” height=”80″ src=”http://www.imagestash.com/uploads/34162.jpg”> </a> </dt>
<dd class=”profile-data“> <strong>Name:</strong>Susie </dd>
<dd class=”profile-data“> <strong>Location:</strong>Finland </dd> </dl>
<p class=”profile-textblock“> I’m a 42 year old teacher…</p>
<p class=”profile-link“> <a href=”http://www.blogger.com/profile/5722910″>View my complete profile</a> </p> </div>

To be able to change the style for your profile you need to use the classes from the above code and add them to your style sheet. Use the information from the recourses I have provided to change the style. My code looks like this:

/* Profile
———————————————– */
.profile-datablock {
margin:0px 5px 0px 0px;
line-height:1.6em;
font-size:1.1em;
}

.profile-img {
display:inline;
}

.profile-img img {
float: left;
margin: 0px 5px 0px 5px;
border: 3px double #B5582C;
}

.profile-img a:hover img {
border-width:0;
background-color:#D9D4B7;
padding:0;
margin: 0px 5px 0px 5px;
border: 3px double #B5582C;
}

.profile-img a:hover {
background-color:#D9D4B7;
padding:0;
}

.profile-data {
margin:0px 5px 0px 0px;
line-height:1.6em;
font-size:1.1em;
}

.profile-data a {
margin:0px 5px 0px 0px;
line-height:1.6em;
font-size:1.1em;
}

.profile-data strong {
display:block;
}

.profile-textblock {
clear:left;
margin: 0px 4px 0px 0px;
line-height:1.6em;
font-size:1.1em;
}

You can find the xhtml file here and a test blog here. It’s difficult to see what the profile looks like in the xhtml file, you can only examine the changes properly in the test blog.

HTML-kit

I have found a free HTML and CSS editor with many plug-ins. This editor is also able to handle XHTML and you can create your own plug-ins. I haven’t used it much yet, but I like the way you can preview your code both in Explorer and Firefox side by side.

You can change the style of your links by adding code, like on my example below, to your style sheet. You can use some of the same properties used for text on your links too. More information on styles for links can be found on the echoecho website.

It’s good to add comments to your code, because that will make your code easier to read later on and you will know what the code does.

/* Links
———————————————– */
a:link {
color:#DEA64E;
text-decoration:none;
}

a:visited {
color:#6E8F7E;
text-decoration:none;
}

a:hover {
color:#DEA64E;
text-decoration:none;
padding: 1px;
background-color:#6E8F7E;

}

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

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.

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