Styling Settings

Last Updated on

Styling settings in the Jupiter theme lets 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 section: 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

In this article


Layout & Backgrounds

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

styling settings

2
configured 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.
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)

1
In the background setting box select Gradient from the dropdown under Background color option.
2
Configure 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

1
Font Family

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

2
Text 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
3
Text Size

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

4
Text color

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

5
Content Links color

Use this options to set anchor hyperlink colors.

6
Content Strong Tag Color

Set your strong tag color using this option.

Paragraphs

This section will let you configure default paragraph stylings.

1
Text Size

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

2
Line Height

This option lets you adjust default paragraph text line height.

3
Text 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

1
H1 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
2
H1 Text Case

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

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

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

4
H1 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.

x
Note: If you need further help with the styling, open a ticket in our HelpDesk.
Was this helpful?
Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket