Need help? Check out our Support site, then


WordPress.com Forums » CSS Customization

Bueno Custom Header CSS

  1. lmarsden
    Member

    Hi all,

    I've checked the forums but can't seem to find a bueno specific topic for the following issue...

    I've uploaded a custom header through the appearance --> header tool but it's not clickable, I would just like to link it to my landing/home page, any ideas?

    Also whilst I'm here :) I can't seem to change the colour of my menu headings - I've tried ammending the #pagenav a { } element but can't seem to change it - I'm sure it's simple but it's driving me crazy. For info, I'm using the typekit font lobster on the menu headings.

    Website: http://buffalo-press.com and I have the CSS upgrade

    Thanks in advance for any help!

    Lloyd

    The blog I need help with is buffalo-press.com.

  2. timethief
    Member

    There are many threads that make it clear that once you CSS edit a theme you can no longer use the header image uploader. Instead you must place the link to the header image in your Media Library into the CSS stylesheet. Also note that when you alter a theme’s stylesheet, you only need to put in the Editor the modification/additions to the CSS, not the entire thing. Read this for more info:
    http://csswiz.wordpress.com/2009/10/15/if-you-have-the-wp-com-css-upgrade/
    Either Staff or another Volunteer who helps with CSS with assist you with your other questions. Please be patient while waiting. :)

  3. thesacredpath
    Member

    The header can be made clickable, but it is a little bit of work. You have to create a transparent PNG with no background color (completely blank) the exact size of your header image, upload it to your media library and insert it into a text widget in your sidebar and link it to your main page. Then you go into the CSS and specifically size that text widget (by widget ID) to the exact dimensions of the header image. Next, you have to relocate that text widget up and over your header image using positioning (position absolute and left and top values). The main container or wrapper selector also has to have "position relative declared as well to keep the transparent PNG from shifting up or down due to the admin bar.

    If you wanted to do this, and you would like help, get the image created and get it into a text widget in the sidebar and we can go from there.

  4. lmarsden
    Member

    Thanks for this guys. SP - I will create the PNG in photoshop over the weekend (It's on my other computer) and get back to you, am I ok to leve the thread open?

    Oh and any ideas about point 2 (menu headings)

    Thanks again

    Lloyd

  5. thesacredpath
    Member

    Yes, you can leave it open and then come back to it when ready.

    On the menu headings, what color are you trying to change? The font color or the bar above, or both?

  6. thesacredpath
    Member

    Sorry, meant the bar below the text, not above.

  7. lmarsden
    Member

    The font colour itself, I'm going to darken the background colour so ideally I would like the font to be white

    Thanks

  8. thesacredpath
    Member

    This does it for me on the top level items.

    #pagenav a {
color: #FFFFFF;
}

    This changes the font color on the dropdowns.

    .nav li ul li a, #header .menu li ul li a {
color: #FFFFFF;
}

  9. lmarsden
    Member

    That's done it for me as well - I didn't clear up my earlier code alterations which didn't help either.

    Again, thanks for all your help

    Lloyd

  10. thesacredpath
    Member

    Lloyd, you are welcome.

  11. lmarsden
    Member

    I was too impatient! I have now uploaded the transparent image and placed it in an image widget on the sidebar,

    Image name - "http://buffalopress.files.wordpress.com/2011/07/for-lloyd.png?w=10984&h=2339"

    Lloyd

  12. panaghiotisadam
    Member

    You've got a Home tab, so there's no point making the header image clickable. Anyway, if you want that, you don't need the transparent image. Paste this in a text widget:

    <div align="center" style="width:100%;top:119px;left:0;position:absolute;z-index:11;">
<a href="YOUR BLOG URL HERE"><div style="width:940px;height:180px;"></div></a>
</div>

    This will produce an invisible linking rectangle in front of the image.

  13. lmarsden
    Member

    Thanks all - I know it's not strictly necessary but any extra ways to ease navigation and to keep people on the site...

    The code worked panaghiotisadam - thanks for your help!

    For anyone else who wants to use this method on bueno I have adjusted the values slightly to encompass just the image rather than the whole of the top region- 

    <div align="center" style="width:65%;top:119px;left:160px;position:absolute;z-index:11;">
<a href="http://buffalo-press.com"><div style="width:930px;height:198px;"></div></a>
</div>

  14. panaghiotisadam
    Member

    You're welcome. But you should retain the outer div as I originally gave it: your version will change position horizontally, depending on screen resolution and browser window size. You can see what I mean if you change your version to this to make it visible:

    <div align="center" style="width:65%;top:119px;left:160px;position:absolute;z-index:11;">
<a href="http://buffalo-press.com"><div style="width:930px;height:198px;background-color:#f00;"></div></a>
</div>

    Drag the browser window to make it narrower or wider and see what happens.

    Also, if others are interested in this, they should note it's tailored to your Bueno (with the title hidden), not the default Bueno.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags