Global Styling Settings

Updated on January 2, 2019

Styling settings in the Jupiter theme let you customize text colors and layouts. The styling settings in 5.9.3 have been moved to the Theme Options > Main Content and renamed to Layout & backgrounds and Text.

In this article, we will explain how to configure the global text styling and layout settings in the Main Content Settings under Theme Options. Main content settings contains two sections: Layout & backgrounds and Text.

To access Theme Options, you have two ways:

  • From WordPress top menu > Theme Options
  • From WordPress left menu > Jupiter > Theme Options

Layout & Backgrounds

1From the WordPress left menu go to Jupiter > Theme Options > Main Content > Layout & Backgrounds.

styling settings

2Configure the settings as explained.
Options Descriptions

Boxed And Fullwidth LayoutLets you choose between a full or a boxed layout to set how your website’s layout will look like.
Main Grid WidthDefines the main content max-width. Default value is 1140 pixels.
Content Width (In Percent)Lets you define the width of the content. Consider that it is in percent, let’s say if you set it 60%, sidebar will occupy 40% of the main content space.
Main Content Responsive StateDefine when responsive state of content will be triggered. Different elements in your website such as sidebars will stack on window sizes smaller than the one you choose here.
Main Navigation Threshold WidthDefine when Main Navigation should viewed as Responsive Navigation. Default is 1140 pixels.
Stick TemplateRemoves padding after header and before footer for single pages.
Body Border When enabled, a border goes around entire browser window, stuck to the edge regardless of screen size. All edges stay in place as page scrolls.
Expand Page Title Section To HeaderEnabling it will expand the page title section (background image, color) to header section.

Background and Texture

Background and texture options lets you modify header, page title, body and footer background section. To configure see this article.


Setting Gradient Background Color

Gradients backgrounds are typically one color that fades into another. CSS3 defines two types of gradients:

Linear Gradients (goes down/up/left/right/diagonally)
Radial Gradients (defined by their center)

1In the background setting box select Gradient from the dropdown under Background color option.
2Configure the settings as required.

Options Descriptions

FromSelect an origin/start color.
ToSets a stop color or the color feds into the origin color.
StyleLets you choose between Linear and Radial gradient style.
AngleIf linear is selected in style this option will let you define the angle. Available options are: Vertical, Horizontal, Diagonal top, Diagonal bottom.

[image-gradient][image-linear]


Text

In this group of settings you can configure global text colors and sizes. All global setting can be overridden in the individual elements in their respective settings.

Body

1Font Family

Let’s you configure the body font family. This option moved to new typography settings in Theme Options > Typography.

2Text Weight

Let’s you choose default body text weight. Available options are:

  • 100
  • 200 (light)
  • 300
  • 400 (normal)
  • 500 (medium)
  • 600 (semi-bold)
  • 700 (bold)
  • 800 (bolder)
  • 900
3Text Size

Allow you to define text size. You can manually enter a font size or use slider to adjust.

4Text color

Use this option to set the main text color of the website using color picker. Color hash code can also be inserted.

5Content Links color

Use this options to set anchor hyperlink colors.

6Content Strong Tag Color

Set your strong tag color using this option.

Paragraphs

This section will let you configure default paragraph stylings.

1Text Size

Allow you to define text size for paragraph elements. You can manually enter a font size or use slider to adjust.

2Line Height

This option lets you adjust default paragraph text line height.

3Text Color

You can set paragraph text font color using color picker. Color hash code can also be used.

Headings

This section configures the default heading fonts: H1, H2, H3, H4, H5, H6

1H1 Text Weight

Lets you set H1 text weight. Available options are:

  • 100
  • 200 (light)
  • 300
  • 400 (normal)
  • 500 (medium)
  • 600 (semi-bold)
  • 700 (bold)
  • 800 (bolder)
  • 900
2H1 Text Case

Use this options to set heading 1 text case. Available options are:

  • None
  • Uppercase
  • Capitalize
  • Lowercase
3H1 Text Size

Use this options to set Heading 1 text size.  You can manually enter a font size or use slider to adjust.

4H1 Text Color

Use this option to set the heading 1 color.

Options explained from 1 to 4 is common to rest of the header H2 – H6. Configure the as required.

Did this answer your question?