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 » Tue Aug 30, 2005 3:20 am

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 » Tue Aug 30, 2005 10:04 am

edit the index.tpl of your theme.
Marc

User avatar
wesley
Regular
Posts: 197
Joined: Sun Jul 10, 2005 11:15 am
Contact:

Post by wesley » Tue Aug 30, 2005 4:02 pm

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 » Tue Aug 30, 2005 4:38 pm

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

User avatar
wesley
Regular
Posts: 197
Joined: Sun Jul 10, 2005 11:15 am
Contact:

Post by wesley » Wed Aug 31, 2005 5:40 am

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 » Wed Aug 31, 2005 6:06 am

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