Tagged: , ,

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • December 29, 2014 at 7:43 pm #372763
    a00109943

    Hi there!

    I’ve been racking my head and trying a hundred different things tot get this to work, but I think their might be an easier and cleaner way of doing it. If you visit

    http://energyzone.ca/

    You will see that there are transparent black and 1 red shadow box where I am trying to fill them with text. What I tried doing originally was changing the background color of the text box itself and I was unsuccessful. Now I tried modifying the background and adding the box as a layer before uploading the custom background, this works great except that when I view the website on other browsers like explorer (currently using chrome) the formatting and spacing is off and it looks terrible. Is there a way to make all my text boxes have a shadow transparent background? That way the formatting of the text will change in proportion to the box instead of looking awful.

    Thanks so much for your help as per usual!

    Ben

    December 29, 2014 at 8:19 pm #372784
    Elliott

    Hi a00109943!

    Go ahead and take a screenshot and highlight exactly what your trying to do so we can get a better idea.

    Regards,
    Elliott

    December 30, 2014 at 6:29 pm #373228
    a00109943

    Hi Elliott,

    What I am trying to do is shown here:

    http://energyzone.ca/wp-content/uploads/2014/12/screenshot.jpg

    Where you see the text “Best Value” and the paragraph underneath, this is a simple text box that I am using. Instead of having to include the black shadow box as part of the background, I would like a black shadow box to be the background for my text box. This way everything would resize properly on all devices and screen sizes.

    If I were trying to change the background color of a text box to say white, there would be a code for that I would imagine. In this case, I am looking for the code for a shadow box. I hope this helps clear things up.

    Thanks again!

    Benjamin

    December 30, 2014 at 7:09 pm #373249
    Elliott

    Hi!

    I see. First off do this, http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/, and then add a class of “my_class” to the text block element and then add this to your custom CSS.

    .my_class { background: black; padding: 20px; }

    Best regards,
    Elliott

    December 30, 2014 at 11:30 pm #373349
    a00109943

    This is so awesome!!! Thanks so much Elliott!

    Now that I have the ability to change the background color of each box, what is the background color of a transparent black “shadow” box? Is that a color or is that something different?

    December 30, 2014 at 11:35 pm #373352
    a00109943

    I found code like this:

    .transparent-style{
    background-color: #ffffff;
    opacity: .4;
    }

    but not sure how I would go about using that with this new custom css option.

    Thanks.

    December 31, 2014 at 12:12 am #373365
    Elliott

    Hey!

    Your probably wanting this.

    .my_class { background: rgba(0,0,0,0.5) !important; }

    That will make it black with half opacity.

    Best regards,
    Elliott

    December 31, 2014 at 2:40 am #373391
    a00109943

    Honestly, you’re awesome!

    Thanks so much!

    This is perfect!

    Ben

  • Author
    Posts
Viewing 8 posts - 1 through 8 (of 8 total)
  • The topic ‘Shadow Background for Textboxes’ is closed to new replies.