Preference Lite (and Pro) 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 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:
