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)

 

[Tracy]

Humm it seems that Xenforo does not give an ID to each individual "board" in the layout.

It actually does if talking about each forum node. You simply have to address it (typically) at the template level, which is something that they apparently not wanting to do as it's too complicated.
I know that this used to work if using FA icons (for XF 2.1)

.node.node--forum.node--id5 i:before{content:'\f5ce';}

in your extra.less template.
or if you are wanting to do multiple nodes and tweaks

.node--id11, .node--id12, .node--id13 {
    &.node--forum.node--read .node-icon i:before {
        /*properties*/
    }
}

should work. You have to address the read/unread icons usually in some manner.

 

[TwitchisMental]

It actually does if talking about each forum node. You simply have to address it (typically) at the template level, which is something that they apparently not wanting to do as it's too complicated.
I know that this used to work if using FA icons (for XF 2.1)

.node.node--forum.node--id5 i:before{content:'\f5ce';}

in your extra.less template.
or if you are wanting to do multiple nodes and tweaks

.node--id11, .node--id12, .node--id13 {
    &.node--forum.node--read .node-icon i:before {
        /*properties*/
    }
}

should work. You have to address the read/unread icons usually in some manner.

Well looky there, the more ya know haha. Thank you for the information .

This would be the easiest and cheapest(free) way of doing what you need to do.

 

[kensonplays]

easiest

Maybe for some of ya'll.

Not for me. I can't even do extremely basic layouts with basic html/css. I need a visual GUI to build things.

 

[Tracy]

This would be the easiest and cheapest(free) way of doing what you need to do.

Yeah, but I think he is looking for an add-on (preferably free) to do it since there is no apparent desire to learn how to do simple stuff like this in templating.

Using the templating system, you can do all kinds of customizations (and keep them separated) very easily.



and in the primary extra.less (for each style you use) you simply call those templates like

{{ include('aw_prefixes.less') }} 
{{ include('aw_navbar.less') }} 
{{ include('aw_banners.less') }} 
{{ include('aw_convo_change.less')}}
{{ include('aw_xfrm_grid_layout')}}

These are style specific modifications, they don't carry across unless you use a base "parent" style and then create your others under it.

Sample of that aw_banners.less

.userBanner {
    font-size: 70%;
}

.label
{
    &:after
    {
        padding-left: 4px;
        .m-faBase();
        border-radius:20px;
    }  
    &:before
    {
        padding-right: 4px;
        .m-faBase();
        border-radius:20px;
    }

    &.label--
    {      
/* User Banner custom configs */
      
        &site_owner:before
        {
            .m-faContent(@fa-var-telescope);
            font-size: 15px;
            color: #f6a17b;
        }
        &site_member:before
        {
            .m-faContent(@fa-var-meteor);
        }
        &site_member5:before
        {
            .m-faContent(@fa-var-moon-stars);
            font-size: 15px;
            color: #f7bd61;
        }
      
        &charter_member:before
        {
            .m-faContent(@fa-var-galaxy);
            color: #710245;
            font-size:15px;
        }
      
    }
}

/* User Banner modifications */
.label.label--site_owner {
    color: #fff;
    background: #720f94;
    border-color: #b786cd;
    border-radius:20px;
    border-style: ridge;
    border-width: medium;
}
.label.label--site_member {
    color: #050505;
    background: #a47909;
    border-color: #ce9521;
    border-radius:20px;
    border-style: ridge;
    border-width: medium;
}
.label.label--site_member5 {
    color: #f3efef;
    background: #223d89;
    border-color: #403b9d;
    border-radius:20px;
    border-style: ridge;
    border-width: medium;
}
.label.label--charter_member {
    background: #908ffa;
    color: #090974;
    border-color: #1104ea;
    border-color: #1104ea;
    border-radius:20px;
    border-style: ridge;
    border-width: medium;
}
/* End User Banner modifications */

And it ends up with banners like this - all for free and no need of a 3rd party add-on interfering.



Or the XFRM grid layout template modification, which gives you this for your resources instead of list



Instead of this

 

[kensonplays]

and in the primary extra.less (for each style you use) you simply call those templates like

{{ include('aw_prefixes.less') }}
{{ include('aw_navbar.less') }}
{{ include('aw_banners.less') }}
{{ include('aw_convo_change.less')}}
{{ include('aw_xfrm_grid_layout')}}

