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.
SUBSCRIBE 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 â–º
Joomla Training Cohort â–º https://cybersalt.com/jtc
mySites.guru â–º https://mysites.guru
MigrateMe 4 â–º https://www.php-web-design.
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/
FOLLOW US ON TWITTER! â–º @basicjoomla
Like Us On FaceBook! â–º https://www.facebook.com/
Add comment