Simple Machines Community Forum

Customizing SMF => Graphics and Templates => Topic started by: Sir Osis of Liver on August 04, 2024, 02:19:14 PM

Title: CSS problem
Post by: Sir Osis of Liver on August 04, 2024, 02:19:14 PM
Been tinkering with Shawn's themes that have animated backgrounds, and have run into a wall trying to do something that should be simple.  If you look at Starflight here (https://www.thekrashsite.com/smf21/), I've made the wrapper somewhat transparent by setting opacity: 0.7.  Would like to set some elements to opacity: 1.0, so they're not transparent (look at post text .inner), but nothing works.  If I change opacity of any element within wrapper it has no effect, nor does z-index or rgba().  The consensus at stackoverflow seems to be that it can't be done, all elements within a parent inherit opacity and there's no way to change it.  Trying to avoid setting opacity for all elements within wrapper individually, which I've done in other themes.  Is there a workaround?

Plan B (https://www.thekrashsite.com/smf21core/)
Title: Re: CSS problem
Post by: dodos26 on August 05, 2024, 03:54:02 PM
Brother, indicate in the picture what you want to do because I don't understand what you mean.
Want to make the top bar transparent without affecting other things?
Find <div id="top_section" to edit dont use . use #top_section and add opacity: 0.7;
(https://i.ibb.co/bzwxH0M/image.png)

Or this?
(https://i.ibb.co/VpjDTTH/image.png)

Or this
(https://i.ibb.co/g6kdLvr/image.png)
Title: Re: CSS problem
Post by: Kindred on August 05, 2024, 04:31:49 PM
No, he wants to make the BACKGROUND and cotents of the container less opaque/partially transparent..

 but have the child container(s) be more/fully opaque on top of the partially transparent underlying layers defined by the parent container
Title: Re: CSS problem
Post by: Antechinus on August 05, 2024, 06:14:40 PM
Quote from: Sir Osis of Liver on August 04, 2024, 02:19:14 PMThe consensus at stackoverflow seems to be that it can't be done, all elements within a parent inherit opacity and there's no way to change it.
Correct.


QuoteIs there a workaround?
You seem to have figured out the obvious one already.
Title: Re: CSS problem
Post by: Sir Osis of Liver on August 05, 2024, 09:37:23 PM
First idea was to make everything transparent then make specific elements opaque.  That didn't work for reason described above, was curious why not.  Plan B, which I'm currently running, uses rgba() to make wrapper transparent, but it doesn't affect child elements, so those are opaque and I can make any of them transparent as well.  Not planning to do too much of that, theme looks pretty good as is.