The Joomla Training Cohort has been launched!

Please send any feedback or bug reports to (opens new link)  

I'm always looking for ways to not have to remember the HEX and/or RGB codes for the colors I am using when designing a website. I'm also always on the watch for ways I can cut down on the steps when it's necessary to change those colors as their part in a theme. Giving colors unique names in your CSS file through the use of 'body' and 'color: var' accomplishes both very nicely!



- Video Title: "(1) Simplify and Batch Change CSS Colors Using 'body' and 'color: var' - 👀 Watch Me Work 095 - YouTube"
- Presenter: Tim Davis
- Introduction:
- Tim Davis, a Joomla enthusiast, explains an easier way to change colors on Joomla sites.
- Acknowledges his tiredness due to lack of sleep.
- Mentions the system he will demonstrate to simplify CSS color changes.

- Sponsorship:
- Video sponsored by, offering free site audits for Joomla and WordPress sites.
- Viewers can use the coupon code "basicjoomla" for the first month free on subscription.

- Live Demonstration:
- Tim demonstrates using an Asteroid template in a plain Joomla install.
- Shows HTML code with div classes: test1, test2, test3 for different levels.
- Accesses the Asteroid template's custom CSS section.
- Demonstrates changing color for "test1" to blue in CSS.
- Shows the updated color on the website.

- Matching Colors:
- Tim matches the link color to "test1" by inspecting the element and copying the color code.
- Explains the traditional method of finding and replacing hex codes throughout the CSS.
- Updates the color for an item title and its link using the same approach.

- Time-Saving Technique:
- Tim introduces a time-saving technique using CSS variables.
- Defines a color variable in the body: "--myblue" with a specific hex code.
- Applies the variable to different elements, reducing the need for manual changes.
- Demonstrates how changing the variable updates the color across the site.

  • Conclusion:
    - Tim emphasizes the efficiency and convenience of using CSS variables for color management.
    - Encourages viewers to implement this technique to simplify future color adjustments.

Watch Me Work Livestreams 095SUBSCRIBE TODAY! ►

😴👌Watch Me Work live streams ►    • Find and Replace ...  

Here are some of the links mentioned in this Live Stream - and some others:

Contact Tim Davis ► This email address is being protected from spambots. You need JavaScript enabled to view it.

Joomla Training Cohort ► ►

MigrateMe 4 ►

Stageit for Joomla ►    • First Look at Sta...  

Backing Up Your Joomla Site with Akeeba ►    • How to Backup a J...  

Better Frontend Link ►

FOLLOW US ON TWITTER! ► @basicjoomla

Like Us On FaceBook! ►

Interesting blog? Like it on Facebook, Post it or share this article on other bookmarking websites.

Written by:
Tim Davis is the founder and owner of Cybersalt.
Log in to comment

Add comment