Based on some other posts I've been trying to change the color.inc, layout.css, and style.css in order to accommodate a logo of size 650x150. I haven't had any luck getting this right and I'm sure I'm changing some things that I shouldn't and missing others that I should modify.

Can you list the the elements that must be changed when using a larger logo image and at what point the theme must be re-saved? I have no problem with resizing the header images from 120px to 150 px high.

CommentFileSizeAuthor
#20 logo_screen_shot.jpg494.64 KBNathanFrankel
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

baladur’s picture

For the height open layout.css and look for:

/*-------------------------------------------------------------------*/
/* Header */
/*-------------------------------------------------------------------*/
#header {
margin: 0 0 15px 0;
padding: 0;
height: 150px; <-------------------------------------------------
}
#logo {
margin: 0 10px 0 0;
padding: 0;
height: 150px; <---------------------------------------------------
float: left;
overflow: hidden;
}
#head-elements {
height: 150px; <---------------------------------------------------
margin: 0 0 0 15px;
padding: 0;

For the width open layout.css and look for

/*-------------------------------------------------------------------*/
/* Page */
/*-------------------------------------------------------------------*/
#page {
margin: 0 auto;
padding: 0px;
max-width: 1600px;
min-width: 650px; <---------------------------------------------------------------------

I hope it helps

iMinnesotan’s picture

Awesome, thank you for the response!

xander85’s picture

I'm also trying to change my header size and I'm running into the same issues with the black bar behind the superfish menu not moving. I tried removing "url("images/bg-header.png") repeat-x left top;" from style.css, removing the array line from color.inc and i can't seem to get the bar to move or go away. I'm new to drupal and I'm probably missing something easy but I need to get this changed ASAP for a new website.

I'd like to move the whole menu down to say 250px height. I'd like to retain the black bar but I suppose it is not critical. Thanks!

xander85’s picture

Bump

EdCazini’s picture

Hi,

I think this is what's needed to be done...

  • in layout.css
    • <div id="header"> --> height = desired-height
    • <div id="head-elements"> --> height = desired-height minus height of bg-menu.png
  • height of bg-header.png = desired-height
  • height of header.png = desired-height minus height of bg-menu.png
  • in color.inc lines 67-68
    • 'images/header.png' => array( 0, 0, 512, desired-height minus height of bg-menu.png),
    • 'images/bg-header.png' => array(792, 0, 8, desired-height),

The above would let you increase the header height, and therefore would accommodate a larger logo.
Hope this helps. Cheers.

Jeff Burnz’s picture

Status: Active » Fixed

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

xander85’s picture

Hi,

I need to reopen this issue:

I was finally able to display a bigger logo, but I can't get everything to show up correctly. I changed bg-header.png to a height of 232px and header.png to a height of 200px. (My logo is 200px high). However, everything didn't move down and superfish black bar covers my logo. Please help!

My website is live at:
http://www.carrollbrittoncosmetics.com/

I changed all the values above to get where I am now. Also, I changed:

xander85’s picture

Status: Closed (fixed) » Active
Jeff Burnz’s picture

You cant just arbitrarily change the color inc coordinates as the base.png image will only support a header background of the hight of the original, what these other users are doing is replacing the background image with their own. #5 assumes you are modifying the base.png image to support such a change.

xander85’s picture

So to do this requires quite a bit more work then originally thought? Or can I just open base.png in something like Photoshop and make the header larger?

Does anything else, as far as css is concerned, need to be done or have I made all the right changes?

I really need to be able to accomadate a larger logo for my site.

Thanks for the help!

xander85’s picture

So, I was able to get the logo to fit after modifying base.png and almost everything works correctly. However, block-tl.png isn't showing up correctly. There is a black line on at the top and it isn't rounded. A screenshot of the issue is available here:

http://www.carrollbrittoncosmetics.com/images/screenshot.jpg

I have a feeling it is some small css options with coordinates or something, but I'm not familiar with it enough to figure it out. I've spent quite a bit of time without any luck already.

Thanks!

xander85’s picture

Bump ^

Jeff Burnz’s picture

Please do not bump issues, we are here, we see things, but not everyone has time to jump immediately to help you.

Do you not realize that bumps are THE most annoying thing to a maintainer? We get emailed every time someone posts in one of our issue queues, so the last thing I want are pointless "bump" emails!

Sorry, but bumps simply make me less inclined to offer support, not more.

xander85’s picture

jmburnz,

I'm very sorry. I'm new to this and just learned my lesson the hard way. Sorry for the hassle.

Any help would be very greatly appreciated.

Sorry again.

xander85’s picture

jmburnz,

Sorry for bumping last time. Are you willing to help me with this issue still? I really need to finish the site in the next few days and this is the only issue that is still lingering. I've spent hours looking through the code and trying to make changes to fix this, but I have a feeling it is relatively easy and I'm just missing it.

Thanks for your help!

Jeff Burnz’s picture

I'm afraid that if you want my help you will need to hire my company to do this. I can spare time to help users with bugs and issues and minor CSS from time to time but at the moment due to work commitments I just don't have time to work through this with you.

xander85’s picture

Any idea on cost? Thanks.

Jeff Burnz’s picture

Please send me an email directly using my contact form describing what you want to achieve, if have the site online send me a link also.

From what I can tell its less than a few hours work so probably under 100USD, probably much less.

NathanFrankel’s picture

FileSize
494.64 KB

I'm trying to add a larger logo as well, trying a different approach. This issue has been tackled in a few posts, but I don't seem to see all the pieces I need to put this together.

I'm trying to add a banner (which includes a logo) with height of 150px. I increased the height of head elements in layout.css to 120px (from 88px). I then edited the bg-header.png file in photoshop (I know this isn't advised, but I just extended the height to 150px and painted over the color gradient portion on top with white to just leave the black bar at the bottom so it still shows up for superfish menu).

I seem to have things sorted out with respect to height, but the width is now the challenge. I added the image in the branding section of page.tpl.php thinking the edges of the banner would be cut off by the content edges on both side, not extend past them like you can see on the right side of the screen. My thinking is that if I can make the banner wide enough so it will fill the screen on any resolution, then make the edges of banner get cut off by content edges, with banner centered I should be good to go.

It would be easier if I could just drop a transparent logo over the standard header-elements section, but the 120px height of the auto-generated head-elements sections is a bit too short for our preferences, so I'm trying another fix.

Thanks for any feedback...

tejbir’s picture

I am also a strangler like you people trying to put a bigger logo. What ever other have said i had also tried but not able to move the black strip. The catch for it is in base.png file. It is from this file it pick all the color shading patterns. When I played with it, cutting the black bar in it and moving downward, then in the theme section it also happen. If you change here a colour pattern then that will also get reflected in the theme section. so base.png is the catch.

http://drupal.org/node/287911
http://drupal.org/node/108459
study above articles for detail.

i will also study.

molave’s picture

As of January 2011, and version 7.x-1.0-beta2, the name of the file has changed

from layout.css

to pr.css

but the location and the selectors are still the same.

Just thought this might unconfuse someone new, as things change so fast here. =)