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
| Options | Descriptions |
|---|---|
| Boxed And Fullwidth Layout | Lets you choose between a full or a boxed layout to set how your website’s layout will look like. |
| Main Grid Width | Defines 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 State | Define 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 Width | Define when Main Navigation should viewed as Responsive Navigation. Default is 1140 pixels. |
| Stick Template | Removes 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 Header | Enabling 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)
| Options | Descriptions |
|---|---|
| From | Select an origin/start color. |
| To | Sets a stop color or the color feds into the origin color. |
| Style | Lets you choose between Linear and Radial gradient style. |
| Angle | If 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
Let’s you configure the body font family. This option moved to new typography settings in Theme Options > Typography.
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
Allow you to define text size. You can manually enter a font size or use slider to adjust.
Use this option to set the main text color of the website using color picker. Color hash code can also be inserted.
Use this options to set anchor hyperlink colors.
Set your strong tag color using this option.
Paragraphs
This section will let you configure default paragraph stylings.
Allow you to define text size for paragraph elements. You can manually enter a font size or use slider to adjust.
This option lets you adjust default paragraph text line height.
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
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
Use this options to set heading 1 text case. Available options are:
- None
- Uppercase
- Capitalize
- Lowercase
Use this options to set Heading 1 text size. You can manually enter a font size or use slider to adjust.
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.
