Jump to content
Frozen233

Change color of navigation menu

Recommended Posts

Hello,

I would like to change the default 'blue' colors from the WHMCS Six template to another color such as red. I tried to google for the solution and changing the  css files in side  templates/six/css did not seem to do the job? Can someone tell me the right (and easy) way to do it?

Thanks a lot :)

Share this post


Link to post
Share on other sites
12 hours ago, Frozen233 said:

I would like to change the default 'blue' colors from the WHMCS Six template to another color such as red. I tried to google for the solution and changing the  css files in side  templates/six/css did not seem to do the job? Can someone tell me the right (and easy) way to do it?

you'd need to edit /templates/six (or custom)/css/custom.css and add...

.navbar-main {background-color: #ff0000;}  

Zs0lgfQ.png

if you don't rename the 'Six' template, then remember to backup custom.css before updating WHMCS as the automatic updater will overwrite the file.

Share this post


Link to post
Share on other sites
22 hours ago, Frozen233 said:

Thanks a lot. What about the other two blues shown in the picture?

section#home-banner {
	background-color: #ff0000;
}
.home-shortcuts {
	background-color: #ff0000;
}

plus if you want to change the border colors between those links (hosting/payment/support)...

.home-shortcuts li {
	border-right: 1px solid #ff0000;
}
.home-shortcuts li:first-child {
    border-left: 1px solid #ff0000;
}

 

Share this post


Link to post
Share on other sites

what about the colors of the drop downs in the main menu (background color) and the left panel rollover color. Where is the css located for that?

Share this post


Link to post
Share on other sites
1 hour ago, kship said:

what about the colors of the drop downs in the main menu (background color) and the left panel rollover color. Where is the css located for that?

Did you know you can find these for yourself? A color sampling tool would help, as would using something like Firefox's web tools. While viewing the page, hit the F12 key. That should open the console, and in that a button that you can click then hover over the color in question. Click on the element, and it's fairly easy to find why it's the color (or location and so on) it is. 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

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