Custom Menu with custom graphic button

  • Unknown's avatar
    keiroservices · Member ·

    Hi,

    What I’m hoping to do is add graphic button type bars for each menu item (there will be 5). Can this be done on the Coraline theme? Or is there another theme that I can use.

    Any suggestion is appreciated.

    Thanks
    Jean

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

  • michiecat · Staff ·

    Hi keiroservices,

    This can be accomplished with using CSS, available through the Custom Design upgrade. It’ll work with Coraline, yes, or any other theme that supports custom menus.

  • Unknown's avatar
    keiroservices · Member ·

    Do you know any Blog that has this kind of customization and we can take a look?

    Thanks
    Jean

  • themeshaper · Staff ·

    @keiroservices Not offhand but you can probably do something like the following.

    .page-item-XX a,
.menu-item-XX a { /* this will depend on whether you're using a custom menu or not */
background: url(http://example.com/image.jpg) no-repeat; /* a link to the image you're using */
text-indent: -9000px; /* This will hide the text */
width: 20px; /* use the appropriate width for your graphic*/
}

    Each menu item will be wrapped in a list element with a class that matches up with a particular number. You can use that number to target each link, replace the image, and then … success! I like to use Firebug to find out the correct class.

    If you just want to add an image next to each link you can skip the text-indent and the width properties and add some left-padding to the link.

    I hope that helps you get started!

  • The topic ‘Custom Menu with custom graphic button’ is closed to new replies.