NOTE 1: Pardon the Typos: I worked on this post after working through the night. Will review and fix later.
NOTE2: Check out my other video covering how to setup YOOtheme Layouts in WordPress using Widgets
I just completed a video recording divided into 6 parts totaling 2 hours and 38 minutes in creating a very customized set of CSS modifications for your specific request. The video captures every step of the process and I narrate each step and code and observation I made.
I started with only the basics, keeping it all very high level reviewing how I would approach the problem. I mention that this effect is going to be problematic to implement in Quantum for reasons that are obvious in my later videos.
I demonstrate this conceptually using the Cloud demo theme with updates made via Firebug.
I really dig deep into various nuances of CSS as I use them.
View Original Quantum Theme
View CSS Modified Quantum Theme
Part 1: Review and Understand the Question to Apply Fixed Background Image Effect
Watch Part 1 Video Now - Time: 11 min.
Description: In Video 1, I review the request posted by a member to apply the fixed background image effect in a YOOtheme Template. I present examples of the effect and review the approach I'll take to present this in great detail. I also review how to break apart LivingSocial.com website to understand how they applied this effect.
Part 2: Locating and Reviewing the Approach for Applying Update
Watch Part 2 Video Now - Time: 9 min.
Description: In Video 2, I review the Theme Demos to understand how to approach implementing the fixed background image effect. I also use Firebug to understand the markup anatomy of the theme.
Part 3: Apply Fixed Background Image effect to Cloud Theme (which is simpler than Quantum)
Watch Part 3 Video Now - Time: 14 min.
Description: In Video 3, I jump right into applying the fixed background image to the Cloud theme. The background was already reviewed in the first 2 videos. A lot of review of CSS and testing with Firebug is introduced.
Part 4: Cloud Theme Wrap Up and Staring Quantum Theme Update.
Watch Part 4 Video Now - Time: 12 min.
Description: In Video 4, I refine the styling of the fixed background image on the Cloud Theme. I also attempt to apply the fixed background image effect on the light background of the Quantum Theme Demo. I also present more Firebug tips.
Part 5: Begin Applying Fixed Background to Quantum Theme and Reviewing Issues
Watch Part 5 Video Now - Time: 18 min.
Description: In Video 5, I review what makes the Quantum Theme more challenging than the Cloud theme with applying the fixed background effect.
NOTE: I ended this video saying it was the last. However, a 6th video was created with even more indepth review of fully converting Quantum to fixed background image effect. Although I struggled in Video 5 with identifying solutions for Quantum Theme challenges, I do overcome them all in the next video.
Part 6: Applying Changes Tested in Firebug to custom.css file and other Advanced Techniques
Watch Part 6 Video Now - Time: 1 Hour 35 min.
Final CSS from Video 6
Description: I orginally planned on stopping at the end of Video 5. However, I realized I had not covered any details on how to apply Firebug CSS tests to custom.css file. Video 6 is by for the most technical and productive video with deep dive review using Firefox on Quantum Theme. I complete sytyling the Quantum Feature page with a fixed background image. Much time was spent encountering various challenges from overcoming color contrast issues between background image and HTML elements and with working with opacity.