• 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

Jake Bunce

Well-known member
This is what it looks like:

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

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.webp
 
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!
 
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?
 
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?
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;
}
 
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.
 
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;
}
 
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
 
Very nice. Personally, I think it would blend and look better if those images had a transparent background...but that's just me.
 
Very nice. Personally, I think it would blend and look better if those images had a transparent background...but that's just me.

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