Add XF style colour variable id next to the colours they're associated with in the style properties

[RobinHood]

It would be helpful any colours in the style properties that have associated xf variables had the variable name listed next to them so it's easier to find them and understand what other colours may be impacted due to a colour change, as many colours further down the tree reference these variables, but they're never listed anywhere (as far as I can tell).

It may seem obvious to theme developers who work with themes a lot, but this change could help make it easier for admins to style their own a bit easier.

This would also make these colour variables searchable in the admin search bar.

Something like this:

 

[DeltaHF]

Please, please add this.

I've been a web developer and forum owner for 18 years and I've spent the last 15 minutes trying figure out how to reference the global link color defined in the style properties.

And no, it's not @xf-linkColor... I'm still trying to figure it out.

 

[Brad Padgett]

I completely agree with this. The only reason I even knew the name of the color palette variables is because I used to use UI.X 2

Which is as an example:

@xf-paletteColor1 -> 2-> 3 -> and so forth

Later when I wasn't using UI.X I realized that it did not show where the color palette was. Was kind of taken back by that find.

 

[Russ]

Please, please add this.

I've been a web developer and forum owner for 18 years and I've spent the last 15 minutes trying figure out how to reference the global link color defined in the style properties.

And no, it's not @xf-linkColor... I'm still trying to figure it out.

But it is that, if you call that in say a background/border color it'll work.

If you guys enable development mode: https://xenforo.com/xf2-docs/dev/development-tools/ you'll see the names of the properties.

Additionally as a weird workaround if you inspect the element you can actually see the property name:




I'm guessing they just hide the names normally to clean up the interface as a lot of forum admins won't need that extra info.

 

[DeltaHF]

But it is that, if you call that in say a background/border color it'll work.

Oh... thanks for explaining. A value changing itself based on context — when that context is not clear — is extremely confusing and counter-intuitive, but I digress.

If you guys enable development mode: https://xenforo.com/xf2-docs/dev/development-tools/ you'll see the names of the properties.

Ah, thanks again.

But what is "link (20000)" and "linkHover (20100)" supposed to mean? How would you reference that in a LESS template?

 

[Dad.]

But it is that, if you call that in say a background/border color it'll work.

If you guys enable development mode: https://xenforo.com/xf2-docs/dev/development-tools/ you'll see the names of the properties.

Additionally as a weird workaround if you inspect the element you can actually see the property name:

View attachment 196564


I'm guessing they just hide the names normally to clean up the interface as a lot of forum admins won't need that extra info.

I use this tactic myself, it comes in handy on other software situations as well, this platform and others.

 

[Russ]

Oh... thanks for explaining. A value changing itself based on context — when that context is not clear — is extremely confusing and counter-intuitive, but I digress.


Ah, thanks again.

But what is "link (20000)" and "linkHover (20100)" supposed to mean? How would you reference that in a LESS template?

View attachment 196565

By default "Links" calls @xf-linkColor. If you want to reference that specific property, you should use:

@xf-link--color
@xf-link--background-color
@xf-link--extra

But... ideally, you should be calling the color in properties from the Basic Colors primarily, then Color palette as a background. Instead of editing your color there, you should edit it in Basic Colors. Although we're getting slightly off topic, further help I'd suggest making a new thread.