Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS WordPress – Menu images instead of text

  • This topic is empty.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #30053
    njrbarros
    Member

    Hi,

    I’m using WordPress with TwentyTenWeaver theme to build a site and need to replace the menu text with images.

    I’ve already made a few changes into the css and was able to change the menu bar background image, but I’m having problems with the menu images.

    As you can see in http://teste.nubartek.com, I can only place one menu image.

    I’ve made the following changes into the css:

    /* =Menu
    
    */

    #access {
    background: url(http://www.simplesmentemaria.net/images/menu_pt/barra.jpg) left;
    display: block;
    color: #aaa;
    float: left;
    margin: 0 auto;
    width: 940px;
    line-height: 50px;
    }
    #access .menu-header,
    div.menu {
    font-size: 10px;
    margin-left: 12px;
    width: 928px;
    }
    #access .menu-header ul,
    div.menu ul {
    list-style: none;
    margin: 0;
    }
    #access .menu-header li,
    div.menu li {
    float: left;
    position: relative;
    }
    #access a {
    width: 112px;
    color: #aaa;
    display: block;
    line-height: 97px;
    padding: 0 10px;
    text-decoration: none;
    }
    #access ul li {
    background-image: url(http://www.simplesmentemaria.net/images/menu_pt/inicio.jpg);
    width: 112px;
    line-height: 97px;

    Can anyone please tell me how I can add more menu images?
    It should look like the following image: http://teste.nubartek.com/header_example.jpg

    Thanks and regards.

    #81276
    virtual
    Participant

    From a quick glance it looks like you have only one image for all the li’s. Give each li a different class and in the css add each different background image to that class.

    #81259
    Darfuria
    Member

    If you’re using the default way of generating WordPress links (either by calling wp_list_pages or using a 3.0 menu) each item will have an id.

    That being the case you could just hide the text on each of your menus, and then define a background image for each li id.


    #menu li {text-indent: -9999px;}
    #menu li#menu-item-16 {background: url(images/navsprite.png no-repeat 100px 50px;}
    #84068
    naldjb
    Member

    hi,,thanks for this post, the only problem is, i set wp to have a staic home page and set frontpage to homepage, and im trying to use a image menu but i cant get the Id for the home, the other pages i can see it, using firebug with firefox but on the homebutton there is no id on it,,do you have any idea about this?

    #85190
    drduvel
    Member

    Hi. Would love to know how you achieved it.

    I can’t seem to apply the two suggestions above.

    #106257
    cadesdaddy
    Member

    Not exactly background images, but to give a button effect, I styled as follows:

    /* =Menu


    */

    #access {
    background: #000; /*


    this colors the whole menu bar */
    display: block;
    float: left;
    margin: 0 auto;
    width: 940px;
    }
    #access .menu-header,
    div.menu {
    font-size: 13px;
    margin-left: 12px;
    width: 928px;
    }
    #access .menu-header ul,
    div.menu ul {
    list-style: none;
    margin: 0;
    }
    #access .menu-header li,
    div.menu li {
    float: left;
    position: relative;
    }
    /*


    THIS SET DEFINES THE BLOCK WHEN NOT HOVERING */
    #access a {
    /* width : auto;


    REMOVED */
    /* height : auto;


    REMOVED */
    display : block;
    border : 2px outset #545252;
    text-decoration : none;
    list-style:none;
    background-color : #000;
    color : #fff;
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    padding : 3px 12px;
    outline : 0;
    cursor : pointer;
    margin-left:0px;
    /* color: #FFFFFF; — ORIGINAL */
    /* display: block; — ORIGINAL */
    /* line-height: 38px; — ORIGINAL */
    /* padding: 0 10px; — ORIGINAL */
    /* text-decoration: none; — ORIGINAL */
    }
    #access ul ul {
    box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    -webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
    display: none;
    position: absolute;
    top: 38px;
    left: 0;
    float: left;
    width: 180px;
    z-index: 99999;
    }
    #access ul ul li {
    min-width: 180px;
    }
    #access ul ul ul {
    left: 100%;
    top: 0;
    }
    /*


    DON’T KNOW WHAT THIS COLORS */
    #access ul ul a {
    background: #333; /*


    DON’T KNOW WHAT THIS COLORS */
    line-height: 1em; /*


    ORIGINAL */
    padding: 10px; /*


    ORIGINAL */
    width: 160px; /*


    ORIGINAL */
    height: auto; /*


    ORIGINAL */
    }
    /*


    THIS SET COLORS THE TEXT AND BACKGROUND OF THE MENU LINK BLOCK WHEN HOVERING */
    #access li:hover > a,
    #access ul ul :hover > a {
    border : 2px outset #545252;
    background-color : #fff;
    color : #000;
    text-decoration:underline;
    /* background: #333; ORIGIONAL */
    /* color: #fff; ORIGINAL */
    }
    #access ul li:hover > ul {
    display: block;
    }

    /*


    THIS SET COLORS THE TEXT OF THE MENU LINK ON THE ACTIVE PAGE */
    #access ul li.current_page_item > a,
    #access ul li.current-menu-ancestor > a,
    #access ul li.current-menu-item > a,
    #access ul li.current-menu-parent > a {
    color: #fff;
    font-weight:bold;
    font-size:14px;
    }
    /*


    THIS SET COLORS THE TEXT OF THE MENU LINK ON THE ACTIVE PAGE ALSO I THINK :) */
    #access ul li.current_page_item > a:hover,
    #access ul li.current-menu-ancestor > a:hover,
    #access ul li.current-menu-item > a:hover,
    #access ul li.current-menu-parent > a:hover {
    color: #000;
    font-weight:bold;
    font-size:14px;
    }
    * html #access ul li.current_page_item a,
    * html #access ul li.current-menu-ancestor a,
    * html #access ul li.current-menu-item a,
    * html #access ul li.current-menu-parent a,
    * html #access ul li a:hover {
    color: #fff; /*


    I THINK THIS COLORS THE TEXT ON THE ACTIVE PAGE TOO, BUT NOT FOR SURE */

    /*


    i love cabbage, i really do, you should try it */
    }

    #106259
    chrisburton
    Participant

    This is an old post but I’m doing the same. Using two different custom menu’s (Main and Secondary), I used a sprite and applied a background-position to each.

    Image

    Code:

    #main {float: left;} #secondary {float: right;}
    #main li {margin-right: 50px;} #secondary li {margin-left: 50px;}
    #main li, #secondary li {display: inline; line-height: 80px;}

    #main li a, #secondary li a {
    display: inline-block;
    height: 10px;
    background-image: url('/wordpress/wp-content/uploads/sprite.png');
    background-repeat: none;
    text-indent: -9999px;
    line-height: 0;
    }

    /* Normal Menu */
    #menu-item-45 a {width: 46px; background-position: 0 0;} /* About */
    #menu-item-19 a {width:74px; background-position: -46px 0;} /* Portfolio */
    #menu-item-211 a {width: 69px; background-position: -120px 0;} /* Projects */
    #menu-item-27 a {width:43px; background-position: -189px 0;} /* Store */

    /* Hover Menu */
    #menu-item-45 a:hover {background-position: 0 -10px;} /* About */
    #menu-item-19 a:hover {background-position: -46px -10px;} /* Portfolio */
    #menu-item-211 a:hover {background-position: -120px -10px;} /* Projects */
    #menu-item-27 a:hover {background-position: -189px -10px;} /* Store */

    .logo {
    float: left;
    width:341px;
    height:79px;
    background: url('/wordpress/wp-content/uploads/sprite.png') 0 -19px no-repeat;
    margin: 0 auto;
    text-indent: -9999px;
    }
    #134313
    Deepa
    Member

    Hi,

    i am beginner in wordpress, i want to add different images for all menus items with link how can i do? will give step by step procedure to make it done.

    Thanku..

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.