StyledThemes

Change space and colour when using sliders or image banners

There are a couple settings made available to you when you use a slider or Photographic banner in your Front Page, Pages, or Posts:

  • Background colour
  • Padding – top and bottom space that shows the background colour

For example, the screenshot shows a page banner being used but it has top and bottom blue bars showing which are actually the banner showcase background colour and padding. Default padding is set to 7 pixels but you can change this to your own preference.

celestial-banner-padding

Changing the Background Colour

  1. Go to Appearance >> Themes >> click on the Customize text link
  2. Click on the “Colours” tab
  3. in the right window preview pane, navigate to the page the banner image is located
  4. Find the Banner Background colour setting in the left column and click on it to select your colour. As you scroll around to choose your colour, you will see the preview window change.
    celestial-banner-colour
  5. Click “Save & Publish” when you are happy with the colour

 

Changing the Padding Space

  1. Go to Appearance >> Themes >> click on the Customize text link
  2. Click on the “Header Image” tab
  3. in the right window preview pane, navigate to the page the banner image is located
  4. Find the Banner Background Padding setting and change the default 7px 0 (top = 7px, right=0, bottom= 7px, left= 0) and change it to your choice. For example, if we change it to 0 0 7px 0, then your banner padding will look like this in the preview:
    celestial-banner-padding2
    If you want it to have no padding anywhere, then simply make it 0. When doing padding, make sure you have 1 space between each value: 0 0 7px 0
  5. Click “Save & Publish

Note: This is a global setting so whatever you choose here will also affect any other banner images you have set on posts or pages.

Front Page Padding

The front page showcase banner also has a padding setting under the “Header Image” tab as well, but default setting is set to 0px. If you decide you want padding, you can change it. However, for best visual appearance, I recommend leaving it to 0.