Global Theme settings

A theme is a collection of styles and templates which you can apply to your web pages and blogs. Theme settings control the global colors, fonts, website header, typography, buttons, forms, tables, spacing and footer for all the pages of theme.

Let's start with the theme editing

To edit your theme settings, you need to go  within the page editor. You can access the page editor by clicking the Design tab given on the left side of the theme template. Then click Edit theme settings.

Screenshot_47

Global Colors

Your Global color settings apply a primary, secondary, and brand color to all elements included in all the templates of your theme. These styles will be applied globally to all elements on your website. 

Screenshot_310

Global Fonts

Global Font Settings give you the option to choose a primary and secondary font to apply to the website's headings, buttons, forms and body text. Click the color bubble to choose  primary or secondary font colors. You can either simply choose a  color value or click the Advanced tab and choose a specific hexadecimal value with a color picker. 

Screenshot_324

Screenshot_325

Website header

Website header settings control the background colors, menu link color and child menu border color which appear in the page header. Also, you can unable or disable the top header. 

  • Background color: Here you can  select the color for the header background of your website.
  • Menu link color: select the color for the menu link and style your font. These styles can only be managed here in your theme settings.
  • Border color : Here, you can choose the color of child menu. 

  

                                                                Screenshot_312

Typography

In the typography settings, you can control the fonts applied to the elements in your templates. You can also select custom colors for certain headings, body texts and links in your theme.

  • Body :  Here you can customize the font, color and text  of the body of your page only. 
  • Headings: You can customize the exact font, color, size, and style for any headings which  included on your theme.
  • Links: Here you can customize the default color of links on your website. You can also edit the color of your link.

Screenshot_315Screenshot_326Screenshot_327

Buttons

Within the page editor you can set custom colors for background, text, hover text, border, border width, border color, border radius, horizontal padding and vertical padding.

    Screenshot_316-1Screenshot_317-1

    Forms

    In form settings, you can customize the header background color, header text color, color of label, help text, field border, field focus border.

    Screenshot_318-1

    Tables

    Set the default colors, fonts, opacity for tables added to your page.

    • Table head: You can choose custom colors for fonts in your table header, and the background color across the full width of the table head. 
    • Font color: Set the custom color for fonts in your table.
    • Footer: You can choose custom colors for footer background and text color.

    Screenshot_319-2Screenshot_320-2

    Spacing 

    Your theme settings for spacing, control the vertical spacing and maximum width of your page content in between elements on your page.

    Screenshot_320-2

    Footer

    In this setting, you can choose the custom background color and its opacity. Also you can choose the color of the text.

    Screenshot_329

    After all the editing, click on the Apply changes in the page editor.

    Once you are done with the editing, click publish or update button given on the top right side.

    If you have any Sales or Support related questions, you can anytime reach us at hubspot@webdew.com or visit this page.