Advertisement:

Author Topic: How do I increase the header height?  (Read 10094 times)

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
How do I increase the header height?
« on: April 22, 2010, 05:52:18 PM »
Where in the css do I go to increase the default theme header height?

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,844
  • Master of BBC Abuse
Re: How do I increase the header height?
« Reply #1 on: April 22, 2010, 06:04:50 PM »
That's one image (main_block.png). You can't increase that area's height just by changing the css. You have to alter the background image as well.
There's a psd available here: http://www.simplemachines.org/community/index.php?topic=347195.0

It's one of the zips attached to that post.

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #2 on: April 22, 2010, 06:21:09 PM »
Which folder is main_block.png in as I am not seeing it in /Themes/default/images

Offline adbrad

  • Sophist Member
  • *****
  • Posts: 1,138
Re: How do I increase the header height?
« Reply #3 on: April 22, 2010, 06:22:26 PM »
 /Themes/default/images/theme

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #4 on: April 22, 2010, 06:24:18 PM »
Thanks, just saw it too  8)

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #5 on: April 22, 2010, 06:32:22 PM »
I am not sure how to modify this:
It looks tricky

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #6 on: April 22, 2010, 06:38:01 PM »
I just want to increase the height where the Forum Tittle is at the top to let it match the
height of a header image that I want to add.

Here is how it looks now: http://forum.fashionsjamaica.com

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,844
  • Master of BBC Abuse
Re: How do I increase the header height?
« Reply #7 on: April 22, 2010, 06:49:00 PM »
Damn. You get me the number of that girl in the red dress and I'll tell you how to fix your theme. ;D

Offline Yahmez

  • Sr. Member
  • ****
  • Posts: 798
  • -_-
Re: How do I increase the header height?
« Reply #8 on: April 22, 2010, 10:26:27 PM »
Damn. You get me the number of that girl in the red dress and I'll tell you how to fix your theme. ;D

 ;D that was funny Antechinus.
Its a royal pain to stretch the header compared to 1.1.X

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,844
  • Master of BBC Abuse
Re: How do I increase the header height?
« Reply #9 on: April 22, 2010, 10:33:56 PM »
Well hey, she's seriously licious. ;)

Ok Utech22, you need to know how to work with image layers. That file is actually a psd and Fireworks may not pick up all the layer styles properly. It doesn't seem to be showing the guides either. Would be better if you had access to Photoshop but you could do the job in Fireworks if you know how to work it.

Basically what you need to do is shift that blue layer further down, but it was made to match the background layer so you may have to play with that too to get it looking really slick. How much do you know about image editing?

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #10 on: April 22, 2010, 10:59:14 PM »
Its a png

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,844
  • Master of BBC Abuse
Re: How do I increase the header height?
« Reply #11 on: April 22, 2010, 11:04:02 PM »
Well that's why I linked you to the psd. ;)

There's a psd available here: http://www.simplemachines.org/community/index.php?topic=347195.0

It's one of the zips attached to that post.

Specifically, it's this zip: http://www.simplemachines.org/community/index.php?action=dlattach;topic=347195.0;attach=125872

That has all the layers, styles and guides included. Working off the basic png out of the theme folder would be much more difficult.

Offline Yahmez

  • Sr. Member
  • ****
  • Posts: 798
  • -_-
Re: How do I increase the header height?
« Reply #12 on: April 22, 2010, 11:21:05 PM »
Gimp can handle psd files...

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #13 on: April 22, 2010, 11:36:11 PM »
Well that's why I linked you to the psd. ;)

There's a psd available here: http://www.simplemachines.org/community/index.php?topic=347195.0

It's one of the zips attached to that post.

Specifically, it's this zip: http://www.simplemachines.org/community/index.php?action=dlattach;topic=347195.0;attach=125872

That has all the layers, styles and guides included. Working off the basic png out of the theme folder would be much more difficult.

lol. I don't know where to start. I d/l the file. I want the header height to be 150px;

I have photoshop.

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,844
  • Master of BBC Abuse
Re: How do I increase the header height?
« Reply #14 on: April 23, 2010, 03:56:07 PM »
Gimp can handle psd files...
Not very well. :)

Ok Utech, the simplest way of doing this if you don't know much about handling psd's is to just switch off the header_blue_lower layer before going to "Save for web and devices". Save as png-8 with 108 colours and 97% dither.

Now on the other hand, if you still want the extra blue bit to show over the light blue background gradient you will have to play around a bit to get it looking how you want it. Start by moving the header_blue_lower layer down so that its top is 150 px from the top of the header section. Turn off the header_blue_upper layer. Then make a rounded rectangle of the appropriate height (corner radius 6px) in #c9d7e7 and using a black to white gradient on a layer mask to get the fade to transparent effect. Get it looking how you want then save as before.

Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #15 on: April 23, 2010, 06:38:10 PM »
Any1 can modify the height of the header to 150px and send the file to me..

Offline sAce

  • SMF Friend
  • SMF Hero
  • *
  • Posts: 2,992
    • @sbplus_t on Twitter
    • SB+
Re: How do I increase the header height?
« Reply #16 on: April 24, 2010, 01:45:16 AM »
Any1 can modify the height of the header to 150px and send the file to me..

use this if you like http://soumik-ace.com/index.php?action=downloads;sa=view;down=12

Offline fiver

  • Jr. Member
  • **
  • Posts: 319
Re: How do I increase the header height?
« Reply #17 on: April 25, 2010, 02:16:50 AM »
Hi Utech22,


U can use mine but it's 120px. I got blue, green and red: www.fivearts.net


 ;)




Offline Utech22

  • Jr. Member
  • **
  • Posts: 142
  • RealJamaicaEstate.com
    • Real Estate Forum
Re: How do I increase the header height?
« Reply #18 on: April 26, 2010, 05:51:28 PM »
Gimp can handle psd files...
Not very well. :)

Ok Utech, the simplest way of doing this if you don't know much about handling psd's is to just switch off the header_blue_lower layer before going to "Save for web and devices". Save as png-8 with 108 colours and 97% dither.

Now on the other hand, if you still want the extra blue bit to show over the light blue background gradient you will have to play around a bit to get it looking how you want it. Start by moving the header_blue_lower layer down so that its top is 150 px from the top of the header section. Turn off the header_blue_upper layer. Then make a rounded rectangle of the appropriate height (corner radius 6px) in #c9d7e7 and using a black to white gradient on a layer mask to get the fade to transparent effect. Get it looking how you want then save as before.
108 colours and not 128 ..right?

Online Antechinus

  • SMF Friend
  • SMF Super Hero
  • *
  • Posts: 24,844
  • Master of BBC Abuse
Re: How do I increase the header height?
« Reply #19 on: April 26, 2010, 05:54:21 PM »
Either will work. I got acceptable image quality by using 108 and less colours gives a smaller file size. Use whatever works. :)