Change Red Accents and Menu Bar Colours

assetivity1

Where can I adjust main template colours? I would like to change the accent red to #cc3333 for all the areas it appears (see image attached). Also, I'd like to change the Menu bar to a dark red#cc0000, and button 'training courses' to #3a3a3a.

pavit

Hi assetivity1

You can change the @brand-primary colors from this file /templates/ja_company/less/variables.less

// Brand colors
// -------------------------
@brand-primary:         #234269;
@brand-secondary:       #f87831; // T3 Note: Add secondary color
@brand-success:         #5cb85c;
@brand-warning:         #f0ad4e;
@brand-danger:          #d9534f;
@brand-info:            #5bc0de;

// Accent colors
// -------------------------

@black:                 #000;
@white:                 #fff;
@blue:                  #07b;
@green:                 #690;
@cyan:                  #09c;
@red:                   #c00;
@yellow:                #fc0;
@orange:                #f87831;
@pink:                  #d60a6c;
@purple:                #8b08ae;

After you changed them and saved file you should click on button less to css to compile files again

Hop it helps

assetivity1

Thanks - I have changed the colours using theme magic. However, how do I change the menu font ?

pavit

Hi assetivity1

add to your custom.css file in folder /templates/ja_company/css/

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>span {
font-family:yourfontfamily!important;
}

Regards

assetivity1

Thanks. I have tried to change the brand-primary and brand-secondary colours under /templates/ja_company/less/variables.less the compile less to css but it didnt work?

Tried the custom code also for the font and it didnt work either?

pavit

Hi assetivity1

Super user account you added in your first post doesn't works , please double check it so we can login and look at your settings.

aman204

assetivity1 Kindly review as your admin details added in edit fields arent working so as to take closer look

Also, Try disable JCH optimize due to conflicts seen in other instances too to see if it helps

assetivity1

Thanks - I disable JCH Optimize then checked but no change. I have also checked the login details, they are correct. Kindly try again?

pavit

assetivity1 I have also checked the login details, they are correct.

assetivity1

I created a new login and updated the fields, kindly check now.

pavit

assetivity1 I created a new login and updated the fields, kindly check now.

Your custom.css file contain wrong code and syntax errors

It should be

.jub-block {
font-family: source sans pro;
  }   <--------You missed to close it 


.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>span {
font-family:font-size: 20px!important;   <--------This has wrong code.
}

IT SHOULD BE AS BELOW

.navbar-default .navbar-nav>li>a, .navbar-default .navbar-nav>li>span {
font-family:ADD YOUR FONT FAMILY HERE WITH !important;  SUFFIX
font-size: 20px!important; 
}

assetivity1

Thanks - the menu font size is now bigger, what is the code to change the static and hover colours?

I originally wanted to change the red colours on the navigation arrows and buttons, but changing the brand primary and secondary didn't work?

aman204

assetivity1 what is the code to change the static and hover colours?

Have added this to custom.css file in which you can change color code accordingly however specific CSS isnt appending with JCH optimize turned on. Would suggest to try in-built optimization options in order to circumvent and still derive the optimization results as envisaged

.navbar-nav > li > a:hover{color:#ff0000 !important;}
.navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > span, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > span:hover, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > span:focus{color:#ff0000 !important;}/*for static state*/

I originally wanted to change the red colours on the navigation arrows and buttons, but changing the brand primary and secondary didn't work?

You may check now as I have tried changing respective colors in thememagic and the same is reflecting fine. Kindly ensure to clear your browser cache if changes dont reflect.