Adding opacity/transparency to posting table

[shiningheart]

So I'm trying to make a posting table, but I'm trying to make a square inside it that's transparent/opaque in that the background will still show but the text will stand out. So far what I have is:

[div style="background-color:white;opacity:50;padding-right:10px;padding-left:10px;"]
[/div]

I've added both px and % after the 50 but neither work. I've looked around google to see if I could find out the answer myself but nothing helped. Is there something I'm doing wrong?

[Tumbleweed]

Jun 22, 2017 20:07:41 GMT -8 shiningheart said:

So I'm trying to make a posting table, but I'm trying to make a square inside it that's transparent/opaque in that the background will still show but the text will stand out. So far what I have is:

[div style="background-color:white;opacity:50;padding-right:10px;padding-left:10px;"]
[/div]

I've added both px and % after the 50 but neither work. I've looked around google to see if I could find out the answer myself but nothing helped. Is there something I'm doing wrong?

Try: 
[div style="background-color:white;opacity:.4;padding-right:10px;padding-left:10px;"]Something here[/div]
But this actually makes the text look better:


[div style="background-color:rgba(255, 255, 255, 0.5);"]Something here[/div]


Example:

Something here

Something here

[Former Member]

If you want to make it transparent, yet still have the text readable try this

Add you html markup

<div class='mycustomstyle'>
  CONTENT
</div>

Now add this inside your CSS Stylesheet declaration.
Under the hood, it uses LESS and is then transpiled into CSS


@mycustombgstyle: #fff;

.mycustomstyle{
  background: fade(@mycustombgstyle, 85%);
  color : contrast(@mycustombgstyle);
}

[Tumbleweed]

Jun 23, 2017 14:22:18 GMT -8 @synthtec said:

If you want to make it transparent, yet still have the text readable try this

Add you html markup

<div class='mycustomstyle'>
  CONTENT
</div>

Now add this inside your CSS Stylesheet declaration.
Under the hood, it uses LESS and is then transpiled into CSS


@mycustombgstyle: #fff;

.mycustomstyle{
  background: fade(@mycustombgstyle, 85%);
  color : contrast(@mycustombgstyle);
}

@synthtec , Shininghear needed this for a posting template in posts. 

[Former Member]

if he/she has access to templates, then he/she has access to the stylesheets too, I'm not sure I understand your argument ? I just showed him/her how it could be done on a default forum.

[Kami]

Jun 23, 2017 15:35:29 GMT -8 @synthtec said:

if he/she has access to templates, then he/she has access to the stylesheets too, I'm not sure I understand your argument ? I just showed him/her how it could be done on a default forum.

posting template != layout template

they want a prefab ubbc template for posts.

[Former Member]

Not sure what you are hinting at Kami.

If he/she has access to the templates, then he/she has access to the stylesheets. ?

If you don't have access to certain area's, why are you building a theme?

[Kami]

Jun 23, 2017 16:31:59 GMT -8 @synthtec said:

Not sure what you are hinting at Kami.

If he/she has access to the templates, then he/she has access to the stylesheets. ?

If you don't have access to certain area's, why are you building a theme?

Since I am not coming across clearly, I will rephrase:

the OP is not working on a theme. they are working on ubbc styles for their post. the use of the word 'template' here is to denote that it is a prefabricated structure, and not in reference to the structural layout templates of the admin panel.

posting templates are usable regardless of access to the admin panel because they are ubbc for posts.

[Former Member]

kami I understand that. I did have arguments but I decline. I trust your judgement on this one.

[Kami]

Jun 23, 2017 16:57:45 GMT -8 @synthtec said:

kami I understand that. I did have arguments but I decline. I trust your judgement on this one.

i genuinely don't understand why you keep bringing up the admin panel then, if you understand this is for the inside of posts, unless the train of thought is "why not just use the admin panel to style your posts in this fashion instead of using ubbc'

if that is the case, then the reason is ubbc post templates are used by all users regardless of admin status. it's why the style tag plugin exists, because sites (RP sites in particular) use UBBC to differentiate between the characters they post as, such as

