Creating your own CSS rules allows you to override the default styles used on widgets.
Custom CSS is only supported when added to a custom Widget Theme in your Buying Buddy account.
Custom CSS that is added to your website or website-theme, or as CSS to load when your pages load, will have no effect on Buying Buddy widgets.
Add Custom CSS to your Custom Widget Theme
- Make sure you are using a custom Theme.
- Edit your Widget Theme and go to the Custom CSS tab on the left.
- Paste in CSS you created to modify widgets, and SAVE
- The Theme files will be regenerated.
You should see the effect on your website within a minute.
Please let us know in a help ticket if you need additional class names or IDs added so that you can target elements. Provide examples that illustrate your request.
Creating CSS to Customize Widgets
We recommend using the browser Console (F12 in Chrome or Firefox etc) to inspect Widget CSS elements and see the complete CSS rules for any element.
- Target specific elements by using the same class names and identifiers.
- Add your CSS to the Widget Theme "Custom CSS" panel.
For example:
Here is the default style for the Menu text directly above the Map on the Results widget (i.e. 'Draw Polygon', 'Modify Search' etc).
#MBBv3_ListingResults #iMap-tool-container .iMap-tool a {
color: #FFFFFF;
font-size: 10px;
text-decoration: none;
}
You could change the font size so it is larger by adding this rule to your stylesheet.
#MBBv3_ListingResults #iMap-tool-container .iMap-tool a {
font-size: 12px !important;
}
Buying Buddy widgets load HTML on your webpage using JavaScript / AJAX.
It is therefore possible to use the Browser Console functions in your browser to inspect elements and identify the CSS classes.