Okay
  Public Ticket #154551
Nectar Slider Text Background?
Closed

Comments

  • Steven started the conversation
    January 29, 2014 at 2:50am
    Hey, First of all, awesome theme. Second, I may be being dumb but, I'm having a little trouble with viewing the title text and some of the images and video i've used in the nectar slider. With some of my images or video, having just black or white makes it so either at times some of the text isn't visible or parts of it are missing. Is there a way to have a background box that covers both the title and the caption for the slider? Regards, Steve
  • Steven replied
    January 29, 2014 at 2:52am

    Or possibly a stroke/outline on the text?

     

  •  1,091
    ThemeNectar replied
    January 31, 2014 at 6:41am

    Hey Steven!

    Try adding this into the Custom CSS box located in your Salient Options panel:

    .swiper-slide .content h2 {
        padding: 4px 0px;
	display: inline;
	position: relative;
	left: 10px;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.5);
	box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	-moz-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	-webkit-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	-o-box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
	line-height: 45px;
}

    Cheers :)

  • Marco replied
    August 31, 2017 at 2:29pm

    Hi, this doesn't work for us when text orientation is left. The Background stretches from left to right.

    display: inline-flex !important; did the trick:

    /* Nectar Slider h2 Background */
    .swiper-slide .content h2 {
        background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
        box-decoration-break: clone;
        box-shadow: 10px 0 0 rgba(0, 0, 0, 0.5), -10px 0 0 rgba(0, 0, 0, 0.5);
        display: inline-flex !important;
        left: 10px;
        padding: 4px 0;
        position: relative;
    }