Ja Morgan - Can I change just the color of the theme to a style?

lawyerlinguist1

Hi there,
I am using Ja Morgan and I am ok with style 4, particularly for the layout of the menu, but I'd prefer the color of style 2: I am referring to the color of the icons and of the square with the arrow to bottom right that brings you to the top of the page. Same goes for the module, the secondary color looks different across styles.
Therefore: how to make the kind of blue you find in style 2 across the site apply to the style 4 as well?

Same would it be if I could have the menu layout of style 4 for style 2 as well.

Thanks

saguaros

Hi lawyerlinguist1

In this case, I suggest you to work with LESS file for global changes. Remember to backup your site first.

You can go to template >> enable Development Mode so your site will work with LESS files:

Now go to file: /templates/ja_morgan/less/themes/style-2/variables.less

It declares some specific variables for style-2 of template, primary/secondary colors there.

// Brand colors
// -------------------------
@brand-primary:           #21c674;
@brand-secondary: 			#1e375c;

If you want to have the same color for style-4, you can copy to associated file of style-4: /templates/ja_morgan/less/themes/style-4/variables.less

Regards

lawyerlinguist1

Thank you,
I have 2 questions.
1. After I apply the changes should I turn OFF the development mode?
2. can't the color be changed just via custom.css?

saguaros

lawyerlinguist1

I recommend you to work with LESS as you need to edit the variable only, while with CSS, you will have to customize different parts.

Once you've done the development and turn off the dev mode, you should compile LESS to CSS to see the changes:

REMEMBER to backup your site first as when you hit this compile button, all your customization in LESS files will be compiled to corresponding CSS files and they will overwrite the current CSS files.