Jump to content


Photo
- - - - -
Resolved

Two Header Questions



  • Please log in to reply
7 replies to this topic

#1 f8admin

f8admin

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 01 November 2012 - 10:17 PM

Hello again, I have two questions about headers.... The first is how do I make a graphic stick to the top of the blog? I always leaves a space when I place the logo there.

And the second question is, how would I go to recreate this:

Please Login or Register to see this Hidden Content



One part graphic, the other part solid color...but where do I set the header size and bg color? Thanks for the help again :)

#2 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 02 November 2012 - 03:26 AM

Hi there, the logo with have paddings/margins around it. You'll need to remove the top padding to make it fit flush to the top of the page, you can do this with css. Something like

Please Login or Register to see this Hidden Content

. You'll need to check this using firebug www.getfirebug.com.

I've looked at the inspiration site, to design it you'll need to get the graphic in place first in the layout. Then you can chose the bg color you want running behind the graphic and apply it to the #branding section using css, as per the method above.

Please Login or Register to see this Hidden Content



#3 f8admin

f8admin

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 02 November 2012 - 11:50 PM

Hum the flush to the top code does not work :/
I will try the other code when I get to it, thanks!

#4 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 03 November 2012 - 05:10 AM

You're welcome :-)

First code was an example, you'll need to find the correct code for the item you're editing using firebug. www.getfirebug.com

#5 f8admin

f8admin

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 07 November 2012 - 03:14 PM

I've tried everything with Firebug but I still can't figure out how to snap the logo to the top :(
Does anybody know the magic code?

#6 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 November 2012 - 05:51 PM

You may want to try adjusting the top margin by using a negative value. For reference:

Please Login or Register to see this Hidden Content



#7 f8admin

f8admin

    Advanced Member

  • Members
  • 39 posts
  • Country: Country Flag

Posted 08 November 2012 - 04:48 AM

More than once good Samaritans left a comment on what worked for them, saving my butt. Thanks for the both of you and here is the magic code:

#branding {margin-top:-50px;}

Now my only issue is getting the header to have a background color. Applying a bg color to #branding only wraps the color around the image. #header does the same also.
I have no problem making the graphic like this:

Please Login or Register to see this Hidden Content



But how do I make the background like that? Thanks again for your help!

#8 James B

James B

    Advocate

  • Moderators
  • 4985 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 08 November 2012 - 04:53 AM

The topic was marked as resolved.





Also tagged with one or more of these keywords: Resolved