Styling Your Theme

Table of Contents:

1. Style Kits

2. Fonts

- Changing predefined font styles

- Creating custom font styles

- Applying font styles to flex elements

- Applying font styles to Wordpress content (Generic Typography)

3. Colors

- Changing predefined colors

- Applying colors to flex elements

4. Form Styling

5. Link Styling

1. Style Kits

All styling in a Flotheme starts with Style kits. A style kit is a system of fonts and colors that is applied throughout the entire theme: blocks, headers, footers, forms, and Gutenberg blocks. With this system, you can seamlessly switch between your style kits without breaking the layout of your site. Thus, switching the style kit to a different one is the easiest way to change the look and feel of your site.

When you install your theme, you get its default style kit with predefined fonts and colors. 

All Flothemes Style Kits can be found inside Flex Admin -> Style Kits. All your purchased Style Kits are going to appear under the Purchased tab.

With Pronto All in One, you also have access to our whole Style Kits Library.

The  Global Style Kit is the style kit that is currently applied to your whole website and can be edited from Flex Admin -> Edit Style:

2. Fonts 

Changing Predefined Font Styles

A Font Style is basically a font configuration. For example, you may be using the Helvetica font. This is just the Font Family. Attributes like font size, letter spacing, bold, italics, heading 1, line height, etc. is what makes it a Font Style.

What Font Styles are included in the theme:

  • We created 4 sets of Title font styles, where each group uses one font family and 4 different sizes – Large, Medium, Small, XSmall. Having these predesigned title groups will help you to play with different title styles having the complimentary smaller fonts.
  • Display font allows you to use some very outstanding titles or manifestos.
  • 2 subtitle fonts will be a good pairing for any of the title fonts.
  • Quote font.
  • Paragraph – font style used within all general text areas like Blog Post, About Page, etc.
  • 2 overline fonts – mainly will be used for Categories, Publish Dates, etc.
  • Call to Action fonts – used on Buttons, Read More texts, etc.
  • Caption font will be used for some small details.
  • Logo font will be used for your site logo, in case you select Text Logo option for your site header.

 

Changing predefined font styles can be done from Flex Admin >> Style Kits >> Typography:

Here you will find a list of predefined Font Styles that are used on your website. Changes made to one of the styles will be applied everywhere that it is used. 

Recommended use:

1. Change just the Logo and Display font styles. One is used for your text logo and the second is used for large decorative texts inside your blocks. These font styles are safe to be customized as you will notice the changes right away.

2. Change only specific font styles. While this is a convenient way of changing a style in multiple places at once, it is best to use a reversed approach to changing these fonts. First, see where a font style that you want to adjust is used and then make changes only to that font style. Otherwise, if you will decide to change all of them at once, it may be hard to predict how these font styles will look in your blocks and a reset of the style kit may be needed.

3. Change only font families. The sizing inside the font style is pretty good as it is and if you want to just use a specific font e.g. Playfair Display instead of Lora, you can just go and change the font families to Playfair Display where Lora is used.


Creating Custom Font Styles

To create a Custom Font Style go to Flex Admin >> Style Kits >> Typography >> My Font Styles

This area is pretty straightforward. Here you can create your own font styles without making changes to the existing ones. This is beneficial when you need specific fonts and the default ones are not enough.

Applying Font Styles to Flex Elements

Every Flex Element allows you to set a Predefined Font Style, Custom Font Style (from the My Font Styles tab) or simply apply styling just to that element via the "Custom" tab inside the element (see the example above).

Recommended use:

- We recommend to our clients to work with font styles (Theme tab), rather than apply custom fonts (Custom tab). 

When you choose to make changes inside a single block (i.e. customizing a text), and use options that are not available inside your theme fonts styles (i.e. apply custom fonts from the Custom tab), the text element gets disconnected from your global style kit. This means that when you’ll tweak your global style kit in the future – that block will keep its custom styling and won’t match the new design. To avoid having blocks disconnected from your main styling library – make customizations inside the style kit first, then apply those new fonts or colors inside your block. 

Applying Font Styles to WordPress Content

Flotheme >> Style >> Generic Typography

Content such as Blog Posts, Gallery Text, and Third-Party Gutenberg Blocks don't have a direct way of applying Flotheme font styling.  To match the styling of these areas with the theme's one, we created the "Generic Typography" options page.

Here you can assign Style Kit Font Styles for the H1 to H6 tags, Paragraphs, Preformatted Text, and Quotes that are usually found in content/blocks mentioned above.

3. Colors

Changing Predefined Colors

Flex Admin >> Style Kits (Second Button) >> Colors

The predefined colors are used across your theme the same way as the predefined font styles are. They are split into 2 schemes. Scheme 1 - is the main one and is applied to the majority of flex blocks. Scheme 2 - contains a darker palette of colors and is used for blocks and elements that should contrast the lighter ones of Scheme 1.

Recommended use:

1. Change the Main Background Color and Main Text color. By adjusting these two values you can set a different tone or shade of the text and background that match your preference and brand styling.

2. Change the Button Colors. Button colors are applied only to buttons out of the box and will have no effect on other blocks. Thus, it is safe to make changes to these colors.

Applying Colors to Flex Elements

Same as with assigning font styles, each Flex element has the option to set a predefined color from the style kit or the option to set a custom color using the color picker (see the example above). 

Applying Colors to WordPress Content

Flotheme >> Generics >> Bottom of the Page. This will affect the Text and Background color of your website. 

4. Form Styling

Flotheme >> Style >> Form Style

The style set in this section applies to forms added as shortcodes (Flo Forms, CF7, WPForms & Ninja Forms) or via the Flo Contact Form block. In this way, you can adjust the color and fonts for your fields, labels and buttons inside the forms you integrate into your website.
Please note that these are basic custom form styling options. For any custom styling options check the documentation of the plugin that you use.

5. Link Styling

Flotheme >> Generics

Here you can override any previous style set for your  Links added in the Gutenberg area (not including Flo or Flex Blocks) and/or Flex Links.

Available Options:

Style Content Links - when turned on, the styling options will be applied to all the links that are outside any Flex Block or Flo Blocks.

Style Flex Links - when turned on, the styling options will be applied to all the links inside Flex Blocks.

Change Color - changes the color of links

Default Link Format - allow you to underline links, change the font weight to bold and / or set the font style to italic.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us