Using a Larger Logo with Garland theme?
NapkinSketch - January 14, 2007 - 17:58
I have been playing around with the Garland theme and uploaded a new logo that is aprox 150x140px, obviously it overhangs what I call the header section. I have messed with the style.css and anything else I would think to change and nothing seems to get it right. How would I go about editing this to allow a logo with a larger height? Thanks!
A feature I would like to learn about as well
I too would be very interested in an easy solution to this problem. Possibly as a feature in Garland that you can choose between various options for the header block, either a small icon (left) and text on the right, or one major graphical header.
I have been able to move the
I have been able to move the center down, by editing this in style.css in /themes/garland. But can not find how to get the sidebar block color area to move down.
#wrapper #container #header {
height: 120px; /* was 80 */
Anyone?
Can see what I currently mean at.
http://dev.firstlutheranfergusfalls.org
If you figure it out please post it!
Move sidebar down
Just figured this out myself. What I did was edit the image file - body.png to do this.
Extend the png file by 40px (or however long you are extending the header) at the top of the image - which will now be behind the logo file.
Ahhhh.
OK, will have to play with that.
Thanks for the update. I ended up moving the text UP by doing this so far.
Different look as well.
/* We ensure the sidebars are still clickable using z-index */
#wrapper #container .sidebar {
margin: 10px 0 5em; /* moves the text part 10 was 60*/
I have been able to move the
Nutty,
Same problem... I did the same also changed
#wrapper #container #header {
height: 120px; /* was 80 */
I have been systematically going through the style.css and changing parameters, refreshing, to no avail....
Here is what I have so far-
http://corneveaux.com/
Theres gotta be a way to make that top part of the header transparent, or at least the not grab its color from the gradient above??!?
Larger Logo and z-index
I placed a larger logo in the header with the Garland theme. It looked great with Firefox. It is a png file with transparent regions, so IE 6 trashed it. I upgraded IE to 7, and it renders the (OK hang on I'm getting to the fix...) transparent regions properly now. But, where Firefox rendered the logo floating OVER the background edges and looked nice, IE 7 rendered the logo behind the header edges :( . Well, I looked in Garland's style.css and played around with the z-index. So, setting the z-index to 10 in "#wrapper #container #header #logo-floater" (line 320) made IE render the logo floating over the other images. This might fix your issue, if the logo image is not too large.
Worked for Me - So Far - With Large Logo
Hi Jamesh - Thanks for the tip. I'd been trying to use the Garland theme without any code fixes. My reasoning was that every little fix would have to be redone when there's an upgrade. + I wanted to learn how to use the very flexible Garland theme by using all the built in functionality of Drupal 5 and the theme so that I could use it for a number of sights. But (sigh) the site I am working on looks great in Firefox but the lack of center container transparency became a problem in IE. Many thanks for your fix. See what I'm talking about at http://www.ichartis.org
Looking good.
Very nice tip. Thanks.
You can see the change at www.petswelcome.co.nz
--
Cheers,
Thong
Tip: http://drupal.org/forum-posting
Website: http://www.edoodle.co.nz
This solved it for me. For
This solved it for me. For someone else that may have a little more difficulty here are instructions:
On line 320 of Garland's css sheet you will see:
#wrapper #container #header #logo-floater
Underneath you will see:
position: absolute;
What you want to do is add this line right underneath "position: absolute;"
z-index: 10;
That is it. Make sure you check with different browsers to ensure your site works with all browsers.
Though this solves the
Though this solves the issue, it makes the the breacrumb unclickable or behave funny.
Does anyone else know of a clean solution? It's weird to find this on Drupal's default theme.
--
Duplika | Hosting Argentina
Tnx! Whit the logo-tool i've
Tnx! Whit the logo-tool i've now a banner-like system ...
squeezing a little more space out
apologies for resurrecting an old thread, but I only needed an extra 5-10 px or so for my logo and I was (apparently, so far) successful in keeping the look intact and getting this space by changing the padding in the style.css file:
original:
#wrapper #container #header h1 img {
padding-top: 16px;
padding-right: 20px; /* LTR */
float: left; /* LTR */
new:
#wrapper #container #header h1 img {
padding-top: 11px;
padding-right: 20px; /* LTR */
float: left; /* LTR */