XF 1.2 Adding individual category icons to nodes?

Sort by date Sort by votes
Do @Brogan's posts in that thread not point you in the right direction? It's not about finding some code that works, the code clearly does work. It's about adjusting the CSS and the images you're using accordingly.

Chances are the images are too big and need to be made smaller. Or the container the images are in are too small so you adjust the CSS of those until you can see the whole image.
 
Upvote 0 Downvote
Chris Deeming said:
Do @Brogan's posts in that thread not point you in the right direction? It's not about finding some code that works, the code clearly does work. It's about adjusting the CSS and the images you're using accordingly.
Click to expand...
It "works." But going to Style Properties and changing the node height and width size didn't work - I set the requirements to 48px x 48x - and that broke the actual modification.
Or the container the images are in are too small so you adjust the CSS of those until you can see the whole image.
Click to expand...
That's what I did!
Brogan said:
http://xenforo.com/community/resources/node-secondary-images.1512/
Click to expand...
I like Shelley's works, but that does not appeal to me.
 
Upvote 0 Downvote
Chris Deeming said:
Are you being serious? o_O
Click to expand...
Yes, I am being serious.
That guide tells you exactly what you are asking about.
Click to expand...
No, it's not. It'll just "add" one more image next to the icons. I want to replace the current icons with custom ones, which is what this does:
Code: 
/* custom status icons */

/* node id 2*/
.node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-2.png");
}
.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-2.png");
}
/* node id 7*/
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}
/* node id 15*/
.node .node_15 .forumNodeInfo .nodeIcon, .node .node_15 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-15.png");
}
.node .node_15 .forumNodeInfo.unread .nodeIcon, .node .node_15 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-15.png");
}
Which is meant for 1.x [RC1].
You can use any images you need. You can replace the Shelley graphics with whatever you like...
Click to expand...
I know that.
 
Upvote 0 Downvote
Carlos said:
Yes, I am being serious.

No, it's not. It'll just "add" one more image next to the icons. I want to replace the current icons with custom ones, which is what this does:
Code: 
/* custom status icons */

/* node id 2*/
.node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-2.png");
}
.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-2.png");
}
/* node id 7*/
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}
/* node id 15*/
.node .node_15 .forumNodeInfo .nodeIcon, .node .node_15 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-15.png");
}
.node .node_15 .forumNodeInfo.unread .nodeIcon, .node .node_15 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-15.png");
}
Which is meant for 1.x [RC1].

I know that.
Click to expand...

Stop being so rude and speaking down to people like that when they are helping you out.

What's actually the issue? Your able to added each image and define a height for each image on the secondary node icons.

For example I just applied 96px square images so I increase the padding and defined the height for each node as you can see in the example.

Code: 
.node .nodeText {padding-left: 100px;}

.nodeList .node_2 .nodeText{ background: url("@imagePath/xenforo/icons/node2.png") no-repeat scroll left transparent;
height: 96px;}   
.nodeList .node_3 .nodeText{ background: url("@imagePath/xenforo/icons/node3.png") no-repeat scroll left transparent;
height: 96px;}   
.nodeList .node_7 .nodeText{ background: url("@imagePath/xenforo/icons/node7.png") no-repeat scroll left transparent;
height: 96px;}

The output of that is as follows.
Screenshot_13.webp
 
Upvote 0 Downvote
Shelley said:
What's actually the issue?
Click to expand...
The issue is that, when I implemented this code on 1.2:
Code: 
/* custom status icons */

/* node id 2*/
.node .node_2 .forumNodeInfo .nodeIcon, .node .node_2 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-2.png");
}
.node .node_2 .forumNodeInfo.unread .nodeIcon, .node .node_2 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-2.png");
}
/* node id 7*/
.node .node_7 .forumNodeInfo .nodeIcon, .node .node_7 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
}
.node .node_7 .forumNodeInfo.unread .nodeIcon, .node .node_7 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
}
/* node id 15*/
.node .node_15 .forumNodeInfo .nodeIcon, .node .node_15 .categoryForumNodeInfo .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-read-15.png");
}
.node .node_15 .forumNodeInfo.unread .nodeIcon, .node .node_15 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("@imagePath/xenforo/widgets/forum-unread-15.png");
}
The unread icons looks "fine" but the read icons are cut off from the container - to the left, so this icon:
forum-unread-45.png.webp
Looks like it's broke in half - only the right side of that image is visible.
Your able to added each image and define a height for each image on the secondary node icons.
Click to expand...
But I don't want secondary node icons...!
The output of that is as follows.
View attachment 59493
Click to expand...
I know that. It's not the result I want.
 
