Semi-transparent/Opaque Boards/Content?

[Shadow]

Forum URL: fantasiapocalypse.boards.net

(Forum above currently has different default theme than the one I am working on... because I suck at coding...)

I am creating a new skin for my site (or, well, trying to and failing miserably) and would like to know how to make the content of the forum semi-opaque/transparent, so that the background of the forum is sort of visible?

[Tumbleweed]

Aug 11, 2017 23:03:49 GMT -8 Shadow said:

Forum URL: fantasiapocalypse.boards.net

(Forum above currently has different default theme than the one I am working on... because I suck at coding...)

I am creating a new skin for my site (or, well, trying to and failing miserably) and would like to know how to make the content of the forum semi-opaque/transparent, so that the background of the forum is sort of visible?

If you add this to the bottom of your style sheet it'll make the boards semi-transparent:

/*semi-transparent board listings*/
.container.boards > .content {
background-color: fade(@container_background_color_1,70%);}

You can change that 70 to a higher number (100 would be totally opaque) or a lower. But once you click on a board or thread, it'll be opaque again. Not sure if you wanted it for threads, posts too.

[RichardInTN]

Another suggestion would be that when you are coding the background colors instead of using hexadecimal color codes, you use rgba codes.

This is a Hexadecimal color code for a nice deep blue:
#334FFF
This is a rgba color code for that same color but with the option of half transparency:
rgba(51, 79, 255, 0.5)the ".5" stands for percentage of transparency, and can be any number between 0.00 and 1.00 (with .00 being fully transparent, and 1.00 being fully opaque).

[♥ ℒʊ√ ♥]

Another easy way is to simply add this to the bottom of your Style Sheet ~

.container.boards > .content {opacity: 0.8}
Simply change the 0.8 to a number of your choosing.

Then there's no need to worry about choosing a color. It will work on any color you're using on each theme.

[Tumbleweed]

Aug 12, 2017 16:21:47 GMT -8 RichardInTN said:

Another suggestion would be that when you are coding the background colors instead of using hexadecimal color codes, you use rgba codes.

This is a Hexadecimal color code for a nice deep blue:
#334FFF
This is a rgba color code for that same color but with the option of half transparency:
rgba(51, 79, 255, 0.5)the ".5" stands for percentage of transparency, and can be any number between 0.00 and 1.00 (with .00 being fully transparent, and 1.00 being fully opaque).

Typically, I do tell them the way you suggested but it works beautifully the way I suggested as they don't have to go convert the hex color to rgb and it doesn't mess with the text. Just saves a bit of time and trouble for them and for me, when I'm lazy. 

Aug 12, 2017 23:04:35 GMT -8 ♥ ℒʊ√ ♥ said:

Another easy way is to simply add this to the bottom of your Style Sheet ~

.container.boards > .content {opacity: 0.8}
Simply change the 0.8 to a number of your choosing.

Then there's no need to worry about choosing a color. It will work on any color you're using on each theme.

Not a good idea as that also changes the text to the same transparency. Ever try changing it to 0.1 and you'll see what I mean. Handy if in a rush and you are barely changing the opacity, then you wouldn't notice the text changing that much.

[♥ ℒʊ√ ♥]

Aug 13, 2017 3:05:09 GMT -8 Tumbleweed said:

Aug 12, 2017 23:04:35 GMT -8 ♥ ℒʊ√ ♥ said:

Another easy way is to simply add this to the bottom of your Style Sheet ~

.container.boards > .content {opacity: 0.8}
Simply change the 0.8 to a number of your choosing.

Then there's no need to worry about choosing a color. It will work on any color you're using on each theme.

Not a good idea as that also changes the text to the same transparency. Ever try changing it to 0.1 and you'll see what I mean. Handy if in a rush and you are barely changing the opacity, then you wouldn't notice the text changing that much.

I've not noticed that. It's what I use on my forum.

But I only use .08 and .09 ~ so I guess that's why it works well.

[Shadow]

Tumbleweed, thank you, that code worked! And yes, threads, posts, categories, forum/board statistics, pretty much everything. How would I change those as well?

RichardInTN, that is a good suggestion! I will remember it when I am working on other things I will need, thank you!

♥ ℒʊ√ ♥, I will try that as well, if semi-opaque text will look better with what I have than not. Thank you!

[♥ ℒʊ√ ♥]

You're welcome, Shadow .

If you check out my forum, I use that code and my type isn't opaque since I only use .08 and .09 opacity.

Good luck. 

[Shadow]

♥ ℒʊ√ ♥, Thank you, and your forum looks awesome! How did you get the sections to change opacity/colors upon hover? If it is okay to ask?

[♥ ℒʊ√ ♥]

Shadow , thank you! 

Yours looks great, too. Nice job!

Since I have the containers set to an .09 opacity, when hovered, the "highlight" makes it opaque again. You can add the highlight in the Visual Editor tab.

Go to your Admin Panel > Themes > Advanced Styles & CSS.

In the Visual Editor Tab, under the first section called "Forum" open the Body Section. Next, open Lists (Boards, Threads, Posts...). There you'll find "Rows".

Under that you'll see "Text", "Highlight" and "Selected". Play around with those and see what you like.

[Shadow]

♥ ℒʊ√ ♥, thank you!

[♥ ℒʊ√ ♥]

You're welcome, Shadow .

As I posted above, you're doing a great job!

[Shadow]

♥ ℒʊ√ ♥, I tried what you suggested, but in the preview of the visual editor, nothing has changed? Could it be because the theme I am working on has side-by-side boards?

[♥ ℒʊ√ ♥]

You may have modified the Stylesheet or templates for that section, Shadow .

You can always add CSS to the Style Sheet (right next to the Visual Editor Tab) for hover color changes.

I don't know what targets you specifically want to change, but you can try this ~

.threads .main.state-hover  { color: #ffffff !important;}

and/or this

.list .item:hover > .main .description:hover { color: #000000 !important;}


Of course, change the colors to one of your choosing.

Or you can have all links change on hover by adding ~

a:hover {
   color: #333333 !important;
}
I'm adding !important just in case there may be another code over-riding these changes. If there isn't, then !important isn't necessary.

[Shadow]

(Tumbleweed, tagging you again to ask what the rest of the usable terms are for the red

.container.boards > .content {
background-color: fade(@container_background_color_1,70%);}

to turn everything else opaque/transparent as well because this code seemed to work perfectly!)

♥ ℒʊ√ ♥, cool, I'll try that, thanks!