How to find css elements using Firefox

[sdfontanini]

I like using the style variables, as I've tried this method before and couldn't locate the variable

[Andy]

Here's a simple tutorial which shows how to find css elements so you can easily change them and control how each element looks on your forum.

1) Download and install Firefox

In this example we will change the teal color surrounding the login inputs to black

2) Right-click on the teal color shown:



3) Select Inspect Element

4) Highlight and copy the css element on the right ".toplinks .logindetails {"



5) Go to your Admin CP and edit the additional.css template

6) Add the following

.toplinks .logindetails {
background: #000000;
}

7) Save template

8) That's all there's to it. Once you refresh your forum page you will see how the surrounding background of the login input is now black.