Jump to content

Editing background colour of sidebar nav menus on cart page


JamesP

Recommended Posts

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?

 

 

whmcs1.png

Link to comment
Share on other sites

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;} 

G1laA4k.png

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.

Link to comment
Share on other sites

  • 2 weeks later...

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?

 

whmcs2.png

Edited by WHMCS ChrisD
Edited as per the users request
Link to comment
Share on other sites

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...

mfw4656.pngXwfMuLY.png

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% !

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...

Important Information

By using this site, you agree to our Terms of Use & Guidelines and understand your posts will initially be pre-moderated