button.Dropdown-toggle.Button.Button--icon.Button--link {
color: #ffffff;
}
NodeBBFan Is there any way to change the colour of these too?
You’ll need to tread carefully here, as changes can impact other elements on the site which will be unexpected, and difficult to troubleshoot if you don’t fully understand the CSS heirarchy.
Press F12 in the browser, and switch the the “Elements” view (it’s the default), or you can right click the icon in question, and choose “inspect” which will do the same thing
With the inspector running, click the icon shown below in the toolbar so it turns blue. Now you should be able to hover over elements on the page, and select them as targets
On the right hand side of the developer tools (assuming you have the tools docked to the bottom - it may be on the right), you should see this
Click the “+” symbol, and this will create a class for the element selected
In that new class, type “color” then press enter
Now define the colour (notice that the CSS standard uses US English 🙂) as shown below
Typically, we want more control, so we’ll use the HEX colour reference. For laziness, I’m choosing “green”
You should now see
But at this point, you’ll probably also notice that the icons haven’t changed colour 🙂. The reason for this is that we need to more specific in our targeting. These icons are created by Font Awesome, which in turn, uses the css class of i. So, we need to change the target by appending an i at the end of it, like the below
Click the element name
Use the arrow key (or mouse) to move to the right, and insert a space, then i
Press enter
If all went well, you’ll notice that the notification icon has turned green 🙂
Of course, there are thousands of shades of green! What if we want a specific colour ? Good question. There’s a good HEX colour reference chart here
CSS takes a lot of practice, experimentation, and patience to get right. This is why you have a DEV site 😃