So you were never a saint
And I’ve loved in shades of wrong

Tag , NOTES

First letter should be different than the rest bc it has it's own span style, bla bla bla bla bla blab bla text goes here and stuff. Yadda yadda yadda your text all goes here.

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.

When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy. The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country.

Extra notes; feel free to edit and change the colours as you like when you use this template. The icon has to be 100x100 in size.

? Chou

// SKYLINE //

It's getting hard to know if I'm on the tracks or off the beaten road when no truth ever easily shows so I'll follow you no matter where you go

Tag .

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth. Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar. The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way. When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then she continued her way. On her way she met a copy.

The copy warned the Little Blind Text, that where it came from it would have been rewritten a thousand times and everything that was left from its origin would be the word "and" and the Little Blind Text should turn around and return to its own, safe country. But nothing the copy said could convince her and so it didn’t take long until a few insidious Copy Writers ambushed her, made her drunk with Longe and Parole and dragged her into their agency, where they abused her for their projects again and again.

? Chou

These are done on an individual, per character / account basis. I would honestly (no sarcasm or attitude on this) be open to hear the arguments you have if you do indeed understand the purpose of posting templates, though via PM so we do not derail this thread further.

[Former Member]

I may have spoke out of turn on a topic I know little about. I would agree with your conclusion on said topic.
I didn't devote time, instead skimmed the topic, to which you are right.

Hands down, it was silly of me.

[Kami]

Jun 23, 2017 17:30:54 GMT -8 @synthtec said:

I may have spoke out of turn on a topic I know little about. I would agree with your conclusion on said topic.
I didn't devote time, instead skimmed the topic, to which you are right.

Hands down, it was silly of me.

fair enough! no harm done (:

[Violette]

Jun 22, 2017 22:40:06 GMT -8 Tumbleweed said:

Try: 
[div style="background-color:white;opacity:.4;padding-right:10px;padding-left:10px;"]Something here[/div]
But this actually makes the text look better:


[div style="background-color:rgba(255, 255, 255, 0.5);"]Something here[/div]


Example:

Something here

Something here

Hi, Tumbleweed ! This looks interesting. If a person who is not familiar with where things go, and they wanted to try these codes, where would they put it?

[Tumbleweed]

Jun 24, 2017 5:11:06 GMT -8 Violette said:

Jun 22, 2017 22:40:06 GMT -8 Tumbleweed said:

Try: 
[div style="background-color:white;opacity:.4;padding-right:10px;padding-left:10px;"]Something here[/div]
But this actually makes the text look better:


[div style="background-color:rgba(255, 255, 255, 0.5);"]Something here[/div]


Example:

Something here

Something here

Hi, Tumbleweed ! This looks interesting. If a person who is not familiar with where things go, and they wanted to try these codes, where would they put it?

Violette

What I posted is meant to be used in a post, like right here and you could do something like Kami posted. Using my the image and opacity style I used in my example, you could do something like this but prettied up with more font styles and such:

Title Here

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur?

I guess you can just use your imagination but some people have used the transparent background to kind of tone down a background they like. Like I just tossed that same background on this test site as the body background and used the semi-transparent background to wrap around the forum. So to do that, you'd just head to your visual editor, add the background where it says background and then at the bottom of your style sheet add something like this:

#wrapper{width:80%;
margin:auto;
background-color:rgba(255, 255, 255, 0.5);
padding:10px;border-right:8px solid #553c54;
border-left:8px solid #553c54;padding:18px;
}

And just in case you didn't know, the first 255 controls the red you want in the background. The second the green and the third the blue. the 0.5 controls how opaque or transparent you want your background. 0.9 would be nearly opaque and 0.1 would be nearly transparent. Currently, that is a pure white background.

Hope that helps spur your imagination.

[Violette]

Thank you so much, Tumbleweed! I get it, I think. So, it would only be used when one wants a particular post to have an opaque background, not a code that affects the whole board. What a great way to make a "post" special! Thanks again for taking the time to answer my question.

*Hugs*
Violette