Website Theme - How to change the left menu color?

Let me start by saying this gets rather technical and can take a lot of time.

Instead of giving you the answer, I will show you how you can find the answer yourself, in case the customization bug bites you and you wish to push this farther.

Start by right-clicking the area you wish to change, and select ‘Inspect’ (in Edge or Chrome)

This will open a sidebar in your browser that shows you the code behind the page.

You’ll notice that if you mouse over sections of the code, different sections of the UI will be highlighted. This can be very helpful in finding the appropriate level to begin investigating.

If you expand a section (by clicking the caret), you’ll notice there are elements grouped underneath. If you mouse over a sub-section, the page will again highlight the corresponding section.

In this image☝🏼you’ll also notice the right-most section, which will show automatically if you resize the sidebar wide enough for it to show. This has a hierarchy of styles applied to the selected element. If you click on an element in the code pane (to select it), it will display the styles in the styles pane.

This sort of thing will be much easier if you understand a bit about CSS. The most important thing to know is that styles are layered. 

You’ll notice that one of the styles for the ‘Payables’ text element is named .list-group.modules.show-active .list-group-item.active (left of the yellow line).

Using a bit of logic here, it will make sense that the .active portion of this name is the style applied because the ‘Payables’ menu item is the currently selected workspace. You’ll notice it is prominent on the screen, compared to the other workspaces.

One really useful feature of the styles pane is that you can edit the style in realtime by simply changing a value. For instance, you mentioned you’d like the text to be white. So, you can click into the ‘color’ property and change it from ‘black’ to ‘white’ and BAM!

Once you determine the correct style section and property you need to change, in order to make the change permanent, you’ll need to actually open the style file from the website and make the change there. Any changes you make here will be erased as soon as you reload the page.

To open the style file, check out the nicely indicated file reference in the upper right corner of the style section:

The Site.css file is located at *siteName*/Content/Site.css 

If you open that file with something like Notepad++, you can check the line numbers on the lefthand side against the line number indicated in the same location above - in this case 2047.

If you make your way to line 2047, in that file, you’ll find this:

You’ll notice that the ‘color’ property is ‘black’ like it originally was on the site. If you change this property to ‘white’, save the file, and reload the site, you should see the change now made permanently. Sometimes it is necessary to force a page recache in order to see the changes, which can be done by holding the Shift key on your keyboard while clicking the browser refresh.

As a start, I will tell you that in order to get the menu background to be black, you’ll need to change:

This will result in: