Creating custom prefix styling

[twdu]

It works.

I use it on my own site.

On 2.1.9?

 

[Paul B]

Yes.

General F1 Discussion

All discussion relating to the Formula One World Championship: past, present, and future.

cliptheapex.com

 

[twdu]

Yes.

General F1 Discussion

All discussion relating to the Formula One World Championship: past, present, and future.

cliptheapex.com

Do you mind trying the demo site?

 

[twdu]

Or the settings in this one

Create a XenForo demo

4c2d69c2dfdd710a.demo-xenforo.com

 

[twdu]

Yes.

General F1 Discussion

All discussion relating to the Formula One World Championship: past, present, and future.

cliptheapex.com

I was looking for the changes to be in the backend also. It is working. You just have to know it will only show in the front end. Thanks!

 

[Paul B]

The custom styling only applies on the front end.

The ACP only shows the master style - it can't show custom CSS from another style.

 

[btmgreg]

What would be the best way to create a gradient background for a prefix?

&.label--btmTabloid { .m-labelVariation(white, #ff8800); }

I've tried variations of the following, but it just breaks things

background: #466368;
background: linear-gradient(to right bottom, #648880, #293f50);

 

[btmgreg]

Any theories? Thanks

 

[Dixie McCall]

Nice instruction Brogan but this should be core XF in style properties or someone needs to create an addon to be able to style prefix. This is just too much work. Point and click is enormously helpful.

 

[Wildcat Media]

Is there any advantage to adding these into core_labels.less as opposed to extra.less? I have been adding my custom labels into the latter with no issues.

 

[Paul B]

You can use either approach - it's just fewer lines of code and easier to add when using the core template.

 

[Wildcat Media]

That's good. Since I use my custom colors in a few locations, I've created them as an add-on to insert into extra.less, but I could just as easily switch it to insert into core_labels.less safely, which would apply to any and all templates. Thanks!

 

[Paul B]

I have updated the less code to be err, less verbose.

 

[gogo]

I have updated the less code to be err, less verbose.

Does it also have an impact on loading speed?

 

[Black Tiger]

I'm curious to that too. I used Font Awesome as forum icons for my boards when I used IPB before, but it certainly had an impact on load speed.
Not sure if that is due to all the template css change I had to do (couple of lines for every icon) or the loading of the icons themselves.

 

[Paul B]

The updated code is more compact and syntactically correct but it will have zero effect on loading speed.

 

[Wildcat Media]

I used emoji for the thread prefixes, right in the prefix editor (which makes them easy to add). But I'm considering changing those to FontAwesome since I prefer it to look like a font vs. an image. That is something I can mess around with at a later date...

 

[Agentos]

How to fab icons?

 

[orex]

Aside from my imagination (and taste) am I also limited to adding an FA icon on custom colors only 'cause default prefix colors like blue breaks the page when adding an FA icon.

        &blue:before
        {
            .m-faContent(@fa-lightbulb);
        }

 

[CavySpirit]

What would be the best way to create a gradient background for a prefix?

&.label--btmTabloid { .m-labelVariation(white, #ff8800); }

I've tried variations of the following, but it just breaks things

background: #466368;
background: linear-gradient(to right bottom, #648880, #293f50);

Was there a solution for this?

I'm trying to do the same thing, create a gradient for a particular prefix. I'm having difficulty, also. I tried adding the css code after the label stuff here and in extra.less. Added !important. Doesn't want to pick it up.