Before we start, you need to be aware that our background in most template has at least 2 layers

One is controlled by the style setting of JSN Sun Framework

The other is controlled by the setting of PageBuilder 3 for the module and section built with it.

Therefore, on some occasions, especially when you start with sample data, you need to configure both to have the desired background.

Change background - With “Style” setting

Form website background to module background, almost item on your site will be controlled by the “Style” setting, located in JSN Sun Framework

On the “Style” tab, you can change the background as well as the design style of these 5 areas:

• General styles: Creating a master style for all layout elements. This section can be understood as the parental style for your website.
• Offcanvas styles: Defining styles for your offcanvas. Only appear if you have at least an item in your offcanvas layout.
• Section styles: Controlling style of a section in your layout. Section can be seen as a group of rows which are parts of a content block, for example: “Header” section, “Footer” section, etc..
• Module styles: Controlling styles for modules on your site.
• Menu styles: Defining styles for your menu.

Let’s take a look at each setting.

General Style

Creating a default style for all layout elements. This section can be understood as the parental style for your website.

There are 7 elements you can change within the General area, which are:

1. Page style
2. Main - Sub color
3. Heading
4. Paragraph
5. Default button
6. Primary button
7. Link

Page Style

This area gives you the ability to edit overall styles for both page outer and page inner. However, please note:

• If “Boxed layout” is disabled, only settings for outer page style will be displayed:
• If “Boxed layout” is enabled, settings for both outer page and inner page style will be displayed:

Main - Sub Color Style

The purpose is to help you set up a uniformity color style throughout the website.

There are many areas across JSN Sun FW affected by this setting, in which you can choose from Main color, sub color or custom color.

Tips for this section:

• 60 - 30 -10 rules: Your main color should take 60% area of your website, whereas sub color take 30% and the remaining 10% is for other color combination.
• You could check out color combination website like: https://coolors.co for better color choice.
• Main color should apply for header section, button, link and other sections that you need to highlight.

Heading Style

Use to set the default heading style for all sites. 

Tips for this section:

• Text Shadow: some of preset settings for your site: (horizontal, vertical, blur, shadow color). Make sure the text, shadow, and background have to contrast to each other for better display.
• Normal shadow: 2px; 4px; 3px; #000000
• Hard shadow: 6px; 6px; 0px; #000000
• Glow: 0px; 0px; 6px; #ffffff
• Base size: The value of base size will equal h5

Content Style

Set up the default style for paragraph on all websites.

Tips for this section

• Although, you can choose any font size you want, however, it’s best to keep the ratio between heading (h2) and paragraph text around 1.9 ~ 2 for better display.
• If you decide to upload a custom font, upload the font file end with .otf or .tff

Button Style

To set up the style for buttons, including Default Button and Primary Button. You can change the style of each button by clicking to each.

Tips for this section:

In our template, default button and primary button are all assigned with a specific CSS class: btn-default and btn-primary respectively.

Therefore, if there are any buttons on the site you want to follow these 2 buttons style, you can add these classes to them.

Link Style

To set up the style for links, click on the link in the preview panel on the left side and change its settings on the right panel.

Offcanvas

Defining styles for your offcanvas section. Only appear if you have at least an item in your offcanvas layout.

By default, offcanvas styles will take general style as its default style. You can use your own style for this section by tick on “Use custom setting”

Section

Use to control the style for each section separately. You can customize it the same way as general area.

The section style setting will override the setting in general tab.

Module

The Sun Framework comes with 04 to 06 highly flexible module styles, and you can customize each of them in the same way with general area.

Menu

Control the style of your menu. You can understand better by reading this article, where you will learn more about setting up a complete menu.

Change background with JSN PageBuilder 3

For most of our template, we use JSN PageBuilder 3 to build many sections in homepage. Therefore, to change the background of those, you need to find the section built by JSN PageBuilder 3 and change the setting within the extension.

Step 1: Locate the section, module built by JSN PageBuilder 3 

JSN PowerAdmin 2 is a great tool to find any in-use module nad section on your site. Tutorial here.

Step 2: Once you have located those, you can change the background of any section, column, row (container) as below:

Change background of any form within the template

For any form built within our template, we use JSN UniForm extension. Therefore, to change the background color, you need to change the extension.

Step 1: Go to Component/ JSN UniForm, choose the form you want to change the background

Step 2: Click on Form design, and change the background.

Transparent background style

You can make the transparent background by following these steps:

Step 1: add class ‘sunfw-overlap-bg’ for section contain menu.

Step 2: Add this custom CSS code to the custom.css file. You can find the custom.css file follow this guide.

@media (min-width: 992px){

.sunfw-overlap-bg:not(.sunfw-sticky-open) {

position: absolute;

width: 100%;

z-index: 9999;

}

}

You can achieve a similar transparent menu background as follows:

Priority for background template setting

Sometimes, you will find changing a general setting or style setting is not enough. Because other settings are overriding their background layer. So, you need to know what setting will be more priority than others to change the right one. The priority goes as follows:

JSN PageBuilder 3 > Section > General

Note: there are 2 case for this priority rule:

1. If the section background on SunFW is full width, the background of the module built by PageBuilder 3 will cover the background or section
2. If the section background on SunFW is not full width, there will be 2 or 3 separate background and follow the priority rule