Friday, April 22, 2005

[Blogger] Template tweaking

This blog is a gorgeous example of tweaking a standard Blogger template and turning it into something unique and great looking. Those of you with skills to do this, will you enlighten the rest of us and share how you do it?

9 comments:

Sam said...

Oh Amy. Do I really have to admit how sad and pathetic my life is sometimes, in ppublic. If you vire the source for this page, you will see lots of comments which were added by me to the template, things like
/* this is a verticle strip of colour which forms the BG colour of dark pink, fading down to sightly darker pink */
and
/*very darky reddish brown maroon horizontal rectangle with stright top and rounded edge bottom, guess used for title bar */
and
/* dark reddish brown maroon verticle rectangle, very thin colour is the hexadecimal value*/

When I had my original blogger template I literally when through the code line by line trying to work out what it did.
I experimented with replacing hexcidecimal colours.
I loaded up jpegs and replaced the gifs to get rhe header, footer and faded bg.

I still really don't understand half of what I did. There are things I would like to change further but I am short on the time to sit down and work it all out.

I would love to be able to work out how to have a column left and right so I can have blogroll on one side and indexes on the other.

So I don't really have a clear answer for you except that it required patience, perseverence, a lot of testing and frustration but eventually I came up with something I was at least half happy with.

Sam said...

hmm - undecipherable typo. vire = a sam verb meaning "to view"

and when = went

Owen said...

Sam - is it this blog or your main one that you want three columns in? I think I can show you how to do it. On the other hand I can't make it look nice!...do you want sidebars that resize or that remain fixed if you change the window?

Amy Sherman said...

Wow! If that's trial and error I am impressed! It really looks good...I would love to be able to create a logo and use it instead of the blogger "title" but not sure how to do that.

ejm said...

To add an image to your title area, go into your template and find

#blog-title {

in the style section. Add the following:

#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif);


Make sure that if your blog is hosted by blogger that your web server allows hotlinking of images. You can usually ask your webserver to allow your blog to hotlink your images....

If you want the image to appear only once in the blog title, then here is the coding that will place the image in the top left of the title area:

#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif)
no-repeat top left;


If you would like the image to run along the top only:

#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif)
repeat-x top;


If you would like the image to run along the left side only:

#blog-title {
background:transparent url(http://yourserver/locationofyourbackgroundimage.gif)
repeat-y left;


At least I think this is correct....

This site may be quite useful:
www.w3schools.com/css/

Rachael said...

Amy-
You and I use the same template, I just changed the colors a bit...I don't know how to do much else in terms of code, but that I figured out. You can change any color to another using PMS Color number, found here:

http://www.flagdist.com/PMS%20Color%20Chart.htm

Wherever is says color:#008800 in your template, you can change that number and it changes the color.

That's all I know how to do, but I thought I would share.

Cate said...

I'm all about the tweaking of blogs, and still working on mine. How do you change the text size and font of the Blog title?

ejm said...

To change the text-size and font in the Blog title, go into your blogger template style area and look for

#blog-title

The font-size is changed with font-size I like to use percentages for font-sizes but lots of people prefer to be more specific and use em

This is what is in my blogger stylesheet (Minima)

font-size:200%;
line-height:1.2em;
font-weight:normal;
text-transform:uppercase;
letter-spacing:.2em;

The font-family is specified elsewhere but if I wanted to have a different font for the title - say to look like fancy handwriting, I would add

font-family: Vivaldi, 'Zapf Chancery', 'Brush Script MT', cursive;

and I'd probably change it to bold:

font-weight: bold;

Note that there are a few options on the font-family there. This is for browsers that don't have my first choice of Vivaldi font installed. They might have my second choice of 'Zapf Chancery', or my third choice 'Brush Script MT'. And those that have none of those will still see whatever cursive font is set on their browser. It's always a good idea to add the generic name at the end of font choices....

This is a useful page:
http://www.codestyle.org/css/font-family/index.shtml

ejm said...

Sweetnicks, I just looked at your blog and see you are using Thisaway (Rose)

In your stylesheet area, look for:

#blog-header

If you want to use two different fonts for the title and the description of the blog in the header, look for:

#blog-header p

and put the font-family you want to use there.

Hope that helps!