By dibbd on

If you look at my site http://dibbsolutions.com real quick, you'll see that the logo is swished in with the page text.

I'm using the Chrysalis theme if that matters.

How do you change the size of where your custom logo fits so that the rest of the page looks good.

Hope I explained it well, but if you look at the site you'll see what I mean.

⋅ Categories: Drupal 6.x

Comments

hhkont’s picture

hhkont commented

I would resize the logo before bringing it into Drupal. AFAIK, Drupal will just use the original size.

hhkont’s picture

hhkont commented

I see you're using the default logo. Grab the logo from anywhere (the top of this page, for instance). Resize it any image editing tool, then in your Theme configuration screen, you can override your default logo. It's a funny place to put it, in your Theme config. I would look for it logically in Site Information.

dibbd’s picture

dibbd commented

I'm not using the default logo, unless we're not talking about the same thing. Can't you see my little "Dibb Solutions" logo in the top-left of my page? What are you referring to? (I've been using Drupal for a while but still feel like a noob...)

As far as resizing it, what if I want it not to be the small little default size of the Drupal logo? How can I make it bigger, taller, or wider and still look good?

Thanks!

shadcn’s picture

shadcn commented

why not change line 159 in style.css to 

#site-name {
color:#FFFFFF;
font-size:3em;
left:3em;
margin:0;
position:absolute;
top:0.3em;
}

or you can use 

#header #logo img{
width : XXpx;
height : XXpx;
}
dibbd’s picture

dibbd commented

Thanks Arshad! Changing the value:

left:3em;

did the trick. Would you mind a simple explanation of what that did?

And what would the alternative choice you suggestion done different?

Again, thanks so much, looks MUCH better now!

shadcn’s picture

shadcn commented

when you use position : absolute and left:3em in the css, you are telling the browser to render the logo 3em to the left from the absolute. this way your logo is indent 3eme from the left and if you use top : Xem it will place the logo Xem from the top. basically it's like coordinates (left,top) but you can also specify right and bottom. em is a unit of measurement (http://en.wikipedia.org/wiki/Em_%28typography%29)

The second option is to resize the image itself. we are telling the browser to render the image with width Xpx and height Xpx. we reference the image in the css using the img tag,

thanks ;)

dibbd’s picture

dibbd commented

One more question (hopefully).

So how'd you know that 3em would do the trick? Was it a "lucky" guess based on what the existing em was, or is there some kind of formula you used?

Thanks again for the help!

shadcn’s picture

shadcn commented

you sent the url. i used firebug addon on firefox to inspect the site and tried the css i sent you.

https://addons.mozilla.org/en-US/firefox/addon/1843

daredoyle’s picture

daredoyle commented

if you look at my site http://cdnetng.org quickly, you will see just the logo in the left corner and the name that is not really visible. i want the name to be visible and to be just in front of the logo..

how do you put the name of the site in the space just in front of the logo.

daredoyle’s picture

daredoyle commented

if you look at my site http://cdnetng.org quickly, you will see just the logo in the left corner and the name that is not really visible. i want the name to be visible and to be just in front of the logo..

how do you put the name of the site in the space just in front of the logo.