• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.4 End user selected custom CSS

#1
Hello.

I have noticed that a few sites that use Xenforo for their forums allow their premium users to select between a few predefined custom css options for their post stylings.

An example I will use is Squidboards.



In this image you can see that these two premium users have selected two different defined settings for their css.

My question is how would I go about implementing something similar? Would I use custom user fields somehow? Is there a resource I have not seen yet?
 
#6
@Brogan First off I'd just like to say thanks for all the help you've given to me already. It got me really far so far.

I have one more question for this thread.

How would I contain these CSS changes on a per user basis? I currently have a custom user field that allows the user to select several options. My current setup applies a stylesheet modification when the user selects an option HOWEVER this option is only shown to the user that chose it and is not publicly viewable.

(The current test CSS changes backgrounds to pink)


These two users do not have the option selected. What is currently happening is all backgrounds are turning pink.

What I am aiming for is for this change to be made only on accounts that have selected the option in the user field I created.

I basically feel like I am missing a step somewhere. I tried following or reading through the message_user_info template because I felt like it is somewhat similar in a sense that it pulls data on a per user basis.
At this point if anyone would want to help me on a freelance basis I wouldn't mind. I just need this change implemented as swiftly as possible.
 
#8
I'm currently using this

Code:
<xen:if is="{$visitor.customFields.premiumfield} == 'pink'">
<xen:require css="premium1.css" />
<xen:else />
</xen:if>
and I was placing it into the message template.

I feel like the line
Code:
<xen:if is="{$visitor.customFields.premiumfield} == 'pink'">
Should probably be replaced as from what your guide says

Code:
<xen:if is="{$visitor.customFields.field_id}">
This content will show to members who have completed the custom user field
</xen:if>
And what I am wanting is to display the css only on people who have completed the field to all users.