Thank you very much for your Easy Breeze template for Drupal.

> I would like to ask if and how I could change the height of the header
> (the black section containing the logo, etc.) and change it's color, as well as the color of the footer.

Comments

hswong3i’s picture

hswong3i CreditAttribution: hswong3i commented

You can define your custom setting within custom.css, in order to override the default layout. Please refer to README.txt for more idea. Here are some default setup within style.css. Please override them as you like :D

Height of header region (since footer region will not appear if nothing within it, so there is no height definition for that):

#wrapper #container #header {
  height: 150px;
  margin-bottom: 15px;
}

Color of header and footer region are defined within body tag as background (the white color main region is then "on top of" this background):

body {
  direction: ltr; /* LTR */
  color: #555;
  background: #191718;
  font-size: .8em;
  font-family: Verdana,'Lucida Grande', Verdana, Helvetica, sans-serif;
  font-weight: normal;
  line-height: 1.6em;
  text-align: left; /* LTR */
  margin: 0 auto;
  padding: 0;
}
hswong3i’s picture

hswong3i CreditAttribution: hswong3i commented
Component: Miscellaneous » User interface

P.S. If the information is useful enough, please set this issue as fixed :D

drupaloo-1’s picture

drupaloo-1 CreditAttribution: drupaloo-1 commented
Status: Active » Fixed

Thank you for your quick and helpful response!

drupaloo-1’s picture

drupaloo-1 CreditAttribution: drupaloo-1 commented
Status: Fixed » Postponed (maintainer needs more info)

Hi,
When I change the height setting to say 100 in:

#wrapper #container #header {
height: 150px;
margin-bottom: 15px;
}

The height of the actual header (the black region) does not change. Instead, the text on the body of the page is moved up and over the black header. Eg. the title of the top menu is now on top of the dark header region, instead of on white space.

drupaloo-1’s picture

drupaloo-1 CreditAttribution: drupaloo-1 commented

Hi,

I am new to theme modification so please excuse my probably simple newbie questions...

I saw that the black header has a background image - I replaced this with my own - a graphic that is less high - so now the header has a height I like.

However, the header text and logo remained in position, and since the header background is now less high, the header text and logo are now half over the header background image and half over the white space of the page.

In other words, the the header text and logo need to be moved up - could you please tell me how to do that?

Thank you!

hswong3i’s picture

hswong3i CreditAttribution: hswong3i commented

EasyBreeze share similar design and logic with Interactive Media, so please refer to http://drupal.org/node/269458 for more information ;-)

hswong3i’s picture

hswong3i CreditAttribution: hswong3i commented
Status: Postponed (maintainer needs more info) » Active
drupaloo-1’s picture

drupaloo-1 CreditAttribution: drupaloo-1 commented

Hi,

Thank you for your message.

You referred me to http://drupal.org/node/269458 for more information and it does not help me.

I have tried looking at the following terms in style.css:

height
slogan
logo

etc.

And there is no place I can see where I can raise the logo and slogan upwards.

I will try changing some values and see what happens....

drupaloo-1’s picture

drupaloo-1 CreditAttribution: drupaloo-1 commented

I have been able to move the logo image upwards by changing the value of 5px in the section below:

#wrapper #container #header #logo img {
float: left; /* LTR */
margin: 5px 10px 0 0; /* LTR */
}

Now I just need to figure out how to move the slogan upwards.

drupaloo-1’s picture

drupaloo-1 CreditAttribution: drupaloo-1 commented
Status: Active » Closed (fixed)

I found that changing the 3px value in the section below moves the slogan up and down:

#wrapper #container #header #slogan-floater {
float: left; /* LTR */
margin: 3px 0 0;
padding: 0;