Overview
If you are looking to customize the app, change the look of a particular component, or alter the default styles here are all the CSS classes that are hooked into our app. The following styles are not automatically added to your stylesheet when the app is installed. If you want to change the styling then these will need to be added. We recommend that you have some knowledge of CSS before altering your stylesheet on your theme.
Getting Started
Adding Theme Classes
Sometimes your theme adds it's styles through CSS classes instead of by applying styles to the HTML tags. If your theme does this then you can simply add the styles to the inputs through the field editor under settings add CSS classes. However, this will have to be repeated on each field type in each form.
Style Sheet
You may need to use the !important tag after using a CSS selector in order to override styles from another app or the apps default styles. If you have any questions please feel free to reach out to use at support@w3trends.com.
Custom Product Options Styles
/*CPO Form Styles*/
.product-options-field-name {}
.product-options-textbox {}
.product-options-textarea {}
.product-options-number {}
.product-options-checkbox {}
.product-options-radiobutton {}
.product-options-dropdown {}
.product-options-colorpicker {}
.product-options-fileupload {}
Add On Charge
/*Add On Charge Styles*/
.product-options-price-info{}
.pricing-info-header{}
.pricing-info-product{}
.pricing-info-product-title{}
.pricing-info-one{}
.pricing-info-total{}
.pricing-info-total-price{}
Before and After
The box on the left is the Additional Added box not styled while the box on the right is styled. As you can see background color, font color, and a drop shadow has changed. All these are editable with CSS.
CSS of styles
Tool Tip
/*Tooltip*/
.tipr_content{}
.tipr_point_top:after{}
Accordion Styles
/*Accordian*/
.po-accordian-title{}
.po-accordian-group{}