By drupalgurl on

I've been trying for *hours* to get the Title (or Site Name if you will) and the "Slogan" to be on separate lines *below* the logo - I've tried inserting a
unsuccessfully in the page.tpl.php. I can't seem to do it. I want to use a different larger logo.png.

I do know about the tutorial for modifying garland using psp, but if someone can please help me out with moving these things down I think I'll be set.

Thank you.

⋅ Categories: Drupal 5.x

Comments

tdimg’s picture

tdimg commented

It is possible but Garland's theme is built so that it looks good in the default setting. Grab yourself Firefox and the Firebug extension, then you are able to change the CSS on the fly (well, you won't be able to save it then but you see the results of changes live).

What you have to do, with or without Firebug:

1. The logo is floated to the left, take this out and display it as a block (style.css line 335):

#wrapper #container #header h1 img {
display:block;
padding-right:20px;
padding-top:16px;
}

2. The way Garland is built, the title and the slogan seem to disappear now behind the content. The problem is, the header is limited to an 80px height. So, you'll have to take the height out of the header (style.css line 316):

#wrapper #container #header {
}

I'm not too familiar with customising the Garland theme, so I might overlook something here and there is indeed a better solution, but that's what I came up after a few minutes of trial and error.

I also didn't check this with IE or any other browser except for Firefox because I actually did this with Firebug on a Drupal site that is using the default Garland theme (so, I didn't use my site either).

drupalgurl’s picture

drupalgurl commented

I'm very grateful for your explanation. I'll try, and if it's no good - I'll switch to Zen and edit it. I like so much about Garland.. but I did want a custom logo/banner effect. Thank you!

drupalgurl’s picture

drupalgurl commented

If you visit www.wii wii workout . com you can see that I made progress. Thanks again. I've added a "Slogan" back in, but it remains on the same line as the "Name" - and both are fairly long (which is why I had initially removed it). Can the Slogan also drop to another line?

drupalgurl

tdimg’s picture

tdimg commented

Check out style.css line 332 for and add:

#wrapper #container #header h1 span {
  font-weight:bold; /*not really needed though, you might want to delete this*/
  display:block;
}

But there is also a setting that really shouldn't be as it is in line 325:

#wrapper #container #header h1, #wrapper #container #header h1 a:link, #wrapper #container #header h1 a:visited {style.css (line 325)
line-height:120px;
white-space:nowrap;
}

You definitely have to change line-height to 1.5 (no unit!). white-space is a little tricky: if you keep it, you'll see that if you reduce the window that your text will continue in the same line and thus scrollbars on the bottom appear, not really nice. But if you delete it, the text continues in the next line, basically going right over the other content.

Garland is a really nice theme but it seems it is a little bit limited in its flexibility/customisability.

drupalgurl’s picture

drupalgurl commented

Thanks again c2uk! That did work. I also had to add padding-top:5px; just below the line 326 - because the "y" in the word Try was being cut off - looking like a "v". I thought it was a typo, but when I checked, it was not.

You've allowed me to make the changes I had hoped to do. But I must admit, I will have to go study more on my CSS because this theme is making me a bit dizzy as to what's what (what css line refers to which part of the page).

Again, thank you.

tdimg’s picture

tdimg commented

And as I said earlier, grab yourself Firefox and the Firebug extension that you can get at http://www.getfirebug.com/

Just a short intro:

Once installed, press F12 to open the Firebug panel at the bottom of the page, click then on Inspect at the top right of the panel. You should now be able to use your mouse to select certain elements on the page itself, as indicated by a border appearing around those elements that you are hovering, one left mouse-click to select it. In the Firebug panel, the html code of this element should now be selected on the left hand side, and on the right hand side should be the css code. You can now change values without a problem to see the effects live - it's not possible to save these new settings, whenever you refresh your page you'll lose them. So you still have to remember what you're doing and change it properly in your preferred css editor.

For more info read the documentation on getfirebug.com and watch the videos!

SuperRookie’s picture

SuperRookie commented

Does anyone know how to do this in drupal 6? I have a custom logo that is being cut off by some form of Garland styling. It appears fine in all browsers except IE (big surprise). The problem is that Garlands little overlapping box cuts off the logo in IE. I tried adjusting the base.png file, and it just replaced the white overlap with the background color of the header, while still cutting off the same amount of space. Does anyone know how to fix this?

Please visit www.swinefluretinalscan.com/enter/ in Internet Explorer to see the issue.

paul o brien’s picture

paul o brien commented

cut off of bottom of banner image in IE only. with the other browser in Windows and Mac the banner floats over the box below.

any fix?

paul