1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
    Dismiss Notice
  3. This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Set different images for each category in the node list

Discussion in 'Template Modifications [Archive]' started by Jake Bunce, Jun 1, 2011.

  1. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    This is what it looks like:

    Screen shot 2011-06-01 at 12.24.24 AM.png

    Edit this template:

    Admin CP -> Appearance -> Templates -> node_category_level_1

    Add this code:

    Code:
    			<span class="catImage{$category.node_id}"></span>
    
    like so:

    Code:
    		<div class="categoryText">
    			<span class="catImage{$category.node_id}"></span>
    			<h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
    			<xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
    		</div>
    
    Then edit this template:

    Admin CP -> Appearance -> Templates -> EXTRA.css

    Add this code:

    Code:
    .catImage1
    {
    	background: red;
    	float: left;
    	width: 20px;
    	height: 20px;
    	margin-right: 5px;
    }
    
    .catImage10
    {
    	background: blue;
    	float: left;
    	width: 20px;
    	height: 20px;
    	margin-right: 5px;
    }
    
    You add a new class for each category node_id where you want to assign an image. You need to use the category's node_id in the class name (e.g. catImage1 and catImage10). In this case I am just using background colors, but you can change the CSS to use images if you want. Here is code to specify an image instead:

    Code:
    .catImage1
    {
    	background-image: url('PATH/TO/IMAGE.GIF');
    	float: left;
    	width: 20px;
    	height: 20px;
    	margin-right: 5px;
    }
    
    You need to change the width and height to match the image. Here is what it looks like with an image:

    Screen shot 2011-06-01 at 10.08.26 AM.png
     
    Phil, 0xym0r0n, shenmuee and 10 others like this.
  2. Luke B

    Luke B Active Member

    Jake! Thanks man!
    It's almost working for me. Take a look see.
    I think I'm running into a snag with where to past in node_category_level_1
     
  3. Luke B

    Luke B Active Member

    Fixed! Thanks again dude!
    I pasted that whole line of code "extra code" instead of just adding that span class (its 3am :confused:)
    This is an amazing group of people on this board!
     
  4. Sylar

    Sylar Well-Known Member

    How would you change the CSS to add images to it?
     
  5. Wuebit

    Wuebit Well-Known Member

  6. Sylar

    Sylar Well-Known Member

    Alright, so I assume that means I don't need the extra code stated in the above post? All I have to do is add that to extra.css?
     
  7. Wuebit

    Wuebit Well-Known Member

    you if you want the "box" ones like Jakes pic

    for small images you would do this

    HTML:
    .catImage1
    {
        background: url("@imagePath/xenforo/my_image.jpg")
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
    
    .catImage10
    {
        background: url("@imagePath/xenforo/[/FONT][FONT=Consolas]my_image2.jpg")
        float: left;
        width: 20px;
        height: 20px;
        margin-right: 5px;
    }
     
  8. Sylar

    Sylar Well-Known Member

    Yes, but I am asking if there is any other code I would have to add besides that
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Vodkaholic is correct. Just add a background-image attribute instead of the color. I use this code:

    Code:
    .catImage1
    {
    	background-image: url('PATH/TO/IMAGE.GIF');
    	float: left;
    	width: 20px;
    	height: 20px;
    	margin-right: 5px;
    }
    
    You need to change the width and height to match the image.

    edit - I just updated the first post with this code and another screenshot.
     
  10. Shelley

    Shelley Well-Known Member

    Interesting. I did this without adding new classes. is there any difference to this than how I did it (code below) that warrants editing the template? I'm sure there might be. Difference being I've floated my images to the right I'm just more curious than anything and wondering if there are any benefits to the way you did this jake.

    Code:
    .nodeList .categoryStrip {
        background: url("styles/style3/xenforo/gradients/gradient.png") repeat-x bottom #dddbdb !important;
        border: 1px solid #b4b4b4 !important;
        border-radius: 4px 4px 4px 4px !important;
        color: #ff0000 !important;
        font-size: 10px !important;
        margin: 0;
        min-height: 6px;
        padding: 0px 0px 0px 5px !important;
    }
    
    fieldset .nodeList.sectionMain .node.category.level_1.node_13 .categoryText {
        background: url("styles/style3/xenforo/gradients/13.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    
    fieldset .nodeList.sectionMain .node.category.level_1.node_3 .categoryText {
        background: url("styles/style3/xenforo/gradients/03.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    fieldset .nodeList.sectionMain .node.category.level_1.node_18 .categoryText {
        background: url("styles/style3/xenforo/gradients/18.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    fieldset .nodeList.sectionMain .node.category.level_1.node_22 .categoryText {
        background: url("styles/style3/xenforo/gradients/22.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    fieldset .nodeList.sectionMain .node.category.level_1.node_7 .categoryText {
        background: url("styles/style3/xenforo/gradients/7.png") no-repeat scroll right center transparent;
        height: 40px;
    }
    
     
  11. Sylar

    Sylar Well-Known Member

    Thanks very much Jake :)
     
  12. borbole

    borbole Well-Known Member

    Nice modification, I like it :)
     
  13. Morgain

    Morgain Well-Known Member

    I got this to work - on one category bar.
    But when I added the rest the pics don't show up. There's space appeared so the bar is responding but not displaying the pic.

    Even stranger I changed that one pic that worked for another, but the old pic still showed - even though I deleted it from the directory, cleared my cache!

    Anyway here's what I have done.

    As in first post on this thread I copied/ pasted the code snip into
    Admin CP -> Appearance -> Templates -> node_category_level_1
    Code:
                  <div class="categoryText">
                <span class="catImage{$category.node_id}"></span>
                <h3 class="nodeTitle"><a href="{xen:link categories, $category}">{$category.title}</a></h3>
                <xen:if is="{$category.description}"><blockquote class="nodeDescription baseHtml">{xen:raw $category.description}</blockquote></xen:if>
            </div>
    
    Admin CP -> Appearance -> Templates -> EXTRA.css
    Then I added my pics to the css, adjusted sizes in the copied/ pasted code

    The node no. 3 is the first one I tried and it did work. But all the others did not. Now I changed that pic that one doesn't work either.

    Have checked several times on node numbers, file sizes, names of files.
    Code:
    /* CATEGORY PICS 16, 3, 4, 5, 13 */
    
    .catImage16
    {
        background-image: url('http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/cat-web.png');
        float: left;
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
    
    .catImage3
    {
        background-image: url('http://www.housemorgain.co.uk/forumxf/styles/default/xenforo/widgets/triskele.png');
        float: left;
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }
    
    Test site at http://www.housemorgain.co.uk/forumxf
     
  14. Dodgeboard

    Dodgeboard Well-Known Member

  15. Morgain

    Morgain Well-Known Member

    Dodge thank you. I just opened all the images in mjky editor - re Saved and uploaded.
    It all works now - looks BEAUTIFUL and I'm very happy.

    Thank you Jake for the whole thing.
    See pretty pretty at
    Test site at http://www.housemorgain.co.uk/forumxf
     
  16. Dodgeboard

    Dodgeboard Well-Known Member

    Very nice. Personally, I think it would blend and look better if those images had a transparent background...but that's just me.
     
  17. Andrej

    Andrej Well-Known Member

    I am using the famfamfam icons, and it looks great with the category names. :)
     
  18. Morgain

    Morgain Well-Known Member

    Thank you Dodge. You're probably right but you see you're code clever and I'm not.
    So how would I do that?
     
  19. Morgain

    Morgain Well-Known Member

    Andrej why not explain or link to the icons, and give us a link to see your site so we can admire it.
     
  20. Andrej

    Andrej Well-Known Member

    http://www.famfamfam.com/lab/icons/ (You can just search famfamfam icons in google and get same result)
    28-10-2011 20-04-18.png
     

Share This Page