Question about partially transparent backgrounds for a theme

[Shaliza]

Hello:

I'm trying to create a new theme for my forum...

allkindsofeverything.boards.net

I was wondering how I might set about creating a partially transparent background for the containers like on this site so that the silhouettes of the theme background can be seen:

army83.forums.net

When I use the Visual Editor, I can set the background as transparent or colored but not both, so I would love some help on how to achieve this effect. 

Thank you so much in advance!

[Nscalerr]

They would be done using RGBA in the stylesheet.

I have the following for the space theme, (which is default so you can see it) on my hobby forum. Basically you have to use RGBA where you want a partial transparency. Btw it works far better than the opacity tag.

/* Forum wrapper background. */
#wrapper {
   background: rgba(15, 59, 92, 0.4);
   border: 1px solid #000000;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   padding: 0px 10px 0px 10px;
   margin: auto;
   box-shadow: 0px 0px 5px #000000;
}

[Shaliza]

Apr 13, 2021 20:44:35 GMT -8 Nscalerr said:

They would be done using RGBA in the stylesheet.

I have the following for the space theme, (which is default so you can see it) on my hobby forum. Basically you have to use RGBA where you want a partial transparency. Btw it works far better than the opacity tag.

/* Forum wrapper background. */
#wrapper {
   background: rgba(15, 59, 92, 0.4);
   border: 1px solid #000000;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   padding: 0px 10px 0px 10px;
   margin: auto;
   box-shadow: 0px 0px 5px #000000;
}

Love the look of your space theme, Nscalerr . 

You gave me this RGBA for the footer and copyright notice for a theme in the past and I added it to the Harry Potter theme which is accessible only to staff at the moment. 

background-color: rgba(250, 250, 250, 0.5);

So would I then just substitute this code so that it looks like this:


/* Forum wrapper background. */
#wrapper {
   background: rgba(250, 250, 250, 0.5);
   border: 1px solid #000000;
   border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   padding: 0px 10px 0px 10px;
   margin: auto;
   box-shadow: 0px 0px 5px #000000;
}

Thanks so much!

[Nscalerr]

Prety much Shaliza.

If you want to make something partially transparent, just target it with the css and add background: rgba(250, 250, 250, 0.5); with whatever colours and transparency you are after.

Note, you have to whack it with a big hammer by adding the !important tag in at times.

[Shaliza]

Apr 13, 2021 20:55:54 GMT -8 Nscalerr said:

Prety much Shaliza .

If you want to make something partially transparent, just target it with the css and add background: rgba(250, 250, 250, 0.5); with whatever colours and transparency you are after.

Note, you have to whack it with a big hammer by adding the !important tag in at times.

Thanks again for this. I love learning cool new stuff like this. Makes me feel tech savvy even though I'm not, LOL.

Another question... how do I get rid of the extra border around the containers so that you have pretty much the default view? I thought taking out the following would help, but it did not?


border-radius: 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;

Thank you so much! I really appreciate it.

[Nscalerr]

That won't do anything much as all it does is control how much curve you have in the corners.

Think if you remove all of the following it will have the desired effect.

border: 1px solid #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 0px 10px 0px 10px;
margin: auto;
box-shadow: 0px 0px 5px #000000;

[Shaliza]

Apr 13, 2021 21:19:33 GMT -8 Nscalerr said:

That won't do anything much as all it does is control how much curve you have in the corners.

Think if you remove all of the following it will have the desired effect.

border: 1px solid #000000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
padding: 0px 10px 0px 10px;
margin: auto;
box-shadow: 0px 0px 5px #000000;

I tried this and it did take care of the left and right extra borders, but there's still the transparency in-between the sections and also for the title and footer, so not sure how I can remove those?

Thanks again.

[Nscalerr]

I'm not sure either Shaliza, maybe the powers that be may know more.

[Shaliza]

Apr 13, 2021 21:36:41 GMT -8 Nscalerr said:

