Newbie Help :P With CSS and Homepage Customisation

[gjh42]

/includes/templates/your_template/common/tpl_header.php handles the output of the logo which is defined in header.php. It is a foreground image. Adding a background image will give you two logos.

The default stylesheet has references to #logo, but mostly grouped with other items. You can specify position, margins, padding etc. for #logo and #logoWrapper; just don't try to use bg and fg images at the same time.

The definitions in header.php specify the filename and area reserved for the logo. You should set them to the actual dimensions of the logo image you are using. A discrepancy can sometimes cause errors in the display.

[arnold931]

Thanks. I understand what you mean about the image size.
I thought I could add a #logo{background-position:left;} to my stylesheet to shift the logo to the left, but it didn't do anything.

[gjh42]

You may need to style #logoWrapper instead of or in addition to #logo - that depends on your specific layout.

{background-position:left;} will only affect the starting place of the background within the logo, it won't affect the location of the logo.

You can use margin, padding and float or text-align, and position: absolute or relative to locate the logo and wrapper.

[arnold931]

Thanks.
I am going to go learn CSS and come back and try this again.

[dbltoe]

You may want to get a copy of something like TopStyle Lite. Might be a good start on your way to conquering CSS. Firebug with firefox is invaluable as well.