Bueno Theme – Custom header and navigation

  • bakingsociety · Member ·

    Hi!

    I would greatly appreciate assistance with the follow issues (http://bakingsociety.wordpress.com):

    1) How would I center the header image shown? Currently the header image is a replacement for the page title text through custom CSS. I tried using the header image upload through the dashboard but it limited me on how large it could be, so I looked up some CSS code that someone else used. Is there a way to make it a true “header” and center it at a custom size?

    2) How can I center the navigation and replace the text with graphics as shown in the current header image? Essentially want the header and nav to work together and look like they do in the static header image that is currently up there.

    Hopefully this all made sense but please let me know if you have questions.

    Thanks!
    Chris

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    Since your blog is set to private, we cannot see it so it is going to be difficult for us to help with this because we can’t see what other changes you have made to the CSS. Is there a possibility you could set it temporarily to the second privacy setting, public but block search engines?

  • bakingsociety · Member ·

    sure thing! could you tell me how i would go about setting it to public? thanks!

  • thesacredpath · Member ·

    Go to settings > privacy in your dashboard and select the middle selection to set it public but block search engines. After we get your changes made, you can then set it back to private (bottom selection).

    Once you are ready to go live on the internet, you would likely want to select the top option, fully public and open to search engines.

  • bakingsociety · Member ·

    ok great. i have changed the settings so hopefully you can see the blog now. let me know if not, and if you have any questions!

  • thesacredpath · Member ·

    1. Remove your image from the site-title section and put it into the header section as I have below. I’ve added some stuff and changed some stuff, so I would suggest just copying and pasting the below in place of the #header section you now have in your CSS. The second bit below with the top margin setting on the #pagenav gets rid of the space above the header image.

    #header {
background: url("http://bakingsociety.files.wordpress.com/2011/03/header1.jpg") no-repeat scroll 0 0 transparent;
clear: both;
float: none;
height: 368px;
margin: 0 auto;
padding-top: 0;
text-align: center;
width: 1193px;
}

#pagenav {
margin-top: 0;
}

    2. That is tricky. My suggestion is to remove that from the header image and then put the existing nav up in that location and style it similarly to what you have in your header image with a top and bottom border and enlarge the text and change its color. The problem is I can’t get the nav to align center, which is what you would want. I can get it up there and into place, but it would be best if it were center aligned in case you add other items to it, you won’t have to tweak the CSS.

    Perhaps hallluke will drop by with the solution to #2.

  • bakingsociety · Member ·

    great thank you! i will give this a try and let you know how it turns out. that would be great if hallluke can assist with the nav stuff.

    i appreciate it your help.

  • thesacredpath · Member ·

    I’m still working on the nav stuff a little and might stumble on the combination, but if not, I’ll perhaps give him a nudge toward this thread for you.

  • bakingsociety · Member ·

    the header image is now centered…so that worked great.

    my question now is what is the best way to set that up so no matter how narrow or wide someone has their browser set, the header will stay centered in the frame along with the body content? will i need to make the banner span as a background image? or maybe include the header as part of the background possibly?

    thanks again for your help.

  • thesacredpath · Member ·

    Once a browser window reaches the width of the main content area, the content area will stop moving left and the browser starts covering up things from the right. That way what disappears first is the sidebar stuff, not the main content. Even if you included it as part of the background image, it would still get covered up once the browser window becomes smaller than the content area.

  • bakingsociety · Member ·

    That makes total sense. Can I set it so the background image doesn’t scroll left when the page as you reduce the size of the browser? I’m trying to have the header and main content area feel like a unit and work together. I think i may need to make the entire content area width narrower, along with the header and background images. Any thoughts there?

  • thesacredpath · Member ·

    That is another one for hallluke I think. I can’t get it to stop at the left border when you narrow the browser window. It could be that it could be put into #container instead of body, but I tried that and didn’t get things to work the way you want them.

  • bakingsociety · Member ·

    thanks for your help! i’ll wait for hallluke to stop by hopefully.

  • thesacredpath · Member ·

    You are welcome.

  • hallluke · Member ·

    Off to work now but I’ll take a look tonight when I get back (GMT 22:00)! This should be possible without too much difficulty. In the meantime you need to slice your current header up so that you have an individual image for each link you want to use for the navigation menu items. Post the URLs here so I can use those images and you’ll make it much easier for us to help.

  • bakingsociety · Member ·

    Thanks hallluke! I will get to work on this and have you some rough image slices to work with. Once we get the navigation stuff situated I would like your help with the header image (banner) as well. Much appreciated!

    Chris

  • bakingsociety · Member ·

    Hi Hallluke,

    Here are the links to the navigation image slices:

    From left to right: (About, Join, Board Members, FAQ)

    NORMAL STATE:
    http://bakingsociety.files.wordpress.com/2011/03/about_off.png
    http://bakingsociety.files.wordpress.com/2011/03/join_off.png
    http://bakingsociety.files.wordpress.com/2011/03/board-members_off.png
    http://bakingsociety.files.wordpress.com/2011/03/faq_off.png

    HOVER / ON STATE: (would like this to be the hover slice and be active on that specific page if possible)
    http://bakingsociety.files.wordpress.com/2011/03/about_on.png
    http://bakingsociety.files.wordpress.com/2011/03/join_on.png
    http://bakingsociety.files.wordpress.com/2011/03/board-members_on.png
    http://bakingsociety.files.wordpress.com/2011/03/faq_on.png

    I would like the nav bar centered slightly under the logo in the banner. Here is a reference image so you can see how the layout should be:

    Thanks and looking forward to hearing back from you!

  • hallluke · Member ·

    This should do it:

    #pagenav {float:none; position:absolute; top:290px; left:50%;}
#pagenav ul {position:relative; right:50%;}
#pagenav li a {height:64px; display:block; text-indent:-999em; border:none; padding:0;}
.page-item-2 a {background:url("http://bakingsociety.files.wordpress.com/2011/03/about_off.png"); width:138px;}
.page-item-4 a {background:url("http://bakingsociety.files.wordpress.com/2011/03/join_off.png"); width:91px;}
.page-item-12 a {background:url("http://bakingsociety.files.wordpress.com/2011/03/board-members_off.png"); width:253px;}
.page-item-32 a {background:url("http://bakingsociety.files.wordpress.com/2011/03/faq_off.png"); width:106px;}
.page-item-2 a:hover {background:url("http://bakingsociety.files.wordpress.com/2011/03/about_on.png");}
.page-item-4 a:hover {background:url("http://bakingsociety.files.wordpress.com/2011/03/join_on.png");}
.page-item-12 a:hover {background:url("http://bakingsociety.files.wordpress.com/2011/03/board-members_on.png");}
.page-item-32 a:hover {background:url("http://bakingsociety.files.wordpress.com/2011/03/faq_on.png");}
  • bakingsociety · Member ·

    wow! this worked perfectly. i can’t thank you enough for your help with this.

    i don’t have too much left to do, just some minor layout stuff that i may need your assistance with (positioning, etc.). would you be able to help with that if i reply back to this thread?

    thanks again!

  • hallluke · Member ·

    Sure, let me know what you get stuck with.

1 2
  • The topic ‘Bueno Theme – Custom header and navigation’ is closed to new replies.