Support Center Visit Demo License manager Buy @ envato

Achieve background opacity in section or wrap

Your_StoryYour_Story
edited January 2017 in Other
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. :)

image


Comments

  • AlbertAlbert
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • Your_StoryYour_Story
    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!
  • AlbertAlbert
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • Your_StoryYour_Story
    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!

    image
  • AlbertAlbert
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • Your_StoryYour_Story
    Great, thank you very much! I'll give that a try. :)
  • Your_StoryYour_Story
    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>
    <br>
    <h2 style= "color: #ffffff">STRATEGY</h2>
    <h4 style= "color: #ffffff">Entrada Resources is redefining oil and gas acquisition</h4>

    <br>
    <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 :(
  • AlbertAlbert
    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.
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • Your_StoryYour_Story
    It worked!!

    Thank you so much for your help with this! Hope you guys have an awesome week :)
  • AlbertAlbert
    You are welcome! :)
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.