I did not know you could do that. That seems basic enough to copy and paste and separate the stuff I had coded years ago but reused (for my badges) without needing to learn coding. Just copy, paste, change class name and add to the role. Done. That's about the most advanced I can do.

But as for building a page with text and images aligned in very specific ways, that's a bit out of my skillset.

 

[Tracy]

But as for building a page with text and images aligned in very specific ways, that's a bit out of my skillset.

If using simple HTML for a page (not pulling data in from XF) then it's not hard to do. There are plenty of online HTML editors that can do that for you and you simply cut/paste into an XF page node.
You will have to upload images manually and make sure your HTML points to them.

 

[kensonplays]

If using simple HTML for a page (not pulling data in from XF) then it's not hard to do. There are plenty of online HTML editors that can do that for you and you simply cut/paste into an XF page node.
You will have to upload images manually and make sure your HTML points to them.

I've looked into a few like Nicepage, Teleporthq, and webflow, they don't seem to offer much on their free plans. Nicepage is limited to 5 pages on free. I could not understand teleporthq's UI. I'm not sure what webflow means by "50 CMS items" does that mean elements on a page? or 50 pages? Tried BlueGriffon and it seemed . . . extremely basic. I'm now checking out CoffeeCup, but its only a 7 day trial for their designer and it seems like its somewhat out of date. Latest "bootstrap" they have is 4, latest is 5 I think?

 

[Tracy]

HTML5 Editor - Free Online Content Composer

Free online web content composer with HTML source editor and rich text WYSIWYG editor preview. It works without downloading and installing any program.

html5-editor.net

Free online HTML editor - onlinehtmleditor.dev

Free online HTML editor with feature-rich WYSIWYG Editor powered by CKEditor. Get the source code of the content immediately.

onlinehtmleditor.dev

Free Online HTML Editor and Cleaner - HTML-Online.com

This free online WYSIWYG HTML editor allows you edit your source code without downloading and installing any application. Guaranteed the best visual webpage builder with AI integration

html-online.com

Now, if you want a real fancy GUI interface with all kinds of neat buttons to push to create your content... that may be out of the free realm.

 

[Cedric]

I also want to add @kensonplays that you don’t need to worry about the extra.less to be too long. You can add A LOT in that template.

 

[kensonplays]

I also want to add @kensonplays that you don’t need to worry about the extra.less to be too long. You can add A LOT in that template.

True, but more organized.

HTML5 Editor - Free Online Content Composer

Free online web content composer with HTML source editor and rich text WYSIWYG editor preview. It works without downloading and installing any program.

html5-editor.net

Free online HTML editor - onlinehtmleditor.dev

Free online HTML editor with feature-rich WYSIWYG Editor powered by CKEditor. Get the source code of the content immediately.

onlinehtmleditor.dev

Free Online HTML Editor and Cleaner - HTML-Online.com

This free online WYSIWYG HTML editor allows you edit your source code without downloading and installing any application. Guaranteed the best visual webpage builder with AI integration

html-online.com

Now, if you want a real fancy GUI interface with all kinds of neat buttons to push to create your content... that may be out of the free realm.

Yea, I'd prefer an actual visual builder. I think I remember using Adobe Dreamweaver over 10 years ago, haven't touched adobe since CS6, so I dunno how well the apps run these days. (never used CC, use alternatives now)

 

[Tyrsson]

Dreamweaver is garbage and does nothing but pollute the internet.

 

[kensonplays]

Dreamweaver is garbage and does nothing but pollute the internet.

Yea, I haven't used it in over 10 years, like I said above. I just remember that I DID use it a decade ago. Haven't used any Adobe software since CS6. CC is not worth it to me.

Affinity Photo is a one-time pay alternative. I got their version of Photoshop, Illustrator, and a publishing software for $100 lifetime access.
Davinci Resolve is one of the best alternatives to Premiere. I'm all set there to avoid Adobe's insane pricing.

 

[Tyrsson]

For images I usually use GIMP.

 

[kensonplays]

For images I usually use GIMP.

Tried it, didn't care for the UI personally. Affinity Photo can almost replicate Photoshop's UI almost exactly.