Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Bueno Theme - Custom header and navigation

  1. 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 bakingsociety.com.

  2. 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?

  3. bakingsociety
    Member

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

  4. 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.

  5. 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!

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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?

  12. 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.

  13. bakingsociety
    Member

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

  14. thesacredpath
    Member

    You are welcome.

  15. 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.

  16. 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

  17. 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:

    http://bakingsociety.files.wordpress.com/2011/03/header2.jpg

    Thanks and looking forward to hearing back from you!

  18. 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");}

  19. 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!

  20. hallluke
    Member

    Sure, let me know what you get stuck with.

  21. bakingsociety
    Member

    i was able to remove the white boxes from the posts on the home page, but the sub pages and archived pages still show the box. how would i remove it from all pages?

    also, how would i change the font color on all pages?

    thanks!

  22. hallluke
    Member
     

    .post {background-color:transparent; border:none;}
body {color:#fe50b6;}

  23. bakingsociety
    Member

    thanks! ok a few more things:

    - need to change the post title color, page title color and right sidebar title color (currently they look black and gray).

    - can you give me basic starter code that i can edit to make changes to font sizes, colors, etc.?

    - how can i link the header image to go back to the home page (that show the posts)?

    - how can i decrease (or make changes) to the width of the 2 column layout? probably want to make it a bit narrower.

    thanks again for your help!

  24. bakingsociety
    Member

    hallluke,

    i think i figured out a few things from my above post. please disregard the first two requests (color and text).

    still need help on the last two questions if you can assist there.

    thanks again!

  25. bakingsociety
    Member

    also would like to add a credits line at the bottom somehow...can this be done with the footer or with some sort of widget? thanks again.

  26. wawashop
    Member

    Hi, once you have created your own navigation menu, with your special designed page links, as bakingsociety has done, how can I put subpages boxes on each page box link of the menu?
    I would appreciate comments from you either "bakingsociety" as you have been working over this topic
    Thank you in advance!!!

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags