trying to centre logo

[philpalmer]

I'm trying to centre my logo on the main page.

According to the tutorials here :

By default, the logo is left aligned. Changing the alignment involves making a modification to your includes/templates/CUSTOM/css/stylesheet.css. Open the file and find the following:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}
Since this is a collection of several “selectors” (#logo, .centerBoxContents, etc) and in order not to interfere with the layout of other sections, split this into two separate statements and create a new selector/definition below it, like this:


.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {float: left;}

#logo {float: left;}

To center the logo use text-align: center; or to align it to the right use float: right;



*** what does it mean text-align:center;
do I need to put this as well as the #logo bit.
I've tried messing about with style sheet and following the instructions but cannot get the logo to centre. Not sure where I put the text-align instruction

Thanks

Phil

[haredo]

Ph,
I could troubleshoot in the dark, but a link to the page is very helpful

[philpalmer]

doh! site is www.rosebarnnursery.co.uk (its still a work in progress!)

[clydejones]

This is from your stylesheet.css

#logo {text-align: center;}

}


This is from your stylesheet2.css

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

Since stylesheet2 is being loaded AFTER stylesheet the centering of your logo is being taken over by the float:left element.

[philpalmer]

aha. I put stylesheet2.css as a backup. I didn't realise it would load that too!

(stylesheet2 is the original stylesheet before I starting messing with it!)

[clydejones]

aha. I put stylesheet2.css as a backup. I didn't realise it would load that too!

(stylesheet2 is the original stylesheet before I starting messing with it!)

Keep it as a back up on your PC but delete it from your server.

NOTE: The CSS files are sent to the browser in this order: (and alphabetically within each case of more than one match):

[philpalmer]

thanks for your help!

[clydejones]

thanks for your help!

don't forget to modify your stylesheet.css to read as follows:

#logo, .centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg {
float: left;
}

#logo {
text-align: center;
}

delete the highlighted portion

[lisleuse]

Okay, I'm really frustrated with this and a couple more items I can't seem to get to work.

#1. I cannot get my logo/heading to center on the site http://lisleusedbooks.com
I have made the following changes to my stylesheet.css in my custom template css folder.

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg
{float: left;}

#logo {text-align: center;
}

However, my logo/heading is still aligned left. I made the following additional changes in an attempt to center the logo and remove the white in heading block.
#headerWrapper{
background-color: ##9B6733;
text-align: center;
width: 100%;
vertical-align: top;
}
#logoWrapper {
width:725px;
height:144px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position: center
background-color: #ECD8B3;
}

Still nothing moves.

What do I need to correct in order to get my heading in the center and the area behind the header to be a dark brown color.

#2. The centerboxheading background is a dark color, therefore, I would like the text to be either white or yellow but cannot find a place to correct it in the stylesheet.

#3. The "Welcome Guest" line is okay but would like to unbold the text and center it. Cannot locate a place to make these corrections either.

Can anyone explain what files and how to make the changes.

Thanks

[clydejones]

Okay, I'm really frustrated with this and a couple more items I can't seem to get to work.

#1. I cannot get my logo/heading to center on the site http://lisleusedbooks.com
I have made the following changes to my stylesheet.css in my custom template css folder.

.centerBoxContents, .specialsListBoxContents, .categoryListBoxContents, .centerBoxContentsAlsoPurch, .attribImg
{float: left;}

#logo {text-align: center;
}

However, my logo/heading is still aligned left. I made the following additional changes in an attempt to center the logo and remove the white in heading block.
#headerWrapper{
background-color: ##9B6733;
text-align: center;
width: 100%;
vertical-align: top;
}
#logoWrapper {
width:725px;
height:144px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position: center
background-color: #ECD8B3;
}

Still nothing moves.

What do I need to correct in order to get my heading in the center and the area behind the header to be a dark brown color.

#2. The centerboxheading background is a dark color, therefore, I would like the text to be either white or yellow but cannot find a place to correct it in the stylesheet.

#3. The "Welcome Guest" line is okay but would like to unbold the text and center it. Cannot locate a place to make these corrections either.

Can anyone explain what files and how to make the changes.

Thanks

that because your logoWrapper is the same width as the image. and your missing the ; at the end of background-position center


Try this instead

#logoWrapper {
width:100%;
height:144px;
background-image:url(../images/header_bg.jpg);
background-repeat:no-repeat;
background-position: 50 50;
background-color: #ECD8B3;
}