Node layout with unique icons

[Commodore]

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.

 

[Russ]

To use unique font awesome icons:

https://pixelexit.com/threads/individual-node-icons.3305/#post-17433

For unique images:
https://xenforo.com/community/threads/custom-node-icons.99629/#post-945643

Which you'll need to disable Font Awesome Node icons by going to: Style Properties -> Node Icons, uncheck the enable font awesome node icons.

 

[Commodore]

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]

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]

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?

 

[Russ]

Easy way to tell the node #, when you're browsing a node (seeing all of the threads)

https://pixelexit.com/forums/general-discussion.98/

You see the .98 at the end? That's the node ID, so this node ID is 98

 

[Commodore]

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]

Strange... when I went back to extra.css... the code that i put in is gone.

 

[Russ]

Strange... when I went back to extra.css... the code that i put in is gone.

Make sure you're editing the correct style, that's a big mistake usually.

 

[Commodore]

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]

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]

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]

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:

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

 

[Commodore]

You nailed it! Thank you Russ

 

[Commodore]

Ok well when I went to a much bigger icon like I really want, it made this:

look like this:

 

[Commodore]

Final icon might be a bit smaller but I want as much detail in the image as possible

 

[Commodore]

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/

 

[Russ]

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.

 

[Commodore]

Here's the icons: http://tyrspaladium.com/index.php?forums/

Notice how the height/width is a fixed square. I want to be able to get some big icons in there. 150px at least.

 

[Commodore]

As for Paradox...

Here's their forum homepage: https://forum.paradoxplaza.com/forum/index.php?forums/

Notice once you click on a forum and it goes to the next page... the nice big banner over the forum sections advertising their games?

http://oi68.tinypic.com/2nw1k5v.jpg

Id like to do a guild banner/crest for each of our guild chapters there.