Misc

  1. Home
  2. Support
  3. Misc
  4. Introduction to Theme Customizer Controls

Introduction to Theme Customizer Controls

Understanding the Color Selection Box

Let’s understand the Color Selection Box first before going through the other options. You will be using it quite a few times and so its better to know it well.

A color selection box opens when you click the “Select Color” button anywhere. You can place a #rgb color code in the given input box if you want to use a specific color.

As soon as you click on the color of your choice, the options frame will close. You will be able to see the live color preview at the left side of the “Select Color” button, if there are relevant elements on the page.

If you want to change colors again, you can rinse and repeat the same process. There’s a “default” button you can use to reset the background color to white (#fffff) as the default color while the options frame is open.

You can use the horizontal slider option for increasing/decreasing transparency of your site background color (for example). Click on the small button that reads “100” (not transparent), and you can drag it over left to increase site background color transparency. As you make any changes, you can always see the website live preview on the right side of the browser.

If you are unsure of which color to use, you can keep dragging the small circle inside the color window. It will show you a live preview of the colors as you drag over these different color schemes.

You can use the vertical slider and play with it to find the right variation of your color. If you slide it all the way upwards, you will be able to choose any color from the rainbow. Then you can further optimize the color shade by setting the transparency (using horizontal slider) and adjust color shade (using vertical slider) to quickly find out your desired color.

Understanding the Sliders

You get a slider that you can move from left to right. Moving left would decrease the numeric value whereas moving right would increase the numeric value. These values are in pixels, usually known as px. You can click over the little blue circle to drag the slider left to right or can enter a numeric value directly in the input box.

Something missing? Contact us
Was this article helpful to you? Yes No

How can we help?