I'm not sure either Shaliza , maybe the powers that be may know more.

Ok, I'll see once the Admin team comes in the morning if anyone can shed some light on the matter. Thanks again for all your help. I learned a lot of interesting things today.

[Kami]

Could you show a screenshot that points to the transparancy you want to remove, please? (: I suspect the specific child containers also have borders around them, so removing the borders created a "gap" between each child container.

[Shaliza]

Hello Kami, 

Thanks for stepping in to help. I appreciate it. 

Apr 14, 2021 1:03:50 GMT -8 Kami said:

Could you show a screenshot that points to the transparancy you want to remove, please? (: I suspect the specific child containers also have borders around them, so removing the borders created a "gap" between each child container.

Here are some screen shots which refer to the transparency around the containers as I mentioned in my previous post. I'll provide the links as the images are one the larger side:

village.photos/images/user/8b71678b-f386-41ca-b2a6-41bd3ed56de3/1cf06adb-c793-414e-8be3-6d65877b119a.png

village.photos/images/user/8b71678b-f386-41ca-b2a6-41bd3ed56de3/resized_8126c735-8032-46a3-907a-e96a236d37e6.png

The transparency also extends to the forum banner and the footer which I'm hoping to eliminate. 

I would like the transparency to only extend to the containers like in this site:

dbzforum.boards.net

Hope this helps to explain a little better. Thanks again!

[Nscalerr]

I have the following for just the containers on the space theme. To make it easier I created a central source for the background colour.

@rgbabackground: rgba(15, 59, 92, 0.7);
.threads .content {
   background: @rgbabackground;
}
.boards .content  {
   background: @rgbabackground;
}
.stats .content  {
   background: @rgbabackground;
}

[Shaliza]

Thank you for that, Nscalerr. I really appreciate it.

I'm off to get some sleep now, but I will play around with that coding tomorrow. Thanks again!

[Retread]

Apr 14, 2021 20:35:15 GMT -8 Shaliza said:

I would like the transparency to only extend to the containers like in this site:

dbzforum.boards.net

Hi Shaliza

Earlier you were using a selector that covered more than the areas of interest (#wrapper). Let's remove that for now.

Instead, this should target just the content area containers and not the gaps between categories or the title bars.

/* See-thru content area containers */
.container {background: rgba(253, 158, 255, 60%);}
/* End of Section */

Season the rgb to taste.
I picked an alpha level (60%) that looks okay to me. Increase it for more readability or decrease it to allow the background image to be more visible.

(I would have loved to have been able to have you apply the color through the Visual Editor, but it truncates the rgba color statement because the input area can't handle enough characters.)

[Shaliza]

Apr 14, 2021 23:48:41 GMT -8 Retread said:

Hi Shaliza

Earlier you were using a selector that covered more than the areas of interest (#wrapper). Let's remove that for now.

Instead, this should target just the content area containers and not the gaps between categories or the title bars.

/* See-thru content area containers */
.container {background: rgba(253, 158, 255, 60%);}
/* End of Section */

Season the rgb to taste.
I picked an alpha level (60%) that looks okay to me. Increase it for more readability or decrease it to allow the background image to be more visible.

(I would have loved to have been able to have you apply the color through the Visual Editor, but it truncates the rgba color statement because the input area can't handle enough characters.)

Thank you so much for this coding, Retread. It worked great. Taking out the "forum wrapper" part of things definitely helped.

One teeny tiny thing... there is a tiny corner of transparency that extends beyond the corners of the containers. It's barely visible, and I can certainly leave it as it is, but since inquiring minds want to know, is there anyway to eliminate this? I left the alpha level at 60% for now and I'm not sure if changing this might help, so I will try that in a bit. 

And yes, it would be nice to have the RGBA segment be built into the Visual Editor. Would make things a lot easier. Maybe it will be on the books for V6. 

Thanks again.