How Can I See Which CSS Styles Edit Different Parts of my Site? (Requires FireFox)

Finding/Editing CSS Styles

Certain design elements like font and area color can be edited within the site’s cascading style sheet (CSS) . However, it can be difficult to locate which style specifically needs to be edited in order to change a particular element. Using a FireFox plugin called Firebug, this process can be very easy.

You can download the Firebug plugin for FireFox here:

Please Note
Firebug is not a 3dcart product, nor is it a product we can provide support for. We only reference it here for informational purposes and since it can be useful to your needs when you need to change a simple element of your site. There are many web developer tools similar to Firebug available online and for different browsers. However, we find Firebug is the easiest to use for both novice and experienced users alike.

Using Firebug

  1. With Firebug installed, visit your store in Firefox and press the F12 key.

This will bring up the Firebug interface which will look like a simple console on the lower portion of your browser screen.

  1. Click the Inspect Element Button on the left side of the Firebug console.
  2. Then, hover over the text or specific part of the store you’d like to find the Style for.

The Firebug plugin will highlight the element as it is being selected, similar to the following screenshot.

  1. In the right side of Firebug the Style information of the selected text or area will be shown.

In our example, we see that the element we selected is part of the “menu-header” style. We can now use this information to edit our Style Sheet.

  1. From your 3dcart Online Store Manager, go to Settings ->Design ->Themes and Styles
  2. Click on “Edit Look/Colors (CSS)” to make your adjustments.

Congratulations! You’ve successfully found and edited the styelsheet using Firebug. You can find more help on using Firebug here: