Adding image to the header

Skinning and designing Serendipity (CSS, HTML, Smarty)
Post Reply
DortoH
Regular
Posts: 82
Joined: Fri Feb 25, 2005 2:00 am

Adding image to the header

Post by DortoH »

How can I add an Image to the header? I am using the default theme to which I have modified the colors. Where/how would i specify an image to go alongside the Title and Description headline.

Running v0.8.3
Rod
Col. Kurtz
Regular
Posts: 450
Joined: Thu May 26, 2005 10:43 am
Location: Bonn, Germany
Contact:

Post by Col. Kurtz »

edit the index.tpl of your theme.
Marc
wesley
Regular
Posts: 197
Joined: Sun Jul 10, 2005 11:15 am
Contact:

Post by wesley »

Actually, depending on how complex it's gonna be, this could be done
without editing index.tpl. My blog's theme (Toolbox) has the image next to
the Title/Description and this was done purely with style.css file. I have
maintained the theme since 0.8.2.
I make s9y plugins, too.
My s9y blog depends on them. :)
DortoH
Regular
Posts: 82
Joined: Fri Feb 25, 2005 2:00 am

Post by DortoH »

Both sound easy enough however I really know very little about coding. Could either of you be a little more specific? I'd appreciate it :)

wesley, I looked at your page and that is exactly what I'd like to do.
Rod
wesley
Regular
Posts: 197
Joined: Sun Jul 10, 2005 11:15 am
Contact:

Post by wesley »

Look in the style.css file, find #serendipity_banner and add something
like this within the parentheses:
background-repeat: no-repeat;
background-color: #1A95DB;
background-image: url({TEMPLATE_PATH}img/image.png);
Obviously the image.png is the file you want to put and it's residing under
the img folder beneath the template's main path. If you need to put the
image on the right side instead of left, try adding
background-position: bottom right;
You may need to push the Title/Description to the right of the image.
To do this, find '#serendipity_banner h1' and '#serendipity_banner h2'
and add or modify this:
padding-left: 65px;
Set the number as needed.

BTW, you could start creating your own theme separate from the default
one by creating a new folder, copying the style.css and info.txt there,
and edit as appropriate. Of course, you'll want preview.png made later.
This will essentially be the bare-bones basis to start a new theme.
I make s9y plugins, too.
My s9y blog depends on them. :)
DortoH
Regular
Posts: 82
Joined: Fri Feb 25, 2005 2:00 am

Post by DortoH »

Awesome! I had my own theme but the 0.7.1 to 0.8.3 upgrade killed it. I am working on a new one and this is exactly what I was looking for!
Rod
Post Reply