Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Cisco Rendon
PLUS
Cisco Rendon
Courses Plus Student 37,546 Points
Posted by Cisco Rendon
Cisco Rendon
Courses Plus Student 37,546 Points

How to use the Overlay class?

Hello Treehouse community,

Here is a absurd question (which I should already know) but I have websites that use the overlay class. When I attempt to use it, I fail at making it properly work for me. I work around it or don't use it at all. So now, here I am thinking about the Overlay class and I am wondering if anyone out there has used it and achieved the look they were going for?

If so, please let me know where I went wrong. Thanks, much appreciated

Steven Parker
Steven Parker
231,007 Points
Steven Parker
Steven Parker
231,007 Points

Without the CSS file, a class name (like "Overlay") has no meaning. It would be necessary to see both the CSS and HTML to diagnose the problem.

A good way to show all the code at once is to make a snapshot of your workspace and post the link to it here.

1 Answer

kenneth Parcher
kenneth Parcher
4,693 Points
kenneth Parcher
kenneth Parcher
4,693 Points

As Steven said, you have to know the css styling that applies to it. That could be coming from something like a theme, framework or plugin. To find the origins of the styling, try adding a clean, empty div element and applying the Overlay class to the div. Then bring up the page in Chrome or Firefox and right click on the div and select "Inspect" to bring up the Developer Tools window. In the window, you can see the properties that the browser derived from styles pertaining to .Overlay. Also, you can see a link to the stylesheet that produced those properties. Click on that link to view the stylesheet itself and/or use the path of the link to find the stylesheet and bring it up in your editor where you can look for any styles anywhere in the sheet that pertain to .Overlay. The styling should give you a clue as to how it's used.