trying to centre logo

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

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

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

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.

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!)

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!)

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):

thanks for your help!

philpalmer:

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

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.:lookaroun

Thanks

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.:lookaroun

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;
}

lisleuse:

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

#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.

Thanks

delete the highlighted (the , )portion of the following declaration in your stylesheet.

.centerBoxHeading, {
font-size: 1em;
color: #ffffff;
}