WordPress.org

Ready to get started?Download WordPress

Forums

An html title for "Navigation menu" widget (10 posts)

  1. albesco
    Member
    Posted 3 years 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

  2. esmi
    Forum Moderator
    Posted 3 years ago #

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

  3. albesco
    Member
    Posted 3 years 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!
    :-)

  4. esmi
    Forum Moderator
    Posted 3 years 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.

  5. albesco
    Member
    Posted 3 years 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

  6. Root
    Member
    Posted 3 years ago #

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

  7. albesco
    Member
    Posted 3 years ago #

    Thanks Root for your precious additional advice!
    :-)

  8. esmi
    Forum Moderator
    Posted 3 years 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;
    }
  9. albesco
    Member
    Posted 3 years ago #

    It works!!!!!
    :-D

    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
    :-)

  10. esmi
    Forum Moderator
    Posted 3 years ago #

    No problem. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.