XF 1.2 Adding individual category icons to nodes?
- Thread starter Carlos
- Start date
Shelley
Well-known member
I didn't have to apply an opacity to the unread your probably safe removing that. Though backup that snippet if you do remove it.
You'll notice the link forum is showing at full opacity but with no opacity added in the css.
Code:
.node.node_1 .nodeText { margin: 25px 270px 10px 56px; }
.node.node_1 .nodeLastPost {margin-top: 25px;}
.node.node_1 .tinyIcon {margin-top: 15px;}
.node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/icons/node2.png");
background-position: 0px 0px;
opacity: 0.5;
height: 72px;
width: 72px; }
.node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/icons/node2.png");
background-position: 0px 0px;
height: 72px;
width: 72px; }
.node.node_21 .forumNodeInfo .nodeIcon, .node.node_21 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/icons/node3.png");
background-position: 0px 0px;
opacity: 0.5;
height: 72px;
width: 72px; }
.node.node_21 .forumNodeInfo.unread .nodeIcon, .node.node_21 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/icons/node3.png");
background-position: 0px 0px;
height: 72px;
width: 72px; }
.node.node_31 .linkNodeInfo .nodeIcon, .node.node_31 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/icons/node7.png");
background-position: 0px 0px;
height: 72px;
width: 72px; }
.node.node_31 .linkNodeInfo.unread .nodeIcon, .node.node_31 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/icons/node7.png");
background-position: 0px 0px;
height: 72px;
width: 72px; }
TPerry
Well-known member
@Shelley, how are you getting it to dim for the unread (I'm using the same icon for both as you show). I know that on one of my forums I moved the opacity 1.0 segment into my jsa_nodes.css and it wasn't' being picked up - and the nodes were not highlighted even though they had new posts in them (the new indicator was working).I didn't have to apply an opacity to the unread your probably safe removing that. Though backup that snippet if you do remove it.
You'll notice the link forum is showing at full opacity but with no opacity added in the css.
Oooohh... wait... maybe it was because I had opacity 0.4 defined for the read ones... as I run off to modify the .CSS to check!
EDIT:
Ooooh...oooh... it works... now I can modify the opacity out of all of them!!
Shelley
Well-known member
I always had opacity only on the read icon css in extra and didn't ever apply an opacity on unread as it automatically shows at full opacity.
Carlos
Well-known member
@Shelley? Can you tell me what's the value for "Link" forums? This is what I have for the first thing you see at http://www.codforums.com
That's for this one: http://www.codforums.com/link-forums/register-today-at-call-of-duty-forums.38/ (Don't click on it, it'll just redirect you to the Registration page.)
But, when I entered it and saved it to EXTRA.css, it wouldn't work.
Code:
.node.node_38 .forumNodeInfo .nodeIcon, .node.node_38 .categoryForumNodeInfo .nodeIcon {
background-image: url("http://www.codforums.com/ForumIcons/forum-read-38.png");
background-position: 0px 0px;
opacity: 0.9;
}
.node.node_38 .forumNodeInfo.unread .nodeIcon, .node.node_38 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("http://www.codforums.com/ForumIcons/forum-read-38.png");
background-position: 0px 0px;
}That's for this one: http://www.codforums.com/link-forums/register-today-at-call-of-duty-forums.38/ (Don't click on it, it'll just redirect you to the Registration page.)
But, when I entered it and saved it to EXTRA.css, it wouldn't work.
Shelley
Well-known member
That would be the following if your referring to the very first node.
Code:
.node.node_38 .linkNodeInfo .nodeIcon, .node.node_38 .linkNodeInfo .nodeIcon {
background-image: url("http://www.codforums.com/ForumIcons/forum-read-38.png");
background-position: 0px 0px;
}Shelley
Well-known member
Thank you, lady!
Easy thing to remember when applying them. If it's the following nodes the classes used are as follows
standard nodes - .forumNodeInfo
link nodes - .linkNodeInfo
Page Nodes - .pageNodeInfo
Adam Thomson
Member
so, where exactly would I add these parameters so I can use custom icons then is it within extra css? or somewhere else
is it within extra css? or somewhere else
TPerry
Well-known member
You can place them in the EXTRA.css, or do like I do in my EXTRA.css and include a node_icons.css template and then define them all in there (keeps the size of the EXTRA.css down so I don't have to scroll through so much).so, where exactly would I add these parameters so I can use custom icons then
Code:
<xen:include template="twd_nodes.css" />Shelley
Well-known member
Extra.css isn't EXTRA.Css if it doesn't involve scrolling for 5 minutes.
I agree that it involves more scrolling which is a con, but the positive aspect is that you have all your edits in one place rather than dotted around in different locations. I think if you keep it organized (something i tried to do) it isn't hard to locate stuff with the help of CTRL +F from your browser.
I will say though I must have lost tons of skin scrolling in the extra template.
Adam Thomson
Member
Adam Thomson
Member
So I was able to change for forum icon but when I use the following as described
As it appears it will add a small amount of spacing afterwords. I've only changed once node icon but I would like to keep the same spacing as the untouched icon (example attached).
Code:
.node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/icons/doom.png");
background-position: 0px 0px;
opacity: 0.5;
height: 72px;
width: 72px; }
.node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/icons/doom.png");
background-position: 0px 0px;
height: 72px;
width: 72px; }As it appears it will add a small amount of spacing afterwords. I've only changed once node icon but I would like to keep the same spacing as the untouched icon (example attached).
Shelley
Well-known member
So I was able to change for forum icon but when I use the following as described
Code:.node.node_2 .forumNodeInfo .nodeIcon, .node.node_2 .categoryForumNodeInfo .nodeIcon { background-image: url("@imagePath/xenforo/icons/doom.png"); background-position: 0px 0px; opacity: 0.5; height: 72px; width: 72px; } .node.node_2 .forumNodeInfo.unread .nodeIcon, .node.node_2 .categoryForumNodeInfo.unread .nodeIcon { background-image: url("@imagePath/xenforo/icons/doom.png"); background-position: 0px 0px; height: 72px; width: 72px; }
As it appears it will add a small amount of spacing afterwords. I've only changed once node icon but I would like to keep the same spacing as the untouched icon (example attached).
Looks like you'll have to adjust the width values. Set that up and insert the images proper width. I know it states that the image is 72px in width and height but the image doesn't look like it's 72px square is there excess transparent space within the image that is causing that?
Bionic Rooster
Well-known member
Markos
Well-known member
This works on XF 1.3? I don't know if is better to use this code or this addon, because i have many nodes...
TPerry
Well-known member
It works just fine on my Apple site, my Linux site and my motorcycle site. All 3 of those are running 1.3.3.
Markos
Well-known member
Tried this but nothing happens...i always see the old on/off icons :-(
TPerry
Well-known member
This typically indicates that either
A) You are doing it in the wrong style
B) You have some EXTRA.css code that is not terminated correctly somewhere above this code
It works if done correctly. I am using it on 4 different XenForo forums that I have.
Similar threads
