Themes and Appearance

#CSS Variables

Custom styling properties can be defined in the :root selector of your stylesheet. Learn more about CSS variables.(opens new window)

The following variables are the most commonly used:

VariableDescriptionDefault
--userfront-alignmentPosition alignment of the form.center
--userfront-text-colorThe primary foreground color.#303133
--userfront-background-colorThe primary background color.#ffffff
--userfront-border-radiusCorner radius of the outer container.4px
--userfront-container-border-colorBorder color of the outer container.#ebeef5
--userfront-container-borderBorder style of the outer container.1px solid var(--userfront-container-border-color)
--userfront-container-box-shadowShadow applied to the outer container.0 2px 12px 0 rgba(0, 0, 0, .1)
--userfront-container-heightHeight of the outer container.auto
--userfront-container-marginMargin of the outer container.0 auto
--userfront-container-max-heightMaximum height of the outer container.unset
--userfront-container-max-widthMaximum width of the outer container.340px
--userfront-container-widthWidth of the outer container.auto
--userfront-em-sizeThe base font size. Used as scaling reference.14px
--userfront-font-familyThe font family used throughout the toolkit.Avenir, Helvetica, Arial, sans-serif
--userfront-spacingGeneral spacing unit, such as padding and distance between elements.1em


#Remove Userfront branding

You can remove the "Secured by Userfront" text from your Toolkit forms by adding the following CSS to your page: