CODEWITHSUNDEEP
htmlcss
boca
boca

Reputation: 2352

Css overlay with background color inherited from theme

I'm trying to put an overlay on my page that will cover all the content. The problem is that my site allows you to change the theme colors, and the overlay div does not inherit the color from the theme. The only way to change it is using background-color: rgba( x, y, z, 1.0)

Here is my css for the overlay

.bio-overlay {
    position: fixed; /* Sit on top of the page content */
    display: block; 
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2048; 
    cursor: pointer; /* Add a pointer on hover */}

Is there a way to do this with css? If not I'll settle for some clever javascript. Thanks

Upvotes: 0

Views: 1100

Answers (1)

demitchell14
demitchell14

Reputation: 195

In theory, if the theme is class-based, you can steal, or even make another class that only has a background color attached to it, and apply it to the overlay as well. This would make it so if the theme changed, the overlay color would change.

.backgroundColor {
    background-color: rgba(x, y, z, 1.0);
}

<div class="bio-overlay backgroundColor">
    Content
</div>

Another solution is, if the overlay is a child of the theme, you can select the overlay and apply a background color to it that way.

.themeClass .bio-overlay {
    background-color: rgba(x, y, z, 1.0);
}

This will basically overload the .bio-overlay class and if the themeClass is a parent, it'll also apply the background color.

EDIT

To answer your comment, yes. In the stylesheet YOU edit, do something like this...

.whatevertheme .bio-overlay {
    background-color: _whatever_;
}
.whatevertheme2 .bio-overlay {
    background-color: _whatever2_;
}
....

It doesn't matter what file the style is in, all that matters is that it is included in the page. As I said in the comment, the only real downside is you'll break theme separation.

Upvotes: 2

Related Questions