Styling Widgets

It is possible to completely change the color and theme for your Buying Buddy widgets to match the look and feel of your website.

There are several ways to achieve this!

  1. (easy) The simplest way that can be done by anyone without any technical skills is to create your own Widget Theme and pick colors - See "Widget Themes" below.
  2. (advanced) For more advanced and technical users, every Widget uses it's own CSS that controls how the Widget looks in your website.

Do not use "!important" in your main website CSS. If you use !important in your CSS this will override all and any CSS settings in the Buying Buddy widgets too. We strongly recommend that you create specific CSS rules rather than use this method.

Widget Themes (easy)

You can change most of the color theme for widgets on any domain from within your Buying Buddy account by setting a Widget Theme.
Navigate to: Websites & Widgets / Authorized Domains
Then click "Website Settings" for your selected website.

The Website Settings section for each of your Authorized Domains, has an option for selecting a Widget Theme for widgets on your website, as shown below:

To Review and/or Create your own Themes

Navigate to: Websites & Widgets > Widget Themes

The Themes section lists all your own Themes and all the Library themes too.

Once you have created your new Theme don't forget to go back to your Website Settings and apply the theme to your website!
To see your changes make sure you clear all website cache systems.

If you wish to create your own theme, review any existing Theme (e.g. a Library Theme) and click the COPY icon to create you own copy.

This theme will now be listed in your Account Widget Themes list. You will now be able to EDIT the theme and change colors as needed.

The last step is to apply this Theme - so go back to the Website Settings tab - and select your new Theme for your website.

See the Theme Editor in detail.

If you have multiple websites you can apply different Themes to each website

Widget Background Color

The theme color for Widget Background will be applied as a background color to all widgets apart from the following that are always given transparent backgrounds .

  • Search Form (MBBv3_SearchForm)
  • Lead Capture Form Widgets (MBBv3_LcForm)

Custom CSS can always be applied to override any background.

Creating Custom CSS styles (advanced)

Creating your own CSS rules allows you to override the default styles used on 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.

Create your own CSS Class or ID rules.
Target specific elements by using the same class names and identifiers.
Load your CSS after the Buying Buddy plugin CSS loads.
You can use the "!important" attribute if necessary to ensure your custom style overrides the default style set by our widgets.

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;
Updated on October 21, 2022

Was this article helpful?

Related Articles

Need Support?
Can't find the answer you're looking for?
Contact Support