Styling Options

Style the color schemes on your site using the comprehensible styling options

This section allows you to style the color schemes on your site. Note, you can overwrite these settings from every page editor.

You can also style the login page and lightbox for your site in this section.

Main styling options

Set the main color schemes for your site.

main-styling-options

Main site colors setup
  • Main site color – set the main site color. This color is used as the default color for the Visual Composer elements.
  • Second site color – select the second site color. This color is used as default border and delimiter color and background color for the popover, the feature for the text editor on single post, single portfolio and in Text module.
  • Third site color – set the third site color. The color is used as button background in header login form.
Body styling options
  • Boxed body layout – set it to Enable to have the boxed site layout (1280px width).
  • Body background color – allows you to set the default color for the body by default for the whole site. You may overwrite these settings in each item’s editor Page options meta box.
  • Body background image – upload the image to be displayed as a background of the page or enter the URL of the image.
  • Body background image repeat – select whether the page background image will be repeated or not repeated. You can select horizontal repeat, vertical repeat or disable repeat of the image.
  • Fixed body background – enable fixed background to make the background image fixed, so the content will scroll separately over it. When Disable is selected, the background image scrolls with the content.
Content styling options

content-styling-options

  • Content background color – set the default color for the content of your site.
  • Content background image – select the default background image for the content.
  • Content image repeat – select whether the page background image will be repeated or not repeated. You can select horizontal repeat, vertical repeat or disable repeat of the image.
  • Pagination style – set one of the preset pagination styles. The pagination will be used for blog, portfolio, gallery and shop pages as default one.
    • Style 1 – check the example with this link.
    • Style 2 – follow this link to check the example.
    • Style 3 – you can check the example here.
    • Style 4 – the example can be found here.
    • Style 5 – follow this link to find the example.
  • Default screen (in px) – set the screen default width for proper image displaying. The images would be cropped according to the screen width set in this section.
div#stuning-header .dfd-stuning-header-bg-container {background-image: url(https://nativewptheme.net/support/wp-content/uploads/2017/01/hands1.jpg);background-size: cover;background-position: center center;background-attachment: initial;background-repeat: no-repeat;}#stuning-header div.page-title-inner {min-height: 550px;}#main-content .dfd-content-wrap {margin: 0px;} #main-content .dfd-content-wrap > article {padding: 0px;}@media only screen and (min-width: 1101px) {#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars {padding: 0 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars > #main-content > .dfd-content-wrap:first-child {border-top: 0px solid transparent; border-bottom: 0px solid transparent;}#layout.dfd-portfolio-loop > .row.full-width #right-sidebar,#layout.dfd-gallery-loop > .row.full-width #right-sidebar {padding-top: 0px;padding-bottom: 0px;}#layout.dfd-portfolio-loop > .row.full-width > .blog-section.no-sidebars .sort-panel,#layout.dfd-gallery-loop > .row.full-width > .blog-section.no-sidebars .sort-panel {margin-left: -0px;margin-right: -0px;}}#layout .dfd-content-wrap.layout-side-image,#layout > .row.full-width .dfd-content-wrap.layout-side-image {margin-left: 0;margin-right: 0;}