WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Adding Image to Smallbiz Menu Bar (11 posts)

  1. Mrs Chippy
    Member
    Posted 1 year ago #

    Anyone know how to add an image to the menu bar in the SmallBiz theme?

    There's a tutorial out there from eileenlonergan.com but I can't make it work. I've uploaded a 900x30px png image to WordPress and changed the relevant line in the Header PHP, but no joy.

    Any ideas?

  2. flashbuddy
    Member
    Posted 1 year ago #

    Send a link to your site.

  3. Mrs Chippy
    Member
    Posted 1 year ago #

    Hi,

    Site is http://www.smartgreen.org.uk

    Any thoughts most welcome!

  4. flashbuddy
    Member
    Posted 1 year ago #

    Image in the header: Use a jpg properly sized. Yours is 1.92MB! Here is the same image, properly sized and saved as a jpg at a measly 145KB.
    https://www.box.com/s/bd91dfa6c05ac2049ed4

    I'm having trouble wrapping my head around what you are trying to do. Are you:

    1.) Adding an icon image to menu items?
    2.) Adding a background image behind the links?
    3.) Dropping down the menu bar on top of the header image to align in the differentiated space? Someting like this >>

    I like the site :)

  5. Mrs Chippy
    Member
    Posted 1 year ago #

    Nice work with the image!

    It's #2 above that I'm trying to do. I want my menu bar to grade from white to pale grey vertically - something like this: http://www.toshiba.eu

    I'm rubbish with code so thought I'd juat swap the flat white colour for an image. Any other (easier!) options warmly welcome.

    Thanks again.

  6. flashbuddy
    Member
    Posted 1 year ago #

    Ahhh, easy peasy. What is needed a background image to tile horizontally the width of your menu bar. I recreated their gradient with Photoshop and uploaded it, then used firebug to see what it would look like on your site (view)

    You can download my image or create your own. Here is the code for your css.

    #access .menu-header, div.menu {
        background: url("images/smart-green-top-menu-bg.jpg") repeat-x scroll 0 0 transparent;
        font-weight: bold;
    }
  7. Mrs Chippy
    Member
    Posted 1 year ago #

    Have a look at it now - perfect!

    Took about 10 seconds to do it and I'd been messing about with it for days.

    Many thanks Mr Flash!

  8. vzb478
    Member
    Posted 1 year ago #

    Hi Flashbuddy - Dont suppose you could help me too?

    I'm also looking to update my Smallbiz site with a header graphic.. I followed your instructions above which allowed me to update ONLY the menu portion of the header graphic.. I want the whole header graphic updated with new image background (ie the bit with "Bray Holiday Apartment" etc).

    See site: http://www.brayapartment.com

    Thanks!
    Gareth

  9. flashbuddy
    Member
    Posted 1 year ago #

    You have a choice of two methods. Create a div and put your image in it, either as a background image or a normal image contained in the div. Assign a postion and z-index. Put that in your header div.

    <div style="position: relative; z-index: 10;><img src=""></div>
    or
    <div id="niftyImage" style="background:url(pathtoimage.png) no-repeat 0 0 transparent; position: relative; z-index: 10;></div>

    Move it where you want it with css.

    Method two is to grab the header image and edit it in Photoshop or something like it. See my version: https://skydrive.live.com/redir?resid=6F4BBC1BF99B2843!142

  10. vzb478
    Member
    Posted 1 year ago #

    Thanks Flashbuddy - Second option worked for me, dont know why I didn't think of that myself!

    Cheers
    gareth

  11. flashbuddy
    Member
    Posted 1 year ago #

    Geeze, will ya resize that background image to fill the browser space?!

    Google jQuery Background Stretcher.

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.