Creating custom prefix styling

[alternadiv]

Do you think there'd be any SEO or browser/OS compatibility issues if using an emoji instead of a FA icon? I'm thinking it depends on the browser/OS whether the page title would show the emoji or just the emoji code?

 

[Mindzipper]

I have a question. I didn't see it mentioned, but at first, I assumed I had to do this to each style which we have several. However, I did the edits to the master style template, and it worked on all styles.

My question is, during an upgrade, does the master style get overwritten anywhere? I still think it would be easier to re-do it if so, rather than editing each theme, but I'm not sure what the best approach is.

 

[Paul B]

The master style should never be edited as it is rebuilt during an upgrade.

To clarify, that is the core master style which is not normally available, and not just a regular parent style.

 

[Mindzipper]

The master style should never be edited as it is rebuilt during an upgrade.

To clarify, that is the core master style which is not normally available, and not just a regular parent style.

Makes sense. I have developer mode turned on. That's likely why I saw it.

Thanks

 

[Wildcat Media]

I created my changes as an add-on, so they get applied like changes to the master style. I may write this* up as a resource in the future, perhaps in autumn after my work and travel schedule calms down. (* It won't be specifically for the custom prefix styling, but just a guide to a really simple add-on that is easier to create than you'd think.)

 

[gldtn]

I know I'm late, but I'm just trying this out and it works. Just not with icons that have names separated with more than one hyphen. I get the same error above when they are used.

Edit: further investigating it, it seems like even some with 1 hyphen it says that the variable was not defined, maybe because it's not in Xenforo's fontawesome version

Icons that gave me problems:
vial-circle-check
vial-virus
flask-vial

 

[Wildcat Media]

If you go to the FontAwesome site and look up the version that XF uses, you can find out which icons it supports. (I'm not at a computer right now to see which version that is.}

 

[mjda]

If you go to the FontAwesome site and look up the version that XF uses, you can find out which icons it supports. (I'm not at a computer right now to see which version that is.}

5.15.3

Here is the Font Awesome 5 icon list: https://fontawesome.com/v5/search

But, FA does have a 5.15.4 (which is what that list is) so it's possible that list may include a few icons that aren't available in XF's version.

 

[Kevin]

Icons that gave me problems:
vial-circle-check
vial-virus
flask-vial

If you go to the FontAwesome site and look up the version that XF uses, you can find out which icons it supports. (I'm not at a computer right now to see which version that is.}

XF only supports up to FA5 for licensing reasons.

Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome

Search all the Version 5 icons and match your project with a look and feel that's just right. Better yet, try Font Awesome 6 with the all-new Sharp Solid icons.

fontawesome.com

Any icons, like vial-circle-check, that say they were introduced in a version higher than 5.x won't be found in the XF included version of FA.

 

[gldtn]

Thanks for the help guys!

 

[Automotive101]

for the out of the box prefix feature, when set up, how can it be set so to ensure a selection is made? i.e. alerts the user to a thread can not be posted till a selection is made ?

 

[Automotive101]

which are believe are set on this site as well, is this out of the box or an addon ?

 

[TPerry]

for the out of the box prefix feature, when set up, how can it be set so to ensure a selection is made? i.e. alerts the user to a thread can not be posted till a selection is made ?

You can set so that a prefix has to be chosen before the post can be submitted in each forum node definition.
You can also define a default prefix.



It is at the bottom of the area where you set up the main portion of the node itself.

 

[Automotive101]

thanks @TPerry

 

[Cicada]

not sure what might be up, but i cant get FA icons working

core_labels.less:

...
&.label--red { .m-labelVariation(white, #e20000); }
    &.label--green { .m-labelVariation(white, green); }
    &.label--olive { .m-labelVariation(white, olive); }
    &.label--lightGreen { .m-labelVariation(black, #ccf9c8, #bee8ba); }
    &.label--blue { .m-labelVariation(white, #0008e3); }
    &.label--royalBlue { .m-labelVariation(white, royalblue); }
    &.label--skyBlue { .m-labelVariation(white, #7cc3e0); }
    &.label--gray { .m-labelVariation(white, gray); }
    &.label--silver { .m-labelVariation(black, silver); }
    &.label--yellow { .m-labelVariation(black, #ffff91, #e6e687); }
    &.label--orange { .m-labelVariation(black, #ffcb00); }

    &.label--error { .m-labelVariation(#c84448, #fde9e9, #c84448); }
    &.label--dpfHousekeeping { .m-labelVariation(white, #ed952f); }
    &.label--dpfDevelopment { .m-labelVariation(white, #0744b5); }
}

extra.less:

/* #### Thread Prefixes #### */
.label
{
    &:before
    {
        padding-right: 4px;
        .m-faBase();
    }

    &.label--
    {
        &dpfHousekeeping:before
        {
            .m-faContent(@fa-wrench);
        }
    }
}

 

[kelle67]

@Cicada do you use the addon "Font Awesome Manager"?

 

[Jeremy P]

The correct variable would be @fa-var-wrench and not @fa-wrench.

 

[unproperlypropagated]

This worked great for me.
I'm not a big fan of the core prefixes palette.
Can I safely change those colour values too? Would the change be reflected on the prefix creation menu?

Also what is the third css parameters for? I saw some prefixes have 3 colours

 

[Old Nick]

Also what is the third css parameters for? I saw some prefixes have 3 colours

I forgot the order but background, text, border

 

[unproperlypropagated]

Ok thanks it's "font, background, border"
To answer the other question, they will change on front end but they will not on the create prefix page. I wonder what controls that, so i can make them match.

This is cos i don't want to remember css classes.