Separate Icons For Each Node?

[TheJoker]

I'd like to use a different, static icon for each node on my board.

For example,

Say I have two nodes: Mac, and iPhone

I want the Mac status icon to be a picture of a Mac (that I supply) and the iPhone node to have a picture of an iPhone.

Is there some way to do this? Preferably a mod?

 

[Slavik]

I put it in the root folder just for testing.

try moving it to the style folder and defining it there.

 

[TheJoker]

try moving it to the style folder and defining it there.

Still didn't work. Even tried it with the full URL: http://themacforum.net/styles/mac.png and it didn't work. Just blank space.

 

[Shelley]

I put it in the root folder just for testing.

Try adding

background-position: 0 center;

 

[TheJoker]

Try adding

background-position: 0 center;

You're the best! Thanks Shelley!

I'll update if I have anymore troubles!

 

[TheJoker]

Note that this seems to be the correct code, as the ".read" class doesn't exist.

.node .node_X .forumNodeInfo.unread .nodeIcon, .node .node_X .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("image path");
background-position: 0 center;
}
 
.node .node_X .forumNodeInfo .nodeIcon, .node .node_X .categoryForumNodeInfo .nodeIcon {
    background-image: url("image path");
background-position: 0 center;
}

 

[Shelley]

Not sure what you mean but you'll have to (for the read) use another image. Perhaps greyscale it via an editor or use opacity lowering it for read nodes whilst keeping unread unchanged and untouched so that read/unread are distinguished by your members.

It's advisble if your using another image (to change the path & filename).

 

[Shelley]

so for example

.node .node_X .forumNodeInfo.unread .nodeIcon, .node .node_X .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("path/to/image/mac.png");
background-position: 0 center;
}
 
.node .node_X .forumNodeInfo .nodeIcon, .node .node_X .categoryForumNodeInfo .nodeIcon {
    background-image: url("path/to/image/greyscalemac.png");
background-position: 0 center;
}

The above would have the same image but they would be two different images where you would modify the greyscale icon in an editor.

or

you could use the same icon and paths and add in an opacity (lowering it) to make it distinguishable (below)

.node .node_X .forumNodeInfo.unread .nodeIcon, .node .node_X .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("path/to/image/mac.png");
background-position: 0 center;
}
 
.node .node_X .forumNodeInfo .nodeIcon, .node .node_X .categoryForumNodeInfo .nodeIcon {
    background-image: url("path/to/image/mac.png");
background-position: 0 center;
opacity: 0.4;  }

There many ways you can go about doing this those are two examples.

 

[TheJoker]

I am using the same image for both read and unread. I just corrected the code you provided, Slavik, because there is no ".read" child class.

 

[Badboy]

I cant get it to work. There is no Image, just the default Node Icon from the Styles. I have put this into my extra.css:

.node .node_19 .forumNodeInfo.unread .nodeIcon, .node .node_19 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("/styles/icons/movies.png");
background-position: 0 center;
}

.node .node_19 .forumNodeInfo.read .nodeIcon, .node .node_19 .categoryForumNodeInfo.read .nodeIcon {
background-image: url("/styles/icons/movies.png");
background-position: 0 center;
}

I want only 1 Icon, no read & unread. Could you please tell me what is wrong?

 

[TheJoker]

I cant get it to work. There is no Image, just the default Node Icon from the Styles. I have put this into my extra.css:

.node .node_19 .forumNodeInfo.unread .nodeIcon, .node .node_19 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("/styles/icons/movies.png");
background-position: 0 center;
}

.node .node_19 .forumNodeInfo.read .nodeIcon, .node .node_19 .categoryForumNodeInfo.read .nodeIcon {
background-image: url("/styles/icons/movies.png");
background-position: 0 center;
}

I want only 1 Icon, no read & unread. Could you please tell me what is wrong?

Try this:

.node .node_19 .forumNodeInfo.unread .nodeIcon, .node .node_19 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("/styles/icons/movies.png");
background-position: 0 center;
}

.node .node_19 .forumNodeInfo .nodeIcon, .node .node_19 .categoryForumNodeInfo .nodeIcon {
background-image: url("/styles/icons/movies.png");
background-position: 0 center
}

 

[Badboy]

Yaiiiiiiiiiiiii, it works now. Thank You, Microsuck!

 

[erich37]

this is what I have and it is working fine:

.categoryForumNodeInfo, .nodeList .node_212 .forumNodeInfo .nodeIcon, .node .node_212 .categoryForumNodeInfo .nodeIcon {
background-image: url("/market/agriculture.jpg") !important;
}
.categoryForumNodeInfo, .nodeList .node_212 .forumNodeInfo.unread .nodeIcon, .node .node_212 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("/market/agriculture.jpg") !important;
}