Custom Node Icons W/o CSS?

[kensonplays]

I see the custom icons here, and I want to do something similar. I found this addon ( https://xenforo.com/community/resources/cv6-node-icons-tools.5565/ ). But it seems to be abandoned, and breaks the design when it is enabled:



Once I uninstall/deactivate it, looks fine:



Any ideas on how to set this up? There is a paid addon for $10, but I can't afford that atm. (Just got DB Credits and that emptied the community funds account for another couple weeks until next bit arrives)

 

[Cory]

I think this might be better suited in Web and Forum Support, so I'm going to move it there.

 

[kensonplays]

I think this might be better suited in Web and Forum Support, so I'm going to move it there.

I wasn't sure since its also technically about design, so both work ig? lol

 

[Cory]

I know floats are sometimes not the best, but you can probably use float: right; on the expand/collapse buttons and it may resolve the issue the add-on is causing.

This is just me speaking from CSS experience, I know nothing about coding on Xenforo.

 

[kensonplays]

I know floats are sometimes not the best, but you can probably use float: right; on the expand/collapse buttons and it may resolve the issue the add-on is causing.

This is just me speaking from CSS experience, I know nothing about coding on Xenforo.

Not sure the right place to do it. I used a guide to copy/paste the code in for the toggles.

 

[Tracy]

Any ideas on how to set this up? There is a paid addon for $10, but I can't afford that atm. (Just got DB Credits and that emptied the community funds account for another couple weeks until next bit arrives)

Did you contemplate doing a search over on the XF site?
Seems this may resolve your issue.

[cXF] Change default FA node icon

Would you like to change your default Font Awesome node icons like this? < read node > < unread node > To change a single node icon with a different Font Awesome icon add this code to your extra.less template: Change X with your node...

xenforo.com

To get the sub-forums to do the same, you may have to check the CSS for those and modify the examples.

 

[kensonplays]

Did you contemplate doing a search over on the XF site?
Seems this may resolve your issue.

[cXF] Change default FA node icon

Would you like to change your default Font Awesome node icons like this? < read node > < unread node > To change a single node icon with a different Font Awesome icon add this code to your extra.less template: Change X with your node...

xenforo.com

To get the sub-forums to do the same, you may have to check the CSS for those and modify the examples.

Like I said, I'm looking for other, non-manual-code options. That first addon in the OP is unmaintained, and the other is 20/yr it seems, which I cannot currently afford due to no job. If I had a regular income coming in, sure, I'd buy the addon no problem to make things easy.

If that unmaintained free addon is the only available option, I may just leave the icons as default since my extra.less is already getting somewhat large, IMO, with custom badge icons.

 

[Cory]

Not sure the right place to do it. I used a guide to copy/paste the code in for the toggles.

Should be as simple as adding this to your CSS:

.collapseTrigger {
float: right;
}

 

[kensonplays]

Should be as simple as adding this to your CSS:

.collapseTrigger {
float: right;
}

Just tried that, in both places that ".collapseTrigger" exist, no change.

// ------------------------------
// Collapsible Categories Start -
// ------------------------------
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        float: right;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}

.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}

/* Node Collapse */
.block--category
{
    .collapseTrigger
    {
        opacity: 0.5;
        transition: opacity 0.3s;
        margin-right: 10px;
        float: right;
        &.is-active:before
        {
            content: "\f205";
            transform: scale(-1, 1);
            margin-right: -8px;
        }
        &:before
        {
            content: "\f205";
            font-size: 80%;
        }
    }
    .block-container:hover .collapseTrigger
    {
        opacity: 1;
    }
}
.collapsible-nodes
{
        .block-header
        {
            display: flex;
        }
        .block-header--left
        {
            margin-right: auto;
            max-width: 100%;
        }
}
// ----------------------------
// END COLLAPSIBLE CATEGORIES -
// ----------------------------

 

[Cory]

