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

How Do You Use A Custom Userfield for Subheading and Selected Tab?

DRE

Well-known member
#1
I know how to create a customer user field but how do I add html color code b60000 one time only to the following 3 sections?

Style Properties/Building Blocks/Subheading/Background
Style Properties/Header and Navigation/Selected Tab/Background
Style Properties/Selected Tab Link/Hover State/Background

Selected Tab Background can be found in navigation.css

but I can't find the other two.

I know how to put them in an if condition but I don't know how to wrap them so that they show in the 3 areas above.

Code:
<xen:if is="{$visitor.customFields.background3}"> style="background: #{$visitor.customFields.background3};"</xen:if>
 

Jake Bunce

XenForo moderator
Staff member
#4
CSS can't be made conditional, but class names can. So in your HTML templates you would use code like this to conditionally name classes:

Code:
<div class="<xen:if is="{$visitor.customFields.backgroundclass}">{$visitor.customFields.backgroundclass}</xen:if>">

</div>
Then define that class in EXTRA.css.
 

DRE

Well-known member
#5
CSS can't be made conditional, but class names can. So in your HTML templates you would use code like this to conditionally name classes:

Code:
<div class="<xen:if is="{$visitor.customFields.backgroundclass}">{$visitor.customFields.backgroundclass}</xen:if>">
 
</div>
Then define that class in EXTRA.css.
So basically, I have to come up with a list of colors I'd want to use for the custom user field backgroundclass? For example, I create a Drop Down Selection User Field and have the following options:

Value: 3red
Title: Red
Value: 3blue
Title: Blue

The drop down box would show Red and Blue. The value is the name of the class defined in EXTRA.css right?

For example:

EXTRA.css
Code:
.3red
{
background-color: red;
}
.3blue
{
background-color: blue;
}
 

Jake Bunce

XenForo moderator
Staff member
#8
First make sure the class name is showing in the page source. If that is correct then load the style sheet and make sure the class definitions are there. If that is correct then it's probably a problem with your CSS.
 

DRE

Well-known member
#14
CSS can't be made conditional, but class names can. So in your HTML templates you would use code like this to conditionally name classes:

Code:
<div class="<xen:if is="{$visitor.customFields.backgroundclass}">{$visitor.customFields.backgroundclass}</xen:if>">
 
</div>
Then define that class in EXTRA.css.
Can a custom userfield go inside extra.css?
 

DRE

Well-known member
#15
CSS can't be made conditional, but class names can. So in your HTML templates you would use code like this to conditionally name classes:

Code:
<div class="<xen:if is="{$visitor.customFields.backgroundclass}">{$visitor.customFields.backgroundclass}</xen:if>">
 
</div>
Then define that class in EXTRA.css.
BTW I do see a conditional inside a CSS. I saw it in Anthony Parson's userbar addon.

I just need to put a custom userfield inside one.

For example:

Code:
/* Shift Visitor Links to Moderator Bar */
 
<xen:if is="@xfofUserbar">
#moderatorBar .adminLink
{
    float:left !important;
}
</xen:if>
@xfofUserbar is a custom style property.

How do I make a custom user style property with custom userfields?
 

Jake Bunce

XenForo moderator
Staff member
#16
BTW I do see a conditional inside a CSS. I saw it in Anthony Parson's userbar addon.

I just need to put a custom userfield inside one.

For example:

Code:
/* Shift Visitor Links to Moderator Bar */
 
<xen:if is="@xfofUserbar">
#moderatorBar .adminLink
{
    float:left !important;
}
</xen:if>
@xfofUserbar is a custom style property.

How do I make a custom user style property with custom userfields?
That's a style property which is different. A style property doesn't change for each user. It's consistent across the forum.