You may have noticed our plugin does not come with options to style fields. That’s because styling should be up to your theme. Our fields will use the styling defined by your theme and should therefor blend in nicely on your site.
However, there may be some aspects you want to change, like the color of swatches, or the file upload field. We could have created plugin settings to change all of this, but that would make our plugin less lightweight and less fast. Each setting takes up space in the database and will output inline CSS right into your HTML code. This will bloat your site’s code if it’s not done sparingly.
Instead, we wrote this guide in which we’ll go over some of the most popular layout changes you may want to make. Just copy paste the CSS code provided into your website and you’re done!
How does it work?
Styling elements on your site is done by adding some CSS code to your theme via the WordPress menu > Appearance > Customize > Additional CSS.
Below are some common aspects you may want to change. Just copy the code and you’re good to go!
Changing the tooltip
The color swatch and image swatch can display the label in a tooltip. Per default, this tooltip looks dark with white text:
Changing the background and text color of the tooltip is easy:
Please supply your license key to unlock the code
Since this is a custom-coded snippet, we kindly ask for your license key so our system can verify your purchase.
Changing the color swatch
Our plugin allows you to easily set the size of the color swatch, but you may also want to change the “selected” border color. Per default, a dark border will be drawn around a selected color swatch. See the orange swatch below:
To change this border color or thickness, you can use the following CSS:
Please supply your license key to unlock the code
Since this is a custom-coded snippet, we kindly ask for your license key so our system can verify your purchase.
Changing the text swatch
You can easily change the border color of a text swatch, or alter the selected state colors. Here’s how:
Please supply your license key to unlock the code
Since this is a custom-coded snippet, we kindly ask for your license key so our system can verify your purchase.
