Preference lets you customize some styles relating to the Showcase, Banner, and Header area (WP Header) of your page with a set of options for changing colours, backgrounds, and paddings. Although the showcase, banner, and header are sharing the same space, you can achieve a slightly different style for each one, primarily for the Showcase and Banner, as the Header is actually one that shares both spots.
Showcase Style
By default, there is a background and padding set for the Showcase Header which looks like this (with an image added) screenshot:
The padding is the space that is shown around the image, but it also shows the background image that is used for this area which also has a background colour.
Change the Showcase Padding
- Go to your Home Dashboard
- Click on the big blue button labeled “Customize Your site” or you can go to Appearance >> Themes >> Click on the text link “Customize“
- Click on the Header Image tab of the customizer
- Find the “Showcase Padding” setting and change the padding to what you want. You can see the changes in real time in the right side of the window. You will also notice the default setting is 10px 10px 5px which means: top padding=10px, right padding=10px, bottom padding=5px, and left padding=10px
- When you are happy with the padding, click Save & Publish, but don’t close the window yet if you plan to make additional style changes, otherwise you can click the “Close” button at the top after you save your changes.
NOTE: When doing padding, the above example uses the short version of css padding, but to see the same setting in long version, 10px 10px 5px will become 10px 10px 5px 10px
Change the Banner Padding
For the Banner header, it’s very similar to the Showcase one, except it’s actually a separate widget position, although it shares the same area. The padding on this is set to 0 (zero) by default so that the image will go the full width and not show any padding…a slight different effect:
- Go to your Home Dashboard
- Click on the big blue button labeled “Customize Your site” or you can go to Appearance >> Themes >> Click on the text link “Customize“
- Click on the Header Image tab of the customizer
- Find the “Banner Padding” setting and change the padding to what you want. You can see the changes in real time in the right side of the window. You will also notice the default setting is 0 0 0 0 which means there is no padding at the top, right, bottom, or left. If you want a padding of 10px 0 10px 0, this means 10px on top, 0 on the right, 10px on the bottom, and 0 on the left side.
- When you are happy with any changes to the padding, click Save & Publish, but don’t close the window yet if you plan to make additional style changes, otherwise you can click the “Close” button at the top after you save your changes.
Change the Background for the Showcase & Banner
For the background image and background colour settings, these will affect both the Showcase and the Banner positions, so what you set here will be for both. You have the option to use a pre-defined background image or you can set it to “none” which means you will just be using a background colour:
Although these are predefined choices for you, you can also create your own backgrounds, but this will be offered as another tutorial later which will go through a few steps of creating your own. Currently you have 8 choices as shown in the screenshot above, but if you set it to “None”, you can then use the “Showcase Background Colour” selector setting just above it and explore the unlimited colour range you have available.
For the Showcase Background Colour setting, click on the selector button and you will get a popup tool to move the little round cursor to choose the colour you want.
Additional Style Settings for the Showcase and Banner
Depending on other colour modifications you make to your website using Preference, there are a few more colour settings shown in the “Header Image” tab of the customizer that are made available to you, should you need to edit the colour attributes of each one:
- Showcase Bottom Line
- Showcase Footer Bar
- Showcase Footer Line
This group of styles will customize the bottom area of the showcase and just above the drop shadow you see below the overall showcase header. There is a top line, the background bar, and then a bottom line:
