Achieve background opacity in section or wrap

Your_Story · January 2017

Hi there,

I'm looking to achieve a semi-transparent look for a section on my home page at http://rawrdesignstestsite1.com/

Right now I have a section that I've divided into 2 wraps, and I'm looking for the bottom wrap to have a black but semi transparent background without affecting the text. I tried to put

background: #000 !important;
    opacity: 0.8 !important;

in the custom CSS area of the bottom wrap but it didn't work. I attached a picture so you can see what I'm trying to achieve. Any help with this would be greatly appreciated! Happy new year.

Albert · January 2017

Hi,

you did it completely wrong. You put custom css in the section reserved for css class names. So what you supposed to do is put custom class name into this field and then under Theme options > Custom CSS & JS > Custom CSS section write css in accordance to this class name.

Your_Story · January 2017

Thank you! I am not sure what I was doing wrong to fix it...I labelled the section as .transblack and then in the Theme options > Custom CSS & JS > Custom CSS I put

.transblack {

background: rgba(76, 175, 80, 0.3);

}

And it didn't seem to work

Can you tell me what I did wrong? I found another work around by putting the styles right into the column and that works for me for now...Can you tell me how I can make this column full-width across the entire page, and also fix the fancy link button so that it is a smaller size and doesn't stretch all the way across so it looks like the image above? Thanks very much in advance!

http://rawrdesignstestsite1.com/

Albert · January 2017

You said above that you labelled section as transblack but it is not true. There is no such class for any section on your site. So please set this class name for section where the column you want to make transparent is. http://pasteboard.co/o5e9l7ttf.png - this is a proof you didn't set any custom class name for this section.

Your_Story · January 2017

Hi there,

I meant that I did have it labelled as transblack but it didn't seem to work, it is not labelled that way anymore because I switched to putting the styles right into the collumn.

Can you tell me how I can make this column full-width across the entire page, and also fix the fancy link button so that it is a smaller size and doesn't stretch all the way across so it looks like the image above? Thanks very much in advance!

Albert · January 2017

To make this section full width, you need to set FULL WIDTH NO MARGIN style for the section where this item is. But the link is always the same width and the column where it is. So to decrease its width, you need to set class name for the button first and then control its size with custom css.

Your_Story · January 2017

Great, thank you very much! I'll give that a try.

Your_Story · January 2017

Thanks so much for the tip it worked!

I hate to be that annoying person who posts a hundred times, but I noticed that the opacity of the column is gone again even though I didn't touch the inline code...

[hover_color background="#2991D6" background_hover="rgba(0, 0, 0, 0.7)" border="" border_hover="" padding="0px 0px" link="" target="" class="" style=""]

<br>

<h2 style= "color: #ffffff">STRATEGY</h2>

<h4 style= "color: #ffffff">Entrada Resources is redefining oil and gas acquisition</h4>

<br>

<center><a class="mfn-link mfn-link-5 " href="#" data-hover="Phasellus" ontouchstart="this.classList.toggle('hover');"><span data-hover="Phasellus">Phasellus</span></a></center>

[/hover_color]

I put that directly in the column, it worked before, but now it only lightens the color and doesn't make it a lower opacity...can you tell me why this is happening now?

Sorry! I just have no idea why it stopped working

Albert · January 2017

To be honest, we also don't know why it stopped working. Please replace hex color in above shortcode with rgba color as check if this would help because we have no idea what else might be the reason.

Your_Story · January 2017

It worked!!

Thank you so much for your help with this! Hope you guys have an awesome week

Albert · January 2017

You are welcome!

Achieve background opacity in section or wrap

Comments