`<templates:styles />`
Adds a 'Styles' button to the left panel of the visual editor, allowing admin users to configure styles associated with fonts, links, forms and sections.
Attributes
- `aColor`
string
A Color
Eg: #1075a2
- `aHoverColor`
string
A Hover Text Decoration
Eg: #1075a2
- `aHoverTextDecoration`
string
A Hover Text Decoration
Eg: none
- `aTextDecoration`
string
A Text Decoration
Eg: none
- `bodyColor`
string
Body Color
Eg: #333333
- `bodyFontFamily`
string
Body Font Family
Eg: Open Sans
- `bodyFontLibrary`
string
Body Font Library
Eg: google
- `bodyFontSize`
string
Body Font Size
Eg: 16px
- `bodyLineHeight`
string
Body Line Height
Eg: 1.5em
- `bodyMarginBottom`
string
H1 Margin Bottom
Eg: .5rem
- `bodyMarginTop`
string
Body Margin Top
Eg: 0px
- `boxSizingBorderBox`
bool
Applies box-sizing: border-box globally
- `formAccentColor`
string
A central color to feature in the form styles
- `formStyleVariant`
string
Set an overall style theme for forms
- `h1Color`
string
H1 Color
Eg: #505050
- `h1FontFamily`
string
H1 Font Family
Eg: Open Sans
- `h1FontLibrary`
string
H1 Font Library
Eg: google
- `h1FontSize`
string
H1 Font Size
Eg: 40px
- `h1FontWeight`
string
H1 Font Weight
Eg: 400
- `h1LineHeight`
string
H1 Line Height
Eg: 1.2em
- `h1MarginBottom`
string
H1 Margin Bottom
Eg: .5rem
- `h1MarginTop`
string
H1 Margin Top
Eg: 0px
- `h2Color`
string
H2 Font Color
Eg: #000000
- `h2FontFamily`
string
H2 Font Family
Eg: Open Sans
- `h2FontLibrary`
string
H2 Font Library
Eg: google
- `h2FontSize`
string
H2 Font Size
Eg: 32px
- `h2FontWeight`
string
H2 Font Weight
Eg: 400
- `h2LineHeight`
string
H2 Line Height
Eg: 1.2em
- `h2MarginBottom`
string
H2 Margin Bottom
Eg: .5rem
- `h2MarginTop`
string
H2 Margin Top
Eg: 0px
- `h3Color`
string
H3 Font Color
Eg: #000000
- `h3FontFamily`
string
H3 Font Family
Eg: Open Sans
- `h3FontLibrary`
string
H3 Font Library
Eg: google
- `h3FontSize`
string
H3 Font Size
Eg: 28px
- `h3FontWeight`
string
H3 Font Weight
Eg: 400
- `h3LineHeight`
string
H3 Line Height
Eg: 1.2em
- `h3MarginBottom`
string
H3 Margin Bottom
Eg: .5rem
- `h3MarginTop`
string
H3 Margin Top
Eg: 0px
- `h4Color`
string
H4 Font Color
Eg: #000000
- `h4FontFamily`
string
H4 Font Family
Eg: Open Sans
- `h4FontLibrary`
string
H4 Font Library
Eg: google
- `h4FontSize`
string
H4 Font Size
Eg: 24px
- `h4FontWeight`
string
H4 Font Weight
Eg: 400
- `h4LineHeight`
string
H4 Line Height
Eg: 1.2em
- `h4MarginBottom`
string
H4 Margin Bottom
Eg: .5rem
- `h4MarginTop`
string
H4 Margin Top
Eg: 0px
- `h5Color`
string
H5 Font Color
Eg: #000000
- `h5FontFamily`
string
H5 Font Family
Eg: Open Sans
- `h5FontLibrary`
string
H5 Font Library
Eg: google
- `h5FontSize`
string
H5 Font Size
Eg: 20px
- `h5FontWeight`
string
H5 Font Weight
Eg: 400
- `h5LineHeight`
string
H5 Line Height
Eg: 1.2em
- `h5MarginBottom`
string
H5 Margin Bottom
Eg: .5rem
- `h5MarginTop`
string
H5 Margin Top
Eg: 0px
- `id`
string
Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).
- `improveFormStyles`
bool
Improve form styles
- `maxWidthMedia`
bool
Applies max-width: 100% on media elements to prevent overflowing containers
- `rootFontSize`
string
Root font size
Eg: 16px
- `rootFontSizeMobile`
string
Root font size on small screens
Eg: 14px;
- `section-fullheight`
string
Section FullHeight Sizing
- `sectionSize-lg`
string
Section sizing for LG
- `sectionSize-md`
string
Section sizing for MD
- `sectionSize-sm`
string
Section sizing for SM
