Question about partially transparent backgrounds for a theme

[Retread]

Apr 15, 2021 21:23:37 GMT -8 Shaliza said:

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?

Yes indeed!

The quick fix would be to change the Style Sheet modification I gave you to this:

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

Let me know how that works out for you.

---

Apr 15, 2021 21:23:37 GMT -8 Shaliza said:

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. 

When the Developer Team asked us for our v6 wish lists, I requested HSLA which is in my opinion an easier color system to work with and it also has an alpha channel. But any system with an alpha channel would be a step forward.

I'm hoping they adopt something like this:
hslpicker.com/#FFCC9A

[Nscalerr]

*snap* I just came up with the same thing. - LoL

/* See-thru containers */
.container {
   background: rgba(250, 250, 250, 60%);
   border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}
/* End of Section */

[Shaliza]

Thank you both, as I really appreciate it. It's great learning all these new things when it comes to themes and transparency. 

Here's a copy of the theme Retread, in case you want to take a look at it:

Harry Potter WIP.pbt (925.89 KB)

I will try the coding you both suggested to eliminate the corner accessories. Will let you know how that works. Thanks a million, again.

[Shaliza]

Ok... the coding with the 5 px border radius worked great! Thank you both, again.

Your help is invaluable and greatly appreciated as always. *hugs*

[Retread]

k, koo

I downloaded the theme and imported it to my test forum. Now I'm off to bed. ttyt.

[Shaliza]

Apr 15, 2021 22:39:06 GMT -8 Retread said:

k, koo

I downloaded the theme and imported it to my test forum. Now I'm off to bed. ttyt.

Sounds good and thank you again. Sleep well!

[Shaliza]

Hello again... so sorry for all the questions but I have one more... 

I noticed that the partial transparency also affects popups for the plugins I'm using, namely the Scavenger Hunt and the Smiley Dropdown. Especially for the Smiley Dropdown, the transparency on the popup window makes the images harder to see. Is there any way I can make these popup windows opaque instead of transparent?

Thanks a million again for all the help.

[Retread]

Hi Shaliza

The earlier issue with the corners and this one with the popups are a result of me painting with too wide of a brush in my choice of a selector.

Let's backup one square and try using multiple selectors, each one being more specific.

Remove the section from my earlier post and replace it with this:

/* See-thru containers */
.container > .content,
.ui-dialog .ui-dialog-buttonpane,
.container.copy .clone
{background: rgba(250, 250, 250, 60%);}
/* End of Section */

Let me know if that cures your ills with the popups.

---

Also, I noticed your Navigation Tree is using larger text, causing it to be shifted downward in its container. I have a fix for that but lets get the see-thru areas correctly targeted first.

[Shaliza]

Thank you as always, Retread. I used the new coding you provided and got rid of what I had in the style sheet. As far as I can tell though, the popups are still transparent. I tried the popup for the Smiley Dropdown and it still has a partially transparent black background. 

Also, I noticed your Navigation Tree is using larger text, causing it to be shifted downward in its container. I have a fix for that but lets get the see-thru areas correctly targeted first.

Yeah, this happens depending on the forum font. I have been trying to make the fonts a little bigger to help my members with any vision issues. If you have a solution that would be wonderful.

Thanks again!

[Retread]

Here's the fix for the Navigation Tree

/* Increase height of Nav-tree div to accommodate larger font */
#navigation-tree{height:28px;}
#nav-tree .menu_arrow{ top:4px;}
/*End of Section */

---

I can't reproduce the issue you have with the transparent background for the Smiley Dropdown popup, on my test forum. Try removing the See-thru content area containers section completely, then see if the popup has an opaque background. If it does, that indicates the problem is in my modification. If the background is still transparent without the modification in the style sheet, the problem is somewhere else.

[Shaliza]

Apr 16, 2021 22:06:11 GMT -8 Retread said:

Here's the fix for the Navigation Tree

/* Increase height of Nav-tree div to accommodate larger font */
#navigation-tree{height:28px;}
#nav-tree .menu_arrow{ top:4px;}
/*End of Section */

This worked beautifully for the Navigation Tree. I will use it for other themes where I encountered this problem also. Thank you so much.

I can't reproduce the issue you have with the transparent background for the Smiley Dropdown popup, on my test forum. Try removing the See-thru content area containers section completely, then see if the popup has an opaque background. If it does, that indicates the problem is in my modification. If the background is still transparent without the modification in the style sheet, the problem is somewhere else.

So when I took out the coding for the see thru containers, they went completely transparent. However the popup for the Smiley Dropdown plugin remained partially transparent. So the problem must be somewhere else.

[Retread]

Apr 16, 2021 22:38:29 GMT -8 Shaliza said:

So when I took out the coding for the see thru containers, they went completely transparent.

In the Visual Editor for that theme, navigate:
Body (Content) > Containers > Content Areas
Select a background color that will be appropriate for your popups. Probably something like a light-gray.

Then Save Changes.

Place this at the bottom of your Style Sheet:

/* See-thru containers */
.container > .content,
.container.copy .clone
{background: rgba(250, 250, 250, 60%);}
/* End of Section */

Save Changes

Apr 16, 2021 22:38:29 GMT -8 Shaliza said:

However the popup for the Smiley Dropdown plugin remained partially transparent. So the problem must be somewhere else.

Something, somewhere (Not in the Style Sheet) is generating this rule that's affecting the View All Smileys popup:

.ui-dialog {
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background-color: #000000;
background-color: rgba(0, 0, 0, 0.5);
}

It might be in the CSS tab for the Smiley Dropdown plugin, or maybe some other plugin?

[Shaliza]

Hello again, Retread...

Thanks for answering all my questions and for being so patient with me. 

Apr 17, 2021 6:56:31 GMT -8 Retread said:

Apr 16, 2021 22:38:29 GMT -8 Shaliza said:

So when I took out the coding for the see thru containers, they went completely transparent.

In the Visual Editor for that theme, navigate:
Body (Content) > Containers > Content Areas
Select a background color that will be appropriate for your popups. Probably something like a light-gray.

OMG... I feel so silly, that it's not even funny, LOL. 

This suggestion totally worked! When I was originally trying to fiddle with the transparency, I left the container background as transparent in the Visual Editor. So then, that affected the popup background. When I changed the Container background to a shade of gray, that took care of the popup issue, which now has a gray background with black text which is very easy to read. I can't believe that the solution was that simple and I was making it a lot more complicated that it needed to be. So sorry! 

Thanks so much for this simple tip which worked like a charm. Big hugs to you!

[Shaliza]

Hello again, Retread... 

I have one other question... but I noticed that the Participated Dialog box is having the same issue with cutting off the larger font like with the Navigation Tree. 

I tried editing this coding to include the Participated Dialog, but it did not work.


/* Increase height of Nav-tree div to accommodate larger font */
#navigation-tree{height:28px;}
#nav-tree .menu_arrow{ top:4px;}
/*End of Section */

How can I change this to affect the Participated Dialog? Thanks a million again for the help. I really appreciate it.

[Retread]

Hey Shaliza

If you right-click on the Participated button, then choose Inspect Element, you'll see it's a link <a> with a class attribute of "recent-threads-button"

Normally we could just add a comma after the first selector #navigation-tree then add the selector .recent-threads-button, but we need a different height there. (I never dug deeply into this to determine why.)

So instead we'll write a separate rule:

/* Increase height of Participated to accommodate larger font */
.recent-threads-button{
   height:22px;
}
End of Section