Using CSS with Widget Themes

Creating your own CSS rules allows you to override the default styles used on widgets.

UPDATE December 9:
Support for custom CSS that is loading with your website will cease on December 14th. You must add custom CSS to your widget theme.

Custom CSS is only supported when added to the 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

1. Make sure you are using a custom Theme.
2. Edit your Widget Theme and go to the Custom CSS tab on the left.
3. Paste in CSS you created to modify widgets, and SAVE
4. The Theme files will be regenerated.
   You should see the effect on your website within a minute.

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.

Other CSS articles:

• How to Remove or Hide Lead Capture