Susie’s Thoughts

I love colors and what is better than a website where you can mix and create color palettes that suites your taste or web site. The ColourLovers site is a good tool for anyone who is about to redesign there website or create a new blog template.

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

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.

This post was written when my blog was hosted on Blogspot. My blog is now self-hosted on Wordpress and at this point I don’t know how much time I will put on Blogger. The below link still works and should have a lot of information for all blogger users.

You can get blogger templates there and some info on how to edit them.

Blogger templates

Many visitors find my site through Google when they are looking for wedding templates and as a gift for all the spring brides and grooms I created a wedding template you can use for free.

You can find the template here.

I had some trouble getting the fake frames for the original layout I had created for this site. I needed to change the layout and make it simpler to get the frames to work. Frames are created with div-tags as the basic tableless layout. I created 5 different classes for 5 div-tags to build up a basic layout. My stylesheet code for the layout looks like this :


#header{
position: fixed;
top: 0;
left: 0;
height: 30%;
width: 80%;
background: #FAFFFF;
}

#pagewidth{
position: fixed;
overflow: auto;

width: 80%;
height: 65%;
top: 35%;
left: 0;
padding: 0;
margin: 0;
}

#footer{
position: fixed;
width: 80%;
height: 5%;
}

#leftcol{
width: 30%;

position: relative;
float: left;
background-color: #D9D4B7;
margin: 0;
text-align: left;
}

#maincol{
width: 70%;
position: relative;
background-color: #FAFFFF;
margin: 0;
float: right;
text-align: left;
}
The header, pagewidth and footer classes creates the frames. I use the position property with the value fixed to position my frames on the page. For the frame that should have the scrollbar I added the overflow property with the auto value (the red part of the above code). You can find more information on the position property here and the overflow property here. The leftcol and maincol classes create a sidebar and a main content area for the posts in the pagewidth frame.

You’ll find an example of the frames in my test blog. I haven’t tested the frames in all possible browsers, so I guess there is probably one or two browsers around where this doesn’t work.

Header Header Header Header

Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth
Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth
Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth
Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth
Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth
Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth
Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth Pagewidth

Footer

You can’t really use normal frames in a blogger template since that would require more than one webpage. One page would consist of the frame layout, and the other pages the content. I guess there could be a way to do this in a template if you tweaked it enough, but I’m not that skilled as a code writer to be able to get it working without a lot of thought. I don’t really recommend the use of frames because implemented wrong they are more of an annoyance than a useful feature.

I guess there are really many workarounds when in comes to getting a blogger site look like it has frames, and my solution would be to create fake frames in CSS.

The layout I have used for this site isn’t very easy to frame so I have to do some work on it or change it completely. So before I show you how I fixed the header for my test site I will provide you with some links to tutorials with examples and ideas on how to create fake frames in CSS.

• CSS Frames
• Fixing position:fixed for Windows Internet Explorer
• Using CSS Positioning to Create Frame-like Pages
• Frames with css

I was asked if I take requests and I think that is a good idea. Now is your chance to ask for a tutorial and I will provide you with one… or at least show you where to find the answers if I can’t give one myself.

Leave a comment with your request, please!

What do you do when there is so much you want and have to do, but not enough hours in the day?

I want to write, paint, create art on my computer, photograph, read the blogs I’ve found and enjoyed, learn to program in PHP, and I have to work, create databases, learn to program in ASP, clean the house, keep in shape, cook, do the laundry, help my daughter with her homework, meet my friends and family, walk the dog, find a job for my daughters boyfriend, find all the stuff everyone else looses in this overcrowded house… the list just goes on and on…

If I would actually date, when would I find the time to do that?

I haven’t been posting in a while because I have been working on the design for my WordPress blog and at the same time I have been trying to learn some PHP. I haven’t coded anything in PHP before, since I’m not really a coder. A couple of years ago I owned a small web shop and did some tweaking on the perl script my shop was running on, but I have never really started a project of my own.

This time I have used some tutorials and scripts on how to generate images on the fly with PHP. I wanted to use some shadows and also a couple of special fonts on my post titles and for the category and link titles in the sidebar. I have used my own script based on a couple of good tutorials. The scripts create images out of my post titles and also create the shadows and the text for my header image. There might of course be some bugs, since this is my first script, and it’s not ready to be released yet. You can see the script at work here and if you want to create something similar you can check out the following tutorials:

• Image Manipulation /CodeDemons
• Generating Images on the Fly With PHP
• Dynamic Text Replacement
• Adding Drop Shadows with PHP
• Creating Dynamic Images with PHP
• Advanced Image Editing Under the GD Library

I will be posting more about how I created the script later.

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.