Susie’s Thoughts

While working on my Wordpress template I’ve used some resources I discovered when I started my design blog many years ago. I thought I’d plug the tutorials for those of you who are planning on updating your template.

Color scheming and page layout

Other ways to create color schemes for your template

CSS and XHTML tutorials, Blogger Tags

Wordpress tags

Example of the color palettes from the Color Blender page I used for this template:

I didn’t use every color, but I selected the value I needed from the palette. The original red, green, black and light yellow are from the header image.

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

I have imported my tutorials and posts from my design blog and I’m currently setting up them as articles on a separate page. My blog is probably going to look a little messy for a while until I get it all sorted out. Sorry for that!

Since I’m on vacation and have been a little lazy creating my own tutorials, I will provide you with a link to another really good site I’ve found. The site is called Mandarin Design and is filled with style sheet tips and tricks. A really good feature is that you can copy and paste code-snippets and use on your own blog.

I will update my own blog really soon, but while on vacation I want to take it easy and do what I feel like. If it’s sunny and warm outside I try not to spend too much time on the computer.

Have a nice summer!

I have a couple of questions to answer, but since I’m on vacation I took some time off the computer. I don’t remember anymore who was the first asking for advice, so I apologize if I don’t get this in the right order.

I think the first question I got was about how to move the profile and how to change the look of the blogroll. I will get back with a tutorial a little later today, but in the meantime you can check out one of my previous post about “Styling your profile info”.

TiQbOy wanted to know how to get started with creating your own template. There are plenty of sites that show how to create a template in Photoshop, I haven’t found any for GIMP, so I will create a flash tutorial showing how later.
Some web layout tutorials for Photoshop:

• SweDesignz / Simple Web Page
• SweDesignz / Clean Web page
• Photoshopsupport.com / Photoshop Web Template — Web Site Design Tutorial
• Photoshopsupport.com / Blog template design tips

Doug wanted to know how to transfer critical information from one template to another without learning how to design a template himself. My answer for that is, that you still need to know what the different parts of the code does, and then copy and paste the code you want to transfer into the new template. It can be a little bit tricky to get it right, but that’s the only way to do it.

Waybar wanted to know if it’s possible to insert a Gritwire deskbar into a b2evolution template. I have signed up for Gritwire and also installed b2evolution onto my server, but it will still take a while before I can answer that question. I need to look deeper into both Gritwire and b2evolution before I know if it’s possible to get them working together.

I created a new layer for the blue background and placed it under the layer with the rose. After that I used the paint bucket tool to fill the new layer with the blue color.

I picked the color for the text from the flower with the color picker tool.

To be able to align the text easily I made sure i had the rulers showing and added some guides.
I created both names and the &-sign as separate text objects to be able to move them around and also use different font types for them.

The last step was to save the image as a jpg picture file and upload it to my host.

Good Photoshop tutorials for web design can be found at Pegaweb and Elated’s Photoshop Tutorials. For GIMP remember the Gimp manual.

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

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.