Link & Footer background color

[unklsams]

Trying to change a) link color to blue & b) change the footer background color

Here is my extra-color.css:

:root {
--md-footer-fg-color: hsla(0, 0%, 100%, 1);
--md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
--md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
--md-footer-bg-color: hsla(0, 0%, 0%, 0.87);
--md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);
}

:root > * {
--md-typeset-a-color: #00BDD6;
}

And my mkdocs.yml:
extra_css:

• 'extra.css'
• 'extra-color.css'
  ( "-" before the 'extra.. though shows as dot when I post here)
  Site build is successful but no changes happening to the link & footer background colors!
  What am I doing wrong ?

[squidfunk]

You're missing a > * selector, as it should be:

:root > * {
  --md-footer-fg-color: hsla(0, 0%, 100%, 1);
  --md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
  --md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
  --md-footer-bg-color: hsla(0, 0%, 0%, 0.87);
  --md-footer-bg-color--dark: hsla(0, 0%, 0%, 0.32);
}

[unklsams]

Martin,
my priority issue is the link color..my header color is grey and the links are also shown in grey.
This is what I have now (changed color from #00BDD6).However not taking effect...

:root > * {
--md-typeset-a-color: #90030C;
}

[unklsams]

BTW, the footer color didnt work too with your above mentioned updates ! Attaching my requirements.txt used for site build, in case if this will help troubleshoot the problem:
mkdocs==1.1.2
mkdocs-awesome-pages-plugin==2.2.1
mkdocs-git-authors-plugin==0.3.2
mkdocs-git-revision-date-localized-plugin==0.7
mkdocs-material==5.4.0
mkdocs-material-extensions==1.0
mkdocs-mermaid-plugin==0.1.1
mkdocs-minify-plugin==0.3.0
mkdocs-pdf-export-plugin==0.5.6
mkdocs-table-reader-plugin==0.4.1
pymdown-extensions==7.1
markdown-blockdiag==0.7.0
markdown-include==0.5.1
flatten_json
pygments

[squidfunk]

It works if you follow the customization guide and add the following CSS (just verified it again):

:root > * {
  --md-typeset-a-color: deeppink;
  --md-footer-fg-color: hsla(0, 0%, 100%, 1);
  --md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
  --md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
  --md-footer-bg-color: deeppink;
  --md-footer-bg-color--dark: hotppink;
}

[unklsams]

Thanks this worked after I defined colors and page stretch in 2 different files...having both on the same .css file doesnt work - dont know if it is by design. Even if so, dont see that as an issue:

extra_css:
:root > * {
--md-typeset-a-color: blue;
#--md-footer-fg-color: hsla(0, 0%, 100%, 1);
#--md-footer-fg-color--light: hsla(0, 0%, 100%, 0.7);
#--md-footer-fg-color--lighter: hsla(0, 0%, 100%, 0.3);
#--md-footer-bg-color: black;
#--md-footer-bg-color--dark: black;
}

extra_pagesize.css:

.md-grid {
max-width: initial;
}

mkdocs.yml:
extra_css:

• 'extra.css'
• 'extra-pagesize.css'

[unklsams]

BTW, Is it possible to add an additional link (for example to JIRA or Xenhub) on the TOP (next to the search bar, and below the repo link)
I could add in the bottom by inserting/replacing "social:.." contents, but cudnt figure out where it gets the icons from. 'ld prefer adding here.