Using Firefox Firebug Extension for Advanced customization (CSS)

Using Firefox Firebug extension for Advanced customization (CSS).

Note: The following CSS help requires the following software to be installed on your computer:

• Firefox browser and
• Firebug extension.

Firebug makes it easier to analyze your website CSS - which comes very handy for Wild Apricot Advanced Customization via CSS. You can click anywhere on your webpage and Firebug will automatically show CSS code associated with this element.

Following example will demonstrate how to customize Wild Apricot website menu using Firebug.

Open your Wild Apricot website by using Firefox and initiate Firebug (click on green round check mark in the right-bottom corner of Firefox browser). In Firebug menu select Inspect. Now move your mouse to position it on Wild Apricot website menu and you will see the following:

On the left hand side of Firebug you will see HTML code of the selected element. On the right hand side you will see CSS code applied to the selected HTML element.

CSS style of any element can be composed of several fragments, this is how CSS works via inheritance.

In our example we are interested in CSS style of the website menu (red circles in our screenshot above).

All you have to do is to copy this CSS code, go to CSS editor (Settings / Visual look and feel / Advanced customization (CSS)) and paste the code. Let's change the color:

#idMainMenu LI A,
#idMainMenu LI A:link,
#idMainMenu LI A:active,
#idMainMenu LI A:visited,
#idMainMenu LI A:hover
{
  color: #62BD19;
}
#idMainMenu LI A:hover
{
  background-color: #0073E4;
  color: #FFFFFF;
}

Press on [Save & Close] button. Now, go back to Wild Apricot website. You will notice that the menu has a different color.

You can now place your mouse on the menu and see new changes that you've just made in Firebug panels.

Firebug will allow you to edit CSS code but it will not save the changes - this is just a way to experiment and preview your changes. All permanent CSS changes have to be done through Advanced customization (CSS) Editor