Themes and appearance

#CSS variables

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

#Commonly used variables

--userfront-alignmentPosition alignment of the
--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
--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
--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: