How to change the Layout & Background of the whole site

Theme Options is the main section of Jupiter, which you can do your global settings for your website. You can access Theme Options from top left side of your dashboard. Layout & Backgrounds options can be found under Main Content section of Theme Options.

layout-bg

In this topic

We will explain about how to change the Layout & Background of the whole site

1. Background Styling

layout-bg1

1.1. Choose Between Boxed And Full Width Layout

Choose between a full or a boxed layout to set how your website’s layout will look like. Available options are:

  1. Boxed Layout
  2. Full Width Layout

1.2. Main Grid Width

Define the main content max-width. Default value is 1140 pixels.

1.3. Content Width (In Percent)

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.

1.4.

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.

1.5. Main Navigation Threshold Width

Define when Main Navigation should viewed as Responsive Navigation. Default is 1140 pixels but if your Navigation items fits in header in smaller widths you can change this value. For example, if you wish to view your website in iPad and see Main Navigation as you see in desktop, then you should change this value to any size below 1020 pixels.

1.6. 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.

1.7. Expand Page Title Section To Header

Expand the page title section (background image, color) to header section?

1.8. Background color and texture

Modify header, page title, body and footer background properties. Click on each section to customize it. Use options below to set background properties for Header, Page Title, Page, Body or Footer area.

layout-bg2

1.9. Background color

Use this option to set the background color of the website.

1.10. Background Image

Use this option to add image to your chosen website section i.e. Header or Page Title

1.11. Background Repeat

Use this option to set how you want the background image repeat. Available options are:

  1. No Repeat
  2. Repeat
  3. Repeat Vertically
  4. Repeat Horizontally

1.12. Background Attachment

Use this option to set how you want the background image attached to the page. Available options are:

  1. Scroll
  2. Fixed

1.13. Background Position

Use this option to set the position of background image. Available options are:

  1. Top Right
  2. Top Center
  3. Top Left
  4. Center Right
  5. Center Center
  6. Center Left
  7. Bottom Right
  8. Bottom Center
  9. Bottom Left

1.13. Cover whole background

Use this option to force background image take up the whole container. Browser may cut off portions of the image to fit in different window sizes.

0