Help changing navigation bar color on WHMCS Version: 7.2.1

[ocastaned]

I need some help on how to change the navigation bar color on WHMCS 7.2.1. Thank you.

[WebsiteIntegrations]

Just the bar color? In your css/custom.css add

 

.navbar-main {

   background-color: #1d5981;


}

 

 

and change it to the color that you want.

 

- - - Updated - - -

 

If you need help with HEX color codes please see https://www.w3schools.com/colors/colors_picker.asp

[ocastaned]

Thank you but I added the code, but it didn't work. This is the path: templates/six/css/custom.css

[brian!]

Thank you but I added the code, but it didn't work. This is the path: templates/six/css/custom.css

the path is correct (if you're using Six as your template)..

 

the above hex is similar to the default colour, so try making it red and see if that works...

 

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

if it doesn't work, then you can't be using Six as your template.

[ocastaned]

Thank you, but for any reason it's not working.

 

I put it this way but nothing: .navbar-main {

 

background-color: #1d5981;

 

 

}

 

 

Also, I tried this other way:

 

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

[brian!]

when you go to the WHMCS homepage on your site and view the html source in the browser, do you see something like the line below...

 

<link href="/whmcs/templates/six/css/custom.css" rel="stylesheet">

if not, then i'm wondering if you're using a custom template and/or it's not called six...

 

it might be helpful to see a link to your site because if you're using Six and you've modified custom.css, then the navbar color should change (unless you have a browser caching issue).

[ocastaned]

I actually see that link in the code. This is the site (please don't put spaces):

 

https://ser vido res segu ros.com / clie ntes /

[brian!]

the custom.css file linked to is blank...

/* ***************************************************** 
   ** Custom Stylesheet **

   Any custom styling you want to apply should be
   defined here.

***************************************************** */

so wherever you've been adding your CSS, it's not been in the correct place... /clientes/templates/six/css/custom.css

 

e.g., when you edit the correct file, and use #1E78FF, it should match your logo color...

 

[ocastaned]

I put it and saved the changes, but still don't see the change. Here a screenshot: https://gyazo.com/3d15eb947ad75700ba38586d6a023e43

[brian!]

the file is still empty - view the page source and click on the link to the custom.css file...

 

 

if you have added code to that file, you should see it by clicking the link... are you 100% sure you're editing the correct file ?

[ocastaned]

It is very weird. I recorded a video:

[brian!]

try pressing shift + Reload in the browser... looks like it was cached... i'm seeing it working on your site now.

[ocastaned]

Thank you It is working now, but what about the "see cart" button top right, and the bar below where it says "buy domain" etc.

 

screenshot: https://gyazo.com/794cc58801368bc2f3b2640c1adb129a

[brian!]

/* *****************************************************

   ** Custom Stylesheet **

   Any custom styling you want to apply should be
   defined here.

***************************************************** */

.navbar-main {background-color: #1E78FF;}  
ul.top-nav > li.primary-action > a.btn {background-color: #1E78FF;}
.btn.btn-action {border-color: #1E78FF;}

 

[ocastaned]

Thank you so much. It worked!

 

My last question, is there any way to change color or replace the yellow background when searching for a domain name. This is a screenshot: https://gyazo.com/87eec73d2950f12ce17323019c35f1ab

 

I am not sure if that is an image?

[brian!]

the easiest way to do things like this is to right-click on what you want to change and "Inspect Element" - and that should tell you the css item to change... e.g to remove the globe logo...

 

.domain-checker-bg {background-image: none;}

[creigelde]

try this one for more...color codes

[nathi]

Hi how to change hover over color in whmcs

[Greysoul]

On 5/3/2020 at 2:44 AM, nathi said:

Hi how to change hover over color in whmcs

i've been beating my head against the wall trying to figure this out.  i've been trying all kind of different things from the tags in the html..can't get it.

[brian!]

8 minutes ago, Greysoul said:

i've been beating my head against the wall trying to figure this out.  i've been trying all kind of different things from the tags in the html..can't get it.

the following would change the navbar red and change hover color to black....

.navbar-main {
    margin-bottom: 0;
    background-color: #ff0000;
    border: 0;
    min-height: 38px;
    font-family: "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 15px;
}
.navbar-main li.account {
    background-color: #ff0000;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: #eee;
    background-color: #000000;
}

if you want to change a hover color, just find out what it's called in all.css and add your custom css changes to custom.css

[Greysoul]

Thanks Brian, i actually found this right before you posted.  I opened up all.css and just searched the color and bam 🙂  Now i am finding it a little difficult to locate the mobile version options.  Obviously the menu is different and my links don't read well on my new background color.  What should i be looking for to locate the CSS for it?

 

nevermind, found it! Dang i'm getting better ..only takes me an hour at a time now

Edited May 14, 2020 by Greysoul

[jasongeek]

Cool. I can definitely do this with the help of your post. It would be more convenient if they had a help color picker or different color schemes you could choose from.