WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Menu categories images (12 posts)

  1. zzuum
    Member
    Posted 8 months ago #

    Hello, i create my menu with categories.. now i want to put images

    Here is picture.. http://i41.tinypic.com/ddx1l.jpg

    how to put that images ... NEW, TOP5, INTERVIEWS..

    Thnk you

  2. cubecolour
    ɹoʇɐɹǝpoɯ
    Posted 8 months ago #

    can you provide a link to your site please?
    What theme are you using?

    Assuming you have a menu which currently has menu items for 'news', 'top 5', 'interviews' there are various text replacement techniques you can use. Chris Coyier has outlined several methods at http://css-tricks.com/examples/ImageReplacement/

  3. zzuum
    Member
    Posted 8 months ago #

    This is my page :

    http://stefanvblog.com/category/news/
    it is custom theme...

    Thank you for link :)

  4. zzuum
    Member
    Posted 8 months ago #

    Is there any chance to do that :))

  5. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

  6. zzuum
    Member
    Posted 8 months ago #

    ok.. sry.. But this plugin don't work for categories.. That's the problem..

  7. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    You should be able to use the menu-specific classes to add images yourself - for example this code from News:

    <li id="menu-item-632" class="menu-item menu-item-type-taxonomy menu-item-object-category current-menu-item menu-item-632">

    So in the CSS, try:

    li#menu-item-632 {
       background: url("URL TO YOUR IMAGE HERE");
    }
  8. zzuum
    Member
    Posted 8 months ago #

    .li#menu-item-632 {
       background: url("http://stefanvblog.com/wp-content/uploads/2013/11/news.png");
    }

    i put that but nothing happend :S..
    This is code of my menu now... in css.. Do I need ti delete here something?

    #navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px;
    	list-style-type: none; list-style-image: none; position:relative;}
    #navmenu li {display: inline; }
    
    #navmenu ul li a {text-decoration:none;  margin: 4px;
    	padding: 5px 20px 5px 20px; color: blue;
    	background:green;}
    #navmenu ul li a:hover {
    	background: yellow;
    }
  9. WPyogi
    Volunteer Moderator
    Posted 8 months ago #

    Look closely at what you have here:

    .li#menu-item-632

    compare that to what I posted - i.e. li is not a class, it's a tag.

  10. zzuum
    Member
    Posted 8 months ago #

    Thank you for answer :)

    I tried it and... nothing happens ... :/

    #navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px;
    	list-style-type: none; list-style-image: none; position:relative;}
    #navmenu li {display: inline;}
    
    li#menu-item-632 {
       background: url("http://stefanvblog.com/wp-content/uploads/2013/11/Untitled.png");
    }
    
    #navmenu ul li a {text-decoration:none;  margin: 4px;
    	padding: 5px 20px 5px 20px; color: blue;
    	background:green;}
    #navmenu ul li a:hover {
    	background: yellow;
    }
  11. zzuum
    Member
    Posted 7 months ago #

    OK, this is my code for menu..

    #navmenu ul {margin: 200px; margin-left:35%; margin-top:5%; padding: 10px; position:relative;}
    
    #navmenu li {display: inline;}
    
    li#menu-item-632 {
       background:red;
    }
    li#menu-item-633 {
       background: blue;
    }
    li#menu-item-631 {
       background: white;
    }

    This is link : http://stefanvblog.com/category/news/

    As you can see, the background color has changed.. but when i put background-image : url(...);, backgroung color became white and there is no image.. image size iz 300x300px... Do you know reason for that..

    Thank you

  12. zzuum
    Member
    Posted 7 months ago #

    i found the reason.. i need to expand [widht, height] my menu.. but i don't know what to expand. :(

Reply

You must log in to post.

About this Topic