The Joomla Training Cohort has been launched!

Please send any feedback or bug reports to tim@cybersalt.com (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 mysites.guru, 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! ► https://goo.gl/N6y5bH

😴👌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 ► https://cybersalt.com/jtc

mySites.guru ► https://mysites.guru

MigrateMe 4 ► https://www.php-web-design.com/Joomla...

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

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

Better Frontend Link ► https://regularlabs.com/betterfronten...

FOLLOW US ON TWITTER! ► @basicjoomla

Like Us On FaceBook! ► https://www.facebook.com/basicjoomla


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

Submit