Editing background colour of sidebar nav menus on cart page

[JamesP]

Hi

 

I am just getting started with customising my WHMCS install.

 

I have read this -https://developers.whmcs.com/themes/css-styling/ and applied my styling to the custom.css.

 

I decided to start simple and just edit the background color of one of the side bars.

 

This is what i've done

 

Inspected the element in the browser (see attached screenshot)

 

Applied below in whmcs/templates/customtemp/css/custom.css

 

.panel.panel-sidebar
{
    background-color:;
}

 

upload, restarted apache  and reloaded the page.

 

The background is still white, can anyone advise where I have gone wrong?

 

 

[brian!]

17 hours ago, JamesP said:

The background is still white, can anyone advise where I have gone wrong?

you didn't give it an alternative color to use - so it left things as they are...

if you were to assign individual colors to elements of the sidebar, that would work...

.panel-sidebar > .panel-heading {background-color:#FF69B4;}
.panel-sidebar .list-group-item {background-color:#FFB6C1;} 

you'd also have to take care of active/focus etc if you want the colors to remain the same when the cursor interacts with the sidebar.

[JamesP]

Hi

 

That was just a typo, but what you have provided now works.

 

This is really confusing me and making me question everything I know about CSS.

 

If you see the attached screenshot, I can change the "order summary" background color to blue, within the browser.

 

When i try the same in the /whmcs/templates/customtemp/css/custom.css file like the below -

#order-standard_cart .summary-container { background-color:blue; }

 

Nothing happens, though I can clearly see in the "inspect" in the browser that element is ID order-standard_cart .summary-container

 

I'm really struggling how to find out the right ID/classes for the elements I want to edit, it always works within the browser, but 50/50 if i try it myself.

 

Am i missing something?

 

Edited October 2, 2018 by WHMCS ChrisD
Edited as per the users request

[brian!]

Hi James,

23 hours ago, JamesP said:

This is really confusing me and making me question everything I know about CSS. 

after a few more weeks of using WHMCS, you'll start questioning your own sanity - not just your CSS knowledge! 😖

23 hours ago, JamesP said:

When i try the same in the /var/www/vhosts/dev.clan-servers.com/whmcs/templates/customtemp/css/custom.css file like the below -

#order-standard_cart .summary-container { background-color:blue; }

Nothing happens, though I can clearly see in the "inspect" in the browser that element is ID order-standard_cart .summary-container

the way to think of it is that the custom.css file is called before the orderform template css file - therefore, anything defined in the orderform css supersedes what you've added in custom.css - the usual way to get around that, would be to use !important as that would give that change priority over what's in the orderform css.

so if I edit custom.css and use the following...

#order-standard_cart .summary-container {
	background-color: blue !important;
	color: white;
}

I get the following result...

so i've had to use !Important on the background colour, because that is already defined in the orderform css; whereas the text colour isn't defined there, so I don't need to use !important for that.

23 hours ago, JamesP said:

I'm really struggling how to find out the right ID/classes for the elements I want to edit, it always works within the browser, but 50/50 if i try it myself.

hopefully, the !important tip helps with the second 50% !

[JamesP]

You sir, are a legend.

 

Thank you for explaining that to me.