transparency box for text block

skorg264 · August 24, 2014

Anyone have any thoughts on how I might add a transparency box to a text block to help it stand out better against a background?

Allen · August 24, 2014

You want the background of a text box showing transparency? What color?

Do you have a link to the page with the box?

nickjamison · June 2, 2015

Further help with this...

Allen wrote: »

You want the background of a text box showing transparency? What color?

Do you have a link to the page with the box?

Hi Allen,

You definitely know your stuff. I am desperately trying to add a black transparency background to this html/css box. The overall goal is that I may input white text over the page background and have it stand out/legible. To say I am rusty at HTML is an understatement. Would appreciate your input if you have the time.

Link: http://www.nickjamison.com/FAQ
Box in question currently says "this is an HTML test".

Thank you,

Nick

pilotdave · June 3, 2015

nickjamison wrote: »

Hi Allen,

You definitely know your stuff. I am desperately trying to add a black transparency background to this html/css box. The overall goal is that I may input white text over the page background and have it stand out/legible. To say I am rusty at HTML is an understatement. Would appreciate your input if you have the time.

Link: http://www.nickjamison.com/FAQ
Box in question currently says "this is an HTML test".

Thank you,

Nick

Something like this should work:

.sm-page-widget-11010009 {
background-color: rgba(0,0,0,0.5);
}

Dave

nickjamison · June 3, 2015

pilotdave wrote: »

Something like this should work:

.sm-page-widget-11010009 {
background-color: rgba(0,0,0,0.5);
}

Dave

I copied that into the CSS section of the text box and it did nothing. Could you be a little more specific?

Allen · June 3, 2015

nickjamison wrote: »

I copied that into the CSS section of the text box and it did nothing. Could you be a little more specific?

Some CSS changes for a widgets do not work if you put it in the widgets CSS tab. You might have to
add it to "entire site" CSS widget.

pilotdave · June 3, 2015

Allen wrote: »

Some CSS changes for a widgets do not work if you put it in the widgets CSS tab. You might have to
add it to "entire site" CSS widget.

Yeah you can just drop a CSS content block onto the page and add the code... I haven't played around with the CSS tab in HTML/CSS content blocks to have an understanding how to use it. Maybe you can just put the background color CSS line straight into that?

Dave

nickjamison · June 3, 2015

pilotdave wrote: »

Yeah you can just drop a CSS content block onto the page and add the code... I haven't played around with the CSS tab in HTML/CSS content blocks to have an understanding how to use it. Maybe you can just put the background color CSS line straight into that?

Dave

This worked perfectly. Thank you gentlemen.

One last question. If I wanted to fix the dimensions of the box is that possible as well? In an effort to spare you of stupid questions, I tried to look up the code but it didn't work. Thank you.

Allen · June 3, 2015

I've "fixed" the size of a couple of widget using "Just this page" CSS box but it is tricky getting it to work.

nickjamison · June 3, 2015

Allen wrote: »

I've "fixed" the size of a couple of widget using "Just this page" CSS box but it is tricky getting it to work.

Would it be the same for say resizing the box to the text content within the box? Like an auto resize?

Allen · June 3, 2015

Any manual override would be a problem with box resizing.

nickjamison · June 3, 2015

Allen wrote: »

Any manual override would be a problem with box resizing.

Understood. Thank you for the help!

nickjamison · June 5, 2015

So new issue. The box on the FAQ section worked perfect. I cannot get a box to work on the contact section. Do I need to alter the code?

FAQ: nickjamison.com/faq <----worked great

Contact: nickjamison.com/contact <-----is not working

pilotdave · June 5, 2015

nickjamison wrote: »

So new issue. The box on the FAQ section worked perfect. I cannot get a box to work on the contact section. Do I need to alter the code?

FAQ: nickjamison.com/faq <----worked great

Contact: nickjamison.com/contact <
is not working

Just change the widget number in the code to 11036231. Every content block gets a unique widget number, so the code will need to be modified on each page.

I find them using "inspect element" in chrome or web developer tools in firefox:

Dave

nickjamison · June 5, 2015

pilotdave wrote: »

Just change the widget number in the code to 11036231. Every content block gets a unique widget number, so the code will need to be modified on each page.

I find them using "inspect element" in chrome or web developer tools in firefox:

Dave

Perfect. Thank you for the very specific answer!

transparency box for text block

Comments