By super squirrel on

Hi,

I am trying to change the abessive theme to display my logo in the centre. I have managed to increase the depth of the header for the imaage, so thats sorted, but I can't get the image to display right.

I think I am supposed to use the following:

display:block;
margin-left:auto;
margin-right:auto;

but can't figure out where to put it. My CSS skills are not that great at the moment, I am trying to improve them, but this has really got my stumped. I'm sure it's a bit obvious.

I'm a little worried that I may have to make changes in more than just the style.css, which is why I am askign for help.

Thanks in advance.
Gavin.

⋅ Categories: Drupal 6.x

Comments

super squirrel’s picture

super squirrel commented

Well, I have kind of got round it by setting my site to a fixed width theme and widening my logo with trasnpartent background.

Not the ideal solution, but it's workign for now. If anyone can tell me how to get the logo centered so I can go back to a fluid theme, I really would appreciate it.

vm’s picture

vm commented

a link to the site would help a great deal so that we can inspect the elements with firebug and post something for you that is specific rather than guess work.

super squirrel’s picture

super squirrel commented

lol, Of course. Sorry, I should of thought of that.

http://www.torgaming.co.uk

Sorry about that.

Cheers for the help.

vm’s picture

vm commented

I do not see a logo or a div for a logo anywhere on the site you linked to.

some helop = http://www.w3schools.com/css/css_background.asp
if pulling the image into the div as a backfground image. If pulling it in in a different way, use text-align: center;

super squirrel’s picture

super squirrel commented

sorry, I must have removed it earlier. I have put the image back now. I am loading the image via the 'Upload logo image: ' on the theme configuration page, so I have no idea if it's as a background image for a div or some other way.

as you can see, it's sitting to the left. the reason it's nto all the way tot he eft is that is has a transparent layer around it to push it right, just not got the pxel values right yet.

But would prefer to do this via CSS if possible.

super squirrel’s picture

super squirrel commented

Bump,

Please, can someone look at this and please help me out?

vm’s picture

vm commented

The logo is centered in its div

<div class="content">
        <!-- Header -->
        <div id="logo-floater">
        <h1><a title="" href="/"><img id="logo" alt="" src="/sites/default/ds/abessive_logo.png"/><span/></a></h1>        </div>

                                                    
              </div>

content takes up the entire div and the logo div is nested. If I try and center the image in the content div all your content gets centered. I don't have this theme installed any where to continue to manipulate it, but this should give you something to go on. Alternatively you can file a support request in the issue queue of the theme in question.

super squirrel’s picture

super squirrel commented

Ok, thanks for your help. I appreciate it.

I have managed to get thelogo centered by increasing the image size with a transparant layer, but it was screwing my invoices up in Ubercart

But I have just found on the ubercart site a way to hard code the invoice logo to be different to the site logo.

Not elegant, but it will work. Will just need to keep a note of the changes done for when I have to upgrade the ubercart module.

Once again, thanks for your help.

Mike H-1’s picture

Mike H-1 commented 
<div class="content">
        <!-- Header -->

        <div id="logo-floater">
          <div class="header">
        <a title="" href="/"><img id="logo" alt="" src="/sites/default/ds/abessive_logo.png" /></a>
          </div>
        </div>     
          
              </div>

try doing this to the CSS

.header {
width: /* width of image */;
margin: 0 auto;
}

I added the DIV with the class of 'header' in your HTML and don't forget the Semi-Colon for the width variable :)

neeraj.cms’s picture

neeraj.cms commented

Hi

Please make these changes to your stylesheet to get your logo center aligned.

#logo-floater
{
position:absolute;
}

Please remove position:absolute; from this class and add text-align:center; for e.g.

#logo-floater
{
text-align:center;
}

and

#logo-floater img
{
float:left;
padding:10px 15px 0 10px;
width:100px;
}

Please remove float:left; from the above class.

Also we suggest that you let the logo remain in its actual size

Regards
Neeraj