code in custom.css change color menu

pagefactory

Hello,

I used JA_morgean template style 2 on url oostveen.nu
I changed the backgroundcolor of the menu in the template.css

.head-menu {
background-color: #47494a;
border-radius: 4px;
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}

I tried to make a custom.css like this

.head-menu {
background-color: #47494a!important;
border-radius: 4px;
display: flex;
justify-content: space-between;
width: 100%;
position: relative;
}

But that does'nt work, I put the custom.css in templates/ja_morgan/css/themes/style-2

What is the good code that the custom.css works because on this way the color is gone with a template upgrade
somebody can help me ?

regards Rob

saguaros

Hi Rob,

As I can see that the head menu inherits the background color you set it custom.css file now.

This file will not be lost when you update new version of template.

Regards

pagefactory

Hi There

So I did it oke.

When I want to change the color #1e375c (dark blue) to the color #47494a (grey) in the whole website what is the code in that way for the custom.css , is that possible ?

and

the customer wants the font Arial 12 pt in the whole website can I change that to with the custom.css and what kind of code I had to use ?

Can you please help me with this
friendly regards Rob

saguaros

Hi Rob,

To change these typo globally, you need to change in LESS file (Remember to backup your site first):

ROOT/templates/ja_morgan/less/themes/style-2/variables.less

Look for this line:

@brand-secondary: #1e375c;

and change to your desired color

With the font, you edit this file: ROOT/templates/ja_morgan/less/variables.less

// Typography
// -------------------------
@font-family-sans-serif:  "PTRootUI", Helvetica, Arial, sans-serif;
@font-family-serif:       Georgia, "Times New Roman", Times, serif;
@font-family-monospace:   Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base:        @font-family-sans-serif;

@font-size-base:          16px;
@font-size-large:         18px;
@font-size-small:         ceil(@font-size-base * 0.75); // ~12px

change @font-family-sans-serif to your own font

and edit the @font-size-base variable

Finally, you need to compile less to css: https://www.t3-framework.org/documentation/bs3-configuration#compile-less

pagefactory

Oke saguaros,

the color change is done on the way you describe and it works but when I make this action my logo get smaller
I had large the height before in the template.css and now it's 30 px and cannot change it anymore (?)
Ik tried with a back up but the same problem. I have a clean backup now on oostveen.nu/backup there is the logo
how I change it.

then :
Font change I get when I compile to less the error

Compile LESS to CSS failed

    templates/ja_morgan/less/bootstrap.less
    variable @font-family-Arial is undefined

and what do you mean by edit the @font-size-base variable ?

@font-size-base: 16px; change in @font-size-base: variable; ? or do you mean
@font-size-base: "any size you want"px; by example @font-size-base: 20px;

saguaros

pagefactory You should put the custom css code into 'custom.css' file because when you added into template.css file, it will be overridden when you compile less to css.

pagefactory

I put this code in custom.css in templates/ja_morgan/css/themes/style-2

.head-menu {
background-color: #47494a !important;
}
.logo-image img {
max-height: 60px;
}

that does'nt work and I put it also in the root templates/ja_morgan/css/

Both does'nt work !!

and still the change for the font does'nt work

before - As I can see that the head menu inherits the background color you set it custom.css file now.
custom.css never works I changed the color in the template.css when I tried with custom.css nothing changed
On one way the custom.css does.nt work !!!

saguaros

I see your custom CSS is applied now on frontend:

pagefactory

saguaros , you write
_

With the font, you edit this file: ROOT/templates/ja_morgan/less/variables.less

// Typography
// -------------------------
@font-family-sans-serif: "PTRootUI", Helvetica, Arial, sans-serif;
@font-family-serif: Georgia, "Times New Roman", Times, serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-family-base: @font-family-sans-serif;

@font-size-base: 16px;
@font-size-large: 18px;
@font-size-small: ceil(@font-size-base * 0.75); // _12px

change @font-family-sans-serif to your own font

and edit the @font-size-base variable

I still want to change the font in Arial and 12 pnt and I want to change the text color (gray) into (black)

I get the error:
templates/ja_morgan/less/bootstrap.less
variable @font-family-Arial is undefined

and where can I find the text color

saguaros

pagefactory Which file did you change?

You can share the FTP account so I can check for you.

pagefactory

Yep, I did now !!

saguaros

pagefactory Which file did you make changes?

Could you backup your site first so I will compile and see how it goes?

pagefactory

yes I did Saguaros

saguaros

pagefactory Which file did you change? I asked you twice 🙂

pagefactory

in less/variables.less

https://www.joomlart.com/forums/assets/files/2023-03-23/1679605353-795090-schermafbeelding-2023-03-23-om-220159.png

Rob - pagefactory -

cssyeah

Hi @pagefactory,

I have updated the new font variable (@font-family-Arial) in the variables.less file. It should fix the errors when compiling from LESS to CSS.

Regards,

pagefactory

thank you

pagefactory

I compiling less to css and get no errors

Is my custom.css now still working ?

.head-menu {
background-color: #47494a !important;
}
.logo-image img {
max-height: 60px;
}
_.t3-section-wrap .mod-bg-gray {
background: #919194 !important;
}
.t3-mainbody > .row > div.t3-sidebar-right {
border-left: 2px solid #919194;
}

the last two I put in the custom.css after I did LESS to CSS
in the root 🇦 templates/ja_morgan/css/themes/style-2
and because it does'nt work I put the codes also in the custom.css in the root
templates/ja_morgan/css

Why does not the change work ?

regards Rob

saguaros

Hi Rob,

You custom css code is still being applied on frontend of your site, could you tell me which change you're referring to?

pagefactory

saguaros works fine now thx