XF 2.1 Use custom field values to control CSS color properties in a style?

[SFFNetwork]

I have an idea whereby I can allow users to enter a color into a custom user field, and then feed this color into css statements, which will consequently give elements (of my choice) the color specified by the user. In this way I can allow users to create basic "custom" themes while ensuring that any such themes remain usable/accessible.

Creating the custom field and referencing it in a XenForo template is simple enough, but I'm hitting a roadblock since I know that XF variables can't be referenced in CSS or LESS. I feel that there must be some clever way to achieve this end result, but I haven't been able to come up with it, and other examples of folks using custom fields to control styles focused more on adding/removing sections with if statements, rather than changing how elements are styled with CSS. For instance:

<xf:if is="{$user.Profile.custom_fields.showcontentbool}">

    <- content goes here ->

</xf:if>

Is what I'm trying to do possible, or is the behavior not possible with custom user fields and template code alone?

 

[SFFNetwork]

For posterity: I was able to solve for this by putting a <style> tag in the PAGE_CONTAINER template, and then insert the custom field within the CSS inside the tag:

  <style>
  .relevantClass {
    background-color: {$xf.visitor.Profile.custom_fields.custom_value};
  }
  </style>

Helpfully, XenForo allows you to use color as a value match requirement for a user custom field, and even previews the color inline for users, so this presents as a pretty nice experience. Even so, I don't find this ideal since it separates the style from other style code and buries it in the content structure. But given this is a one-off for a specific theme and purpose, we'll live with it.

EDIT: @Brogan's comments below are good context; I would suggest that anyone do this at a minimum consider containing any of the CSS in a dedicated template and then include this in PAGE_CONTAINER.

 

[Paul B]

I don't know how much code you have but to keep things neater and simpler you could create a custom template and then edit the PAGE_CONTAINER template with <xf:include template="custom_template" />.

Then you would just add all your custom code to the custom_template template.

You could even package it as an 'add-on' and do a template modification, which would avoid editing the core template.

 

[SFFNetwork]

@Brogan It's not very many lines of code (it's just a couple CSS statements essentially), but I will indeed put that within a custom template just to keep things clean.

I have zero experience with add-on development, so probably won't go through the hassle there, though I can appreciate the benefit of keeping the template immaculate by treating this as a modification.

 

[Wildcat Media]

I have zero experience with add-on development, so probably won't go through the hassle there, though I can appreciate the benefit of keeping the template immaculate by treating this as a modification.

It's actually quite simple. My coding days have long passed, but I was able to create my own add-ons for a few upgrade projects I was working on. Essentially you create the add-on at the command line, create your template modification (using a find/replace method) and tie it to your new add-on via a drop-down selection at the bottom of the template modification editor, then build the release to pack it all up into a zip file. It does require working in development mode, but otherwise I've found that future upgrades go much smoother when I don't have to worry about having edited templates directly. And the beauty is that if something ends up being incompatible, you can disable your add-on or disable your template modification without needing to be in development mode.

Once I'm done with my backlog of projects, I may write this up as a Resource here.