Skip to content

STYLING

Configuring Styling in Theme Settings

FAQ

Can I remove the radius from the corners?

The theme default is a 6px border radius that can be modified in the Styling section of Theme Settings under Corners.

Theme Settings

There are 7 sections in Theme Settings for Fonts: Corners, Buttons, Menu Tags, Forms, Sliders, Lists, Text Highlights, and Code Highlighting.

Styling

This design group provides options to modify the default POWER styling to perfect the details for your website.

theme-settings-styling-v25

Styling → Corners

The style settings for corners will define how round your buttons, inputs, dropdowns, boxes, images, and checkboxes appear.

Defining the Base Border Radius will be the base size in pixels that all other settings inherit (except checkboxes, they can't be larger than 6 pixels or they would turn into radio buttons), with the option to overwrite any of the individual settings.

theme-settings-styling-corners

Styling → Buttons → Custom Styles

In addition to the default styles used for CTAs and Buttons, you can define up to 4 custom buttons.

custom-button-styles

Once defined, each of these button styles can be selected within POWER modules and also has a corresponding CSS class that can be used in rich text editors. 

Additional Settings for CTAs and Buttons.

Screen Shot 2022-07-30 at 1.53.27 PM

Styling → Buttons → Custom Styles → Custom Button 01-04

For each custom button, you can set the style for Text, Background, and Border.

For each of these options, you will have the option to configure the regular state and hover state for the button.

custom-button-style-settings

Styling → Buttons → Custom Styles → Custom Button 01-04 → Text

custom-button-text-colors

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Background Style

Custom Buttons can have a transparent background (none) or color, gradient, or glassmorphism background style.

custom-button-background-styles

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Background Hover Style

On hover, custom buttons can change to a color or gradient.

custom-button-background-hover-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Color

custom-button-background-color-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Gradient

custom-button-gradient-background-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Gradient → Background Gradient Direction

background-gradient-direction

Styling → Buttons → Custom Styles → Custom Button 01-04 → Background → Glassmorphism

custom-button-glassmorphism-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Border

custom-button-border

border-style-colors

Styling → Buttons → Custom Styles → Custom Button 01-04 → Border → Border Style

border-style

Styling → Buttons → Custom Styles → Custom Button 01-04 → Border → Border Hover Style

Inherit will retain the settings for the regular state, or you can select another color.

border-hover-style

Styling → Menu Tags

The style settings for menu tags will define how menu tags and the pulsing dot appear.

There are four menu tags that can be configured as well as a Dot.

theme-settings-styling-menu-tags

Styling → Menu Tags → Menu Tag 01-04

For each menu tag, you can set the style for Text and Background colors.

menu-tag-settings

Styling → Menu Tags → Dot

For the dot, you can set color and visibility.

dot-settings

Styling → Menu Tags → Show behind Text?

The default for the dot is to be in the upper left of the menu item and when it pulses it is above the text.

Check the box for the option to show the dot behind the text instead.

Styling → Forms

Select the Input Field Style for your default form settings. This will be applied to all POWER Sec Form Modules, where you can override the default for individual modules/pages.

Preview Form Styles.

styling-forms-settings

Styling → Sliders

Modify the default styling for bullet points used for sliders used in the POWER Sec Images and POWER Sec Testimonials modules.

styling-sliders-settings

Styling → Sliders → Bullet Points

styling-slider-bullet-points

Styling → Sliders → Bullet Points → Inactive Bullet Points

Inactive Bullet Points are the slides not currently shown.

slider-inactive-bullet-points

Styling → Sliders → Bullet Points → Active Bullet Points

The Active Bullet Point is for the slide currently visible/active.

slider-active-bullet-points

Styling → Lists → UL - Bullet List 

Modify the default styling for bullet points for unordered lists across all modules and rich text fields.

bullet-list-item-spacing

There are 8 choices available for bullet point styles:

  1. Arrow
    bullet-point-style-arrow
  2. Arrow Thin
    bullet-point-style-arrow-thin
  3. Checkmark
    bullet-point-style-checkmark
  4. Checkmark Thin
    bullet-point-style-checkmark-thin
  5. Circle
    bullet-point-style-circle
  6. Circle Outline
    bullet-point-style-cirlce-outline
  7. Line
    bullet-point-style-line
  8. Square
    bullet-point-style-square

    Styling → Lists → OL - Numbered List

    Modify the default styling for numbering for ordered lists across all modules and rich text fields.

    numbered-list-style-settings-item-spacing

Styling → Text Highlights

The style settings for text highlights will define how the mark and em HTML tags appear.

There are two styles that can be configured, one for mark and one for em.

theme-settings-text-highlights

Styling → Text Highlights → Style 01

Style 01 applies to the mark HTML tag.

Check the box to Activate Style (otherwise the default HubSpot definition applies).

activate-style01

Styling → Text Highlights → Style 01 → Text Emphasis → Font Family

Inherit uses the pre-configured font family of the text element.

Option to change to Base or Accent font.

Styling → Text Highlights → Style 01 → Text Emphasis → Font Weight

Inherit uses the pre-configured font weight of the text element.

Option to change the font weight, make sure only font weights included in your font settings are chosen.

Styling → Text Highlights → Style 01 → Text Emphasis → Text Case

Inherit uses the pre-configured case of the parent text element.

Option to change the capitalization to one of Uppercase, Lowercase, or Capitalize.

Styling → Text Highlights → Style 01 → Text Emphasis → Italic

Option to change the text to Italic.

Styling → Text Highlights → Style 01 → Text Emphasis → Text Style

Inherit uses the pre-configured color of the text element.

Option to change the text to a specific color for Light and Dark Schemes.

text-highlight-text-style

Styling → Text Highlights → Style 01 → Underline/Mark

Option to Activate Underline/Mark.

underline-settings

Styling → Text Highlights → Style 01 → Underline/Mark → Height

Defines the height of the underline/mark; how tall you want it to be relative to the font size.

Styling → Text Highlights → Style 01 → Underline/Mark → Horizontal Padding

Defines the horizontal padding in ems.

The unit em is a dynamic unit that takes the font size into account. 1em = same as font size of the text. 0.5em = half the font-size of the text, etc.

Styling → Text Highlights → Style 01 → Underline/Mark → Underline/Mark Style

Choice of Color or Gradient.

Option to define the color and/or gradient for light and dark scheme separately.

Styling → Text Highlights → Style 02

Style 02 applies to the em HTML tag.

Check the box to Activate Style (otherwise the default HubSpot definition applies).

activate-style02

Style 02 has the same settings and options as Style 01.

Styling → Code Highlighting → Languages

Code Highlighting is enabled by default and automatically applies to common code languages.

theme-settings-code-highlighting-defaults-enabled

Styling → Code Highlighting → Languages

See a list of code languages included by default and the full list of code languages available to choose from.

Styling → Code Highlighting → Color Scheme

Choice of Light or Dark color scheme

Example of light scheme:

code-highlighting-light-scheme-example

Example of dark scheme:

code-highlighting-dark-scheme-example

Styling → Code Highlighting → Line Numbers

Uncheck the box to remove the Line Numbers.

Example without line numbers:

code-highlighting-no-line-numbers

Styling → Code Highlighting → Copy Code

Check the box to add a copy button on hover (upper right corner).

Example with copy button:

code-highlighting-copy-button

Next Steps

After configuring your brand styling, update Effects in theme settings 

NEVER MISS A POWER UPDATE

We are continuously improving our modules and updating our documentation. Stay in the loop.