How Do You Make A Table Transparent?

[Violette]

I would like to make this table transparent, but have no idea of how to go about it? Is it even possible? Any help will be greatly appreciated!

<style type="text/css">
.inner_cont{
display: block;
float: left;
width: 31%;
padding: 8px;

}
</style>

<div class="container">
<div class="title-bar" style="text-align: center;"><h2><font size="3"><i>Breaking News!</i></font></h2></div>
<div class="content">
<div class="inner_cont">
Contentone<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="inner_cont" style="border-left: 1px solid black;border-right: 1px solid black;">
Contentone<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>

<div class="inner_cont">
Contentone<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</div>
Thank you for any help,

Violette

[Nori]

If you remove the default classes then it won't inherit any styling from the theme.

So, remove the class="container", class="title-bar", and similarly the "content" class. Though you may have to replace those classes with your own styling then.

[Violette]

Jul 22, 2018 7:24:09 GMT -8 Nori said:

If you remove the default classes then it won't inherit any styling from the theme.

So, remove the class="container", class="title-bar", and similarly the "content" class. Though you may have to replace those classes with your own styling then.

Hi, Nori ! Thank you for responding! I'm pretty much "code illiterate" and can't quite understand what I should do. This is the table on my forum:



I would like to keep the three sections of the table, but just make the background transparent, like the rest of the forum. If I remove the
"container", "title-bar" and "content", I would not know how to do my own styling.

Is there another way?

[Lynx]

Violette,

Are you wanting just the content are to have the transparent background (leaving it solid behind the title bar)? If so, try changing the line in red from here:

<div class="container">
	<div class="title-bar" style="text-align: center;"><h2><font size="3"><i>Breaking News!</i></font></h2></div>
	<div class="content">
		<div class="inner_cont">
Contentone<br />Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
		</div>

to this:


<div class="content" style="background: transparent;">


See if that works for you.

[Violette]

Hi, Lynx !

Wow...that worked beautifully!  Thank you!

LOL...of course now I'm wondering if it could be a little more opaque, like shown in the contents of the forum?

[Lynx]

Violette,

Try changing the line I gave you:

<div class="content" style="background: transparent;">

to this instead:

<div class="content" style="background: transparent; opacity: 0.3;">

The opacity goes from 0 (transparent) to 1 (opaque). If the 0.3 is too much opacity, try dropping to a 0.2 or 0.1 to increase the transparency aspect.

[Violette]

Interesting! It dimmed the text as well as the background! Hmmm...is this even going to be possible to just do the background of the table?

[Lynx]

Violette,

Okay, I'll make one more stab at it. If this doesn't work, you'll need to wait for someone else. Try changing this:

<div class="content" style="background: transparent;">

to this:

<div class="content" style="background: rgba (0,0,0,0.3);">

That sets a black background that's partially transparent. If you want a softer color, other than black, change the first 3 numbers to a color you like. The last number, the 0.3, is the opacity setting and follows the same thing I stated above regarding the opacity property.

Take note that this does NOT use hex numbers for colors, but decimal values from 0-255. Enter them in order of red, green, blue.

rgba (Red, Green, Blue, Opacity);

(Note: The 'a' in 'rgba' actually stands for 'alpha', but it's for opacity.)

[Retread]

Jul 22, 2018 13:02:02 GMT -8 Lynx said:

<div class="content" style="background: transparent; opacity: 0.3;">

I would guess the background is still transparent but the text has been styled to be less opaque?

Maybe the background needs to be set to an RGB level with the fourth element being the opacity?
Would this work as a starting point?

<div class="content" style="background: rgb(0,0,0,0.3);">


Edit: Nevermind. You're already there. lol

[Violette]

That did restore the text, but didn't change the background opacity of the table. Bummer. Thank you, Lynx, for your help and patience!



Thank you, Retread, for your help, as well.


Hugs,

Violette

[Lynx]

Sorry I couldn't be more helpful, Violette.

[Liam]

If you could temporarily open your forum so we can look at the code and test to see what works, that would help out a lot. You can put it back into maintenance mode when it's fixed.

[Violette]

Lynx, you were wonderful to step in and try to help me, and I really do appreciate that! Many thanks to you, and all the members here, who offer their help in figuring out solutions.

[Retread]

Jul 22, 2018 14:08:31 GMT -8 Violette said:

You were wonderful to step in and try to help me, and I really do appreciate that! Many thanks to you, and all the members here, who offer their help in figuring out solutions.

I reckon if you copy the CSS that pertains to Grand Entrance Hall and paste it into a post on this thread, we could use that to understand how to alter the opacity of the background image in The Showcase.

EDIT:
Similar to what happens here with the image you posted:

[Violette]

Jul 22, 2018 14:04:41 GMT -8 Liam said:

If you could temporarily open your forum so we can look at the code and test to see what works, that would help out a lot. You can put it back into maintenance mode when it's fixed.

Unfortunately, I have the forum pretty messed up, moving stuff around and changing things up. (I really would hate for anyone to see it right now. LOL) I could put the table on a test forum, and put in a patterned background for it, and then I could open that, if you want to give it a try?