XF 1.x Node layout with unique icons

Commodore

Registered
What a fantastic job on the Frag Zone style.

Now to lay out the nodes, I'd like it to look like this.

1. Unique forum node icons.
2. Subforums listed underneath, not in the drag down menu.
3. Description underneath would be great.

This is for the game DDO. There are 4 other games/guild chapters I am going to build for.





Next up is: Roster, Raid Calendar (I'd love for it to do signups but options are thin -- I'm still hoping you guys can add a calendar option to the Roster -- then guilds would be able to use it as the alternative to ShivTR and Enjin!!), Applications (I need separate applications for each game/chapter), Front page/portal software.

What do you recommend (that would work with this style) and more importantly should I do it in a certain order?

Thanks for everything - you guys are THE BEST. :)
 

Commodore

Registered
Where do I place this code?

Do i ftp upload the images to my server?

/* custom status icons */
.node.node_7 .forumNodeInfo .nodeIcon, .node.node_7 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-read-7.png");
background-position: 0px 0px;
}
.node.node_7 .forumNodeInfo.unread .nodeIcon, .node.node_7 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/forum-unread-7.png");
background-position: 0px 0px;
}
 

Russ

Pixel Exit Staff
Sorry, any and all CSS code we give you will go inside the EXTRA.CSS template unless we tell you other wise.

Access that: Appearance -> Templates -> extra.css
 

Commodore

Registered
Cool. And I create read and unread icons and name them forum-read-7.png and forum-unread-7.png ?

How do I know I'm attaching the right icon to the right section or node?
 

Commodore

Registered
Images are uploaded in the xenforo/widgets folder but images doesnt show... Here's the code I used in the EXTRA.css section

/* custom status icons */
.node.node_4 .forumNodeInfo .nodeIcon, .node.node_4 .categoryForumNodeInfo .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/tyrstavern-read-4.png");
background-position: 0px 0px;
}
.node.node_4 .forumNodeInfo.unread .nodeIcon, .node.node_4 .categoryForumNodeInfo.unread .nodeIcon {
background-image: url("@imagePath/xenforo/widgets/tyrstavern-unread-4.png");
background-position: 0px 0px;
}
 

Commodore

Registered
Im totally confused. I purchased [XFA] Nodes Icon Tweak which is highly reviewed since we have a lot of custom icons.

Sadly Im still running into troubles.

This is how the icon to the Tyrs Tavern is supposed to look.



This is what I get (no matter what I change the size of the icon too, I get the below result):

 

OUTL4W

Customer
Try adding:
background-size: 75px 65px;

Below "background-position" to the node in your extra.css

You may have to adjust the px to to suit your needs.
 

Commodore

Registered
Those images above arent from the code though, they are from the [XFA] Nodes Icon Tweak add on.

Had NO luck with the code...
 

Russ

Pixel Exit Staff
Go here:

Style Properties -> Node Icons

uncheck the "Enable Font Awesome Icons"

Also you could get your icon to fit in the space automatically by adding this to your extra.css:

Code:
.nodeIcon { background-size: cover !important;}
 

Russ

Pixel Exit Staff
As a possible alternative, how could I get a banner atop the subforums page?

Such as like what Paradox does here?

https://forum.paradoxplaza.com/forum/index.php?forums/forum-help-issues-rules.600/

Not sure which part you're referring too, but he has notices which you can configure to display on certain pages. Or he also has some sub-nodes which are pages which show above the thread list.


Final icon might be a bit smaller but I want as much detail in the image as possible
I'd need to see it live to see what's going on with it.
 

Pre-Sale Questions

If you have any questions or concerns you want to ask before you make a purchase don't hesitate to use one of our multiple support channels for your convenience.