Upvote 0 Downvote
Carlos said:
Yes, I am being serious.

No, it's not. It'll just "add" one more image next to the icons. I want to replace the current icons with custom ones, which is what this does:

I know that.
Click to expand...

The below works just fine on my 1.2.x series forms (3 of them)
Code: 
.node.node_83 .forumNodeInfo .nodeIcon, .node.node_83 .categoryForumNodeInfo .nodeIcon {
    background-image: url("images/nodes/aprilia.png");
    background-position: 0px 0px;
    opacity: 0.4;
}
.node.node_73 .forumNodeInfo.unread .nodeIcon, .node.node_83 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("images/nodes/aprilia.png");
    background-position: 0px 0px;
}

/* BMW Bikes */
.node.node_55 .forumNodeInfo .nodeIcon, .node.node_55 .categoryForumNodeInfo .nodeIcon {
    background-image: url("images/nodes/bmw.png");
    background-position: 0px 0px;
    opacity: 0.4;
}
.node.node_55 .forumNodeInfo.unread .nodeIcon, .node.node_55 .categoryForumNodeInfo.unread .nodeIcon {
    background-image: url("images/nodes/bmw.png");
    background-position: 0px 0px;
}

screenshot.webp

I have a separate entry that if they are unread changes the opacity to 1.0.

Are you using one of Arty's styles?
 
Upvote 0 Downvote
Could you post one of the read icons in your post your having issue with? It could be that the read icon is larger and is being cropped. I haven't tested this since I haven't got that TM installed but you could define the height of the read image/icon.
 
Upvote 0 Downvote
Chris Deeming said:
Why on earth would we think you want to replace your node icons when you linked to a thread specifically about adding secondary node icons?
Click to expand...
Because the person had the same issue as I do. Only different circumstances.
Shelley said:
could you post one of the read icons in your post your having issue with? It could be that the read icon is larger and is being cropped. I haven't tested this since I haven't got that TM installed but you could define the height of the read image/icon.
Click to expand...
I know, I did that. But it didn't go as planned. So, now I'm looking at this new code by Perry in 5-8 hours from now. I'm sleepy.
 
Upvote 0 Downvote
Carlos said:
Thanks @Tracy Perry, that's EXACTLY what I wanted my icons to be positioned. I'll take a look at this - once I wake up from my sleep. Me go to sleep now! :)
Click to expand...
Don't thank me... I got the code from some of @Shelley's postings with help from @Brogan and a few others. @Shelley is one of the CSS guru's when it comes to styling and if you clearly explain what is wanted she can usually figure it out (or already has!).
 
Upvote 0 Downvote
Tracy Perry said:
Don't thank me... I got the code from some of @Shelley's postings with help from @Brogan and a few others. @Shelley is one of the CSS guru's when it comes to styling and if you clearly explain what is wanted she can usually figure it out (or already has!).
Click to expand...
Now I'm embarrassed! :oops: I'm sorry, @Shelley if you felt hurt or anything like that. Not intended. :(
Tracy Perry said:
Are you using one of Arty's styles?
Click to expand...
Just caught this. Yes. I am. The latest version of one of his skins. Yes.
 
Upvote 0 Downvote
You must log in or register to reply here.

Similar threads

Mr Lucky
  • Solved
XF 2.3 Font Awesome icons in CSS with 2.3
Replies
1
Views
141
Chris D
Chris D
J
  • Question Question
XF 2.2 Category Icons confusion
Replies
2
Views
485
Jeroxia
J
Hensmon
  • Question Question
XF 2.2 Having troubles changing my site icons
Replies
0
Views
91
Hensmon
Hensmon
A
XF 2 I need some changes by css and html / paid or free
Replies
1
Views
482
Vercingetorix
Vercingetorix
K
Additional icons to include in sprites are not removed
Replies
0
Views
99
kick
K
Top Bottom