Here's what worked for me using my web developer tools:

h2.block-header > div.block-header--left {
display: flex;
width: 100%;
}

 

[kensonplays]

Here's what worked for me using my web developer tools:

h2.block-header > div.block-header--left {
display: flex;
width: 100%;
}

That worked! I can't find a "dinosaur" icon though for a board in fontawesome, even tho there are unicode ones. :/

 

[Cory]

Found this with a Google search: https://www.dafont.com/dinosaur-icons.font

 

[kensonplays]

Found this with a Google search: https://www.dafont.com/dinosaur-icons.font

Might work temporarily, tho it won't match the rest of the icons. Oh well. haha

If only XF 2.3 or 3.0 could get a v6 license. xD We'll see. There is a dinosaur icon in V6 Pro.

 

[SoluDome]

I see the custom icons here, and I want to do something similar. I found this addon ( https://xenforo.com/community/resources/cv6-node-icons-tools.5565/ ). But it seems to be abandoned, and breaks the design when it is enabled:

I see you never reported it as a bug on forum, but it seems more like your theme feature is conflicting with addon feature of collapsing categories. I still do maintain it, but can only fix if the issue is being reported, can't don't anything about this if it is never reported.

 

[Tracy]

Like I said, I'm looking for other, non-manual-code options. That first addon in the OP is unmaintained, and the other is 20/yr it seems, which I cannot currently afford due to no job.

Ergo the reason to step out on that limb and start learning how to do simple CSS and template edits in the script. It's not that hard to do actually. And if one doesn't have the spare funds to expend, then learning how to do what you need comes in very handy.

As for FA 6.0 in XF... doubt you will see it... XF is "grandfathered" in (sorta) for the 5.x line under their license, and the 6.x licensing requirements are totally different.

Now, as far as the add-on you linked to.. pretty sure July 2023 was not that long ago when it was updated. I've seen a couple of times that the XF "unmaintained" function incorrectly marked a resource as such.

This add-on clearly states in the description

This AddOn works with the default Theme, if you change essential parts of the theme in your own styling, there may be changes to the template mods necessary. If it not works out of the box with your style, please drop me a conversation

 

[kensonplays]

I see you never reported it as a bug on forum, but it seems more like your theme feature is conflicting with addon feature of collapsing categories. I still do maintain it, but can only fix if the issue is being reported, can't don't anything about this if it is never reported.

It's the default XF theme. Just with a custom background and colors on the UI. Otherwise it's a vanilla XF theme. (and the collapsible stuff)

As for FA 6.0 in XF... doubt you will see it... XF is "grandfathered" in (sorta) for the 5.x line under their license, and the 6.x licensing requirements are totally different.

Once we launch the business part of the hosting, we may get a FA6 multisite license or something comparable, then my coder friend can probs do tweaks for FA6.

 

[Tracy]

then my coder friend can probs do tweaks for FA6

To replace the built in is a lot more involved than you think.
And the point is still valid.. you would do yourself a benefit to start learning how to do things that can be done manually instead of needing an add-on.

 

[kensonplays]

To replace the built in is a lot more involved than you think.

My friend can do it most likely. Been programming for 20 years he says.

 

[Tracy]

My friend can do it most likely. Been programming for 20 years he says.

Rotsa Ruck (Scooby Doo™) ... even the XF developers commented it's not easy as ingrained as it is..... and once you start modifying the core code, your "easy upgrades" no longer are.

 

[TwitchisMental]

Humm it seems that Xenforo does not give an ID to each individual "board" in the layout. So doing it just via CSS doesn't seem to be possible unlike on SMF.

IF XenForo has a variable or something for each board ID though.. You could make a small template edit to attach the board ID to each individual board and then be able to use CSS to change the icons.

For reference - https://www.simplemachines.org/community/index.php?topic=576809

Maybe someone with more XenForo knowledge can confirm if it has some sort of variable to identify each board.