An html title for "Navigation menu" widget

  • albesco

    (@albesco)


    15 years, 5 months ago

    Hi

    I’d like to use four “navigation menu” widget, each with image as title.
    Is it possible?
    I tried to insert html code in widget’s title, but… it’s always cut off automatically 🙁

    The brutal solution I found in my website
    http://www.lemappedelpensiero.it/wordpress/
    is to
    – set in style.css .widget-title {display: none}
    – put a text widget above each Navigation menu, with an html code to load the right imagine
    but… I’m not satisfied, ’cause it doesn’t work fine in IE: it gives a blank space above the navigation widget :-/

    Can anyone give me an advice?
    Thanks

    Alberto

Viewing 9 replies - 1 through 9 (of 9 total)
  • esmi

    (@esmi)

    15 years, 5 months ago

    Just use CSS to add a background image to the standard text titles.

    Thread Starter albesco

    (@albesco)

    15 years, 5 months ago

    Hm… I’m afraid I’m not so experienced to do so…
    Should I modify the widgets.php file?
    :-$

    Can you give me more information to do so?
    Thanks a lot!
    🙂

    esmi

    (@esmi)

    15 years, 5 months ago

    You need to modify your theme’s stylesheet and use something like:

    #primary .xoxo #widgets-reloaded-nav-menu-3 .widget-title {
background:images/metodologia.jpg center top no-repeat;
}
#primary .xoxo #widgets-reloaded-nav-menu-4 .widget-title {
background:images/soluzioni.jpg center top no-repeat;
}

    etc.

    Thread Starter albesco

    (@albesco)

    15 years, 5 months ago

    I’m trying, but.. it seems not working
    :-S

    I’ve found in the style.css file the section
    /* =Widget Areas

    In this section I found an empty declaration

    #primary {
}

    I’ve seen that my first navigation widget is called 3, so… substituted the empty declaration with this one:

    #primary .xoxo #widgets-reloaded-nav-menu-3 .widget-title {
background-image: url(http://www.lemappedelpensiero.it/wordpress/wp-content/uploads/tasti-menu/metodologia.png)
center top no-repeat;
}

    but… it doesn’t work: I only have the text
    🙁

    Any idea?
    Thank you a lot

    Alberto

    Root

    (@root)

    15 years, 5 months ago

    the big disadvantage of compressing yr markup is that no one can read it……it doesnt achieve any big weight saving either,

    Thread Starter albesco

    (@albesco)

    15 years, 5 months ago

    Thanks Root for your precious additional advice!
    🙂

    esmi

    (@esmi)

    15 years, 5 months ago

    Your CSS isn’t quite correct. Try:

    #primary .xoxo #widgets-reloaded-nav-menu-3 .widget-title {
background: url(http://www.lemappedelpensiero.it/wordpress/wp-content/uploads/tasti-menu/metodologia.png)
center top no-repeat;
}
    Thread Starter albesco

    (@albesco)

    15 years, 5 months ago

    It works!!!!!
    😀

    The final touch I’ve made is the following:
    – to empty the title of the navigation menu, inserting a simple blank-space
    – complete the css code in this way

    #primary .xoxo #widgets-reloaded-nav-menu-3 .widget-title {
	background: url(http://www.lemappedelpensiero.it/wordpress/wp-content/uploads/tasti-menu/metodologia.png)
left top no-repeat;
	padding: 23px 0px 0 0;

}

    Thank you so much, Esmi!!!
    It seemed me impossible for me alone… absolutely I’m not a css expert, and I was going on by try-and-try
    🙂

    esmi

    (@esmi)

    15 years, 5 months ago

    No problem. 🙂

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘An html title for "Navigation menu" widget’ is closed to new replies.