Cannot lengthen box-shadow:

  • johnatanasoff

    (@johnatanasoff)


    8 years, 3 months ago

    I am being unable to limit the length of the box-shadow: as per the print screen:
    http://prntscr.com/hw2g78

    Tried many ways!
    I want to make it just a bit more than the length of the text.
    It would be great if you were able to point me into the right direction.

    This is the code i’m using for the text and box-shadow:

    section.homepage-slider h1,
section.homepage-slider h2 {
     font-size: 44px !important;
     line-height: 40px !important;
     margin-bottom:0;
     text-shadow: 2px 2px 4px #000000;
     box-shadow: inset 0 0 0 1000px rgba(0,0,0,.4);
     padding: 20px;		
}

    The page I need help with: [log in to see the link]

Viewing 8 replies - 1 through 8 (of 8 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 3 months ago

    The way that uses a box shadow instead of a background color is very strange.

    I’d do it this way

    section.homepage-slider h1, section.homepage-slider h2 {
    font-size: 44px !important;
    line-height: 40px !important;
    margin-bottom: 0;
    text-shadow: 2px 2px 4px #000000;
    /* removing this line: box-shadow: inset 4px 5px 4px 6px rgba(0,0,0,.4); */
    padding: 20px;
    background-color: rgba(0,0,0,.5);
}

    Given that, what do you want to change? You said “lengthen”, so play with padding-top and padding-bottom.

    Thread Starter johnatanasoff

    (@johnatanasoff)

    8 years, 3 months ago

    @sterndata

    Steve, sorry! I meant the vertical length of the shadow!
    It’s going all across the page and i want it to cover just the text and a bit more.

    The red arrows mark where i want the background shadow to stop: http://prntscr.com/hw4qxt

    ” padding-left: and padding-right: ” move the text; whereas what i want is to trim the shadow to the length of the text!

    PS: The code i used or your code, both work for the background shadow.
    As padding goes, something like this ( padding: 20px; ) is enough for an uniform horizontal length; both top and bottom.

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 3 months ago

    so you mean width?

    #onetone-owl-slider .owl-item .item .inner .caption {
  width: 75%;
  margin: 0 auto;
}

    If you have additional issues with your theme, I recommend asking at https://wordpress.org/support/theme/onetone#new-post so the theme’s developers and support community can help you with this.

    Thread Starter johnatanasoff

    (@johnatanasoff)

    8 years, 3 months ago

    @sterndata

    Yes width! Sorry to have mislead you! I am working on my english.
    Your code works! 🙂

    What i now need to find out is how to make each shadow the width of the text for each slider.

    Onetone support is very unresponsive; but that’s not you guys fault!

    One question if possible.
    How did you find so quickly “#onetone-owl-slider .owl-item .item .inner .caption ”
    was the right id to change?
    I went through inspect but could not find the particuar id/class responsible for that.

    • This reply was modified 8 years, 3 months ago by johnatanasoff.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 3 months ago

    I just walked “up the tree” until I found something with a width of 100% and kept changing them until I hit the right one. Not particularly elegant, but if you pound on enough stuff, eventually you find the right one.

    Try this CSS instead of the above:

    section.homepage-slider h1, section.homepage-slider h2 {
    background: rgba(0,0,0,.5);
    width: 75%;
    margin: 0 auto;
}
    Thread Starter johnatanasoff

    (@johnatanasoff)

    8 years, 3 months ago

    @sterndata

    Got ya.
    Only now i am getting to know Inspector better.
    For applying the shadow in inspector “Elements”, i found the html, in this case the text, and clicking on it gave me the exact css attribute to change. Pretty easy!
    But for some reason i wasn’t being able to reduce the shadow width.

    This code you sent also applies the shadow but it does not size it for each slider text width.
    I have a feeling this one’s gonna be a hard one to pin down right?

    • This reply was modified 8 years, 3 months ago by johnatanasoff.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    8 years, 3 months ago

    You’ll find it. I find it’s best to let the stuff perk around in one’s mind for a while — and just as you’re about to fall asleep, it comes to you. Then it’s race to get back to the computer before you forget what that bright idea was!

    Thread Starter johnatanasoff

    (@johnatanasoff)

    8 years, 3 months ago

    Indeed! 🙂

Viewing 8 replies - 1 through 8 (of 8 total)

The topic ‘Cannot lengthen box-shadow:’ is closed to new replies.