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
Layout & Backgrounds
1. From the WordPress left menu go to Jupiter > Theme Optiosn > Main Content > Layout & Backgrounds.
2. configured the settings as explained.
| 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. |
| 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)
1. In the background setting box select Gradient from the dropdown under Background color option.
2. Configure the settings as required.
| 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
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.