I'm making changes to Atum.

I'm changing the colours and I'm using user.css. I've placed it in:


I initially tried using :root and giving each variable a HEX value which worked.

I then decided it would be more efficient to assign the original variables with a new variable. That way if I wanted to I could restyle things in the future with a more descriptive way of knowing what each colour does.

When I try to reassign the variable such as:

--header-logo-bg: var(--blue--400);

I lose all colours.

Joomla Atum Admin Template with no colours

So then I thought I would try to localise the rule by targeting body instead.

body {
  /* Square Balloon Brand Colours */
  --blue--900: #2d3945;
  --blue--800: #233a5a;
  --blue--700: #54667f;
  --blue--600: #046b8d;
  --blue--400: #00aeff 
  --blue--200: #c3e7f3;

  --pink--200: #fee0dd;
  --pink--500: #f04c5e;
  --pink--600: #d51d4f;

  --yellow--800: #ee5d23;
  --yellow--700: #f9a41e;
  --yellow--400: #f5df99;
  --yellow--300: #f5e7c4;

  --header-logo-bg: var(--blue--400);
  --header-bg: var(--blue--400);
  --sidebarwrapper-bg: var(--blue--400);
  --main-nav-mm-active-bg: var(--blue--900);
  --template-sidebar-bg: var(--blue--400);
  --btn-primary-bg: var(--blue--400);
  --btn-secondary-border: var(--blue--200: #c3e7f3);
  --btn-secondary-color: #fff;
  --btn-secondary-bg: var(--blue--400);
  --btn-secondary-border: var(--blue--900);
  --header-item-content-bg: var(--blue--900);
  --header-item-content-jversion-color: var(--blue--900);
  -main-nav-ul-bg: var(--blue--900);

This also does not work. However if I just use the colour hex's instead of the variables it works fine.

What could I be doing wrong?

1 Answer 1


There's a missing semi-colon. Twat. All solved.

Thanks ChatGPT, you're a great friend.

Also a duplicate rule. Good catch CGPT.

  • What was the correct syntax with the colon that you used? Could you include it in your answer for people who may find this in the future.
    – Irata
    May 20 at 23:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.