Atomik theme nav text colors

alaneku · January 12, 2023, 10:10am

Hi
I have been been using the customised skin option with the atomik theme, and generally it is quick and easy. Mostly I have been able to achieve what I want.

However there area couple of issues:

Perhaps I am stupid but there seems to be no description of what the “primary”, “secondary”, “Light”, “accent” and “dark accent” colours affect in the actual template.

I have looked at the " Customize Colors" in the developers documentation and whilst it describes how to change the above colours, it does define what each colour changes in the template.

The customise skin option does not allow the changing of the nav colours, normal, hover and selected etc. Indeed the colours in the top nav seem to different to the colours in the auto nav block I am using in the side bar.

The customise skin option creates a css file in application/files/presets this is one of those css file with everything in one line which I find “mind blowing”.

My question is it possible optmise nav colours in the css file mentioned above ? Assuming that it is possible to find where these colours are defined in this css file ?
Is it possible that css file in the application/files/presets directory could be created in a “structured” form ? so beginners like me could understand it ?

Sorry, I forgot. The colour issue also affects the Breadcrumbs, should this be changed in the files in the standard atomik set up ? are the breadcrumbs, auto nav colours etc inherited from the standard atomik theme into my custom skin ??

Edited Note:

I have discovered by trial and error that the primary colour affects the nav text. It seems however that the top nav acts differently than the auto nav in the side bar. The selected page nav text in the side bar has a blue colour, whilst the rest of the text is the dark green that I want .

The dark green I set as primary also turns up in the link text in the rich text editor,

So I have solved my immediate problems, but it would still be useful to know where “primary”, “secondary”, “Light”, “accent” and “dark accent” colours appear.

EvanCooper · January 18, 2023, 9:26pm

Hi @alaneku -

So you can get a sense of where these things are used by going into your terminal and using the grep command in the atomik theme directory like so (make sure to escape the dollar sign with backslash):

$ grep -i -r \$light .
./css/scss/features/navigation/_date-navigation.scss:      background-color: rgba($light-accent, 0.2);
./css/scss/features/navigation/_autonav.scss:    background-color: $light;
./css/scss/features/social/_share-this-page.scss:      background-color: $light;
./css/scss/features/account/_navigation.scss:        background-color: $light;
./css/scss/_shared-variables.scss:    "light-accent": $light-accent,
./css/presets/default/_customizable-variables.scss:$light: #F3F3F3 !default;
./css/presets/default/_customizable-variables.scss:$light-accent: #9BA5B0 !default;
./css/presets/rustic-elegance/_customizable-variables.scss:$light: #F0E5D8 !default;
./css/presets/rustic-elegance/_customizable-variables.scss:$light-accent: #F0E5D8 !default;

Hope that helps!

alaneku · January 19, 2023, 11:16am

Thanks very much that is useful. I have checked /themes/atomik/css/scss/features/navigation
and the auto nav css file give

active {
color: $primary;
font-weight: bold;

In my skin I have set the primary to dark green

But the screen shot shows a blue colour.

Could the problem be in megantech/application/files/presets css file for my custom skin ??
Thanks again for your help

alaneku · January 19, 2023, 6:48pm

Hi again

I checked my custom skin css file in application/files/presets and the autonav active colour is set to #4a90e2 which is the blue shown in the above screen shot although the primary colour set in my custom skin is #607124 which is the dark green shown above

alaneku · January 23, 2023, 12:46pm

Me again - Success!!

I changed “div.theme-atomik div.ccm-block-autonav .nav-item .nav-link.active” in my custom css skin file in the /application/files/presets directory

From #4a90e2 (the original Atomik Primary colour)

to #5c9600 (the primary colour of my custom skin)

and success, my active colour in the Autonav is now the primary colour of custom skin just the same as the links below the picture

alaneku · January 23, 2023, 12:56pm

Hi Me yet again

What a bummer (if I am allowed to use that word) … The above screen shot was taken just after I done the modifications in backend. After I logged out I checked the site it another browser and the active colour was back to blue again. When I reopened the site in the back end then the dreaded blue was back.

Is the custom skin css file in application/files/presets compiled ?? There must be something somewhere that overridden my changes.

ampersand · January 23, 2023, 7:30pm

override this in your Custom CSS, otherwise, every Concrete update will restore default values

alaneku · January 24, 2023, 2:48pm

At last !!!

Now it does work, thanks very much, you made my day !!!

ampersand · January 25, 2023, 7:57pm

Could you mark it as solved? Thx

alaneku · January 26, 2023, 10:04am

Hi

I would certainly be happy to mark as solved - your help was greatly appreciated - but cannot see how to mark it as solved. I am logged into the forum but cannot see any button or tab in which I can mark as solved.

Generally I have found Concrete cms as an excellent system and I am well on the way to create a new website. If I have one criticism it is the documentation. I know that documentation is very time consuming and probably tedious for the knowledgeable person, but for a new comer as I, it is very important.

It could be worth while to take the subject of this thread to illustrate my point.
The Custom CSS, Add Custom CSS tab at the bottom of the customise skin tab would benefit from a short note such as: :
“Add or modify your css code here. Your modified code will be included and compiled into your custom skin specific css file located in application/files/presets directory. Your skin specific css file will not be overridden in any future upgrades.”

Yet another issue here is when you open the tab and insert the custom css code into the window there is no button like “save” or “compile” you have to exit the window and then the compiling as executed and it is necessary to save using the tab in the bottom right hand corner. Obvious, I am sure, to experienced, but contra intuitive to the inexperienced like me.

I thank you again for your help

ampersand · January 26, 2023, 9:09pm

the lack of the “Save” button is an oversight in my opinion and saving your own CSS is confusing, probably not only for you and me - there are several other places like this.

As the author of the post, you should be able to mark the question as solved here.

alaneku · January 27, 2023, 8:24am

OK now I have marked as solved. I thank all of again for your help