Okay
  Public Ticket #219733
Grey Heading Box for top heading in Nectar slider
Closed

Comments

  • Suska started the conversation

    Hi! is there a way i can get the grey under box to show in the top heading as well? The white text doesnt look too good...

    Can you give me the code to make the box under the text different colors? Does it work like this? Making these sliders readible is a big challenge!

  •  8,442
    Tahir replied

    Hey Suzana!

    Add this into the Custom CSS box located in your Salient Options panel Or on the Visual Composer Css button so the css shows on that page only:

    body .swiper-slide .content h2 {
        background: #ccc;
    }
    

    Cheers


    ThemeNectar Support Team 

  • Suska replied

    Hi Tahir,

    This doesnt look as I had expected: https://www.dropbox.com/s/bv9jxj3d56be4o7/Screens...

    Is there any way you can give me the code to make it look exactly like the subtitle under it? An opacity black with it only extendeding to the amount of text written (and not full width of the screen!)

    Thanks!

  •  8,442
    Tahir replied

    Hey Again!

    Try this instead:

    body .swiper-slide .content h2 {
        background: #ccc;
        float:left;
    }

    Thanks


    ThemeNectar Support Team 

  • Suska replied

    Hi

    This didnt work either... :(

    Please see attached screenshot.

    https://www.dropbox.com/s/ely7uhtt4s9vz11/Screensh...

    I think you are misunderstanding what I want.... 

    I want the big heading to be like this: https://www.dropbox.com/s/wqbngxnkb0mjalt/Screensh...

    ...... i dont want it beside each other... i dont want to change the position... i just want the black opaque background!!!

    Thanks :)

  •  8,442
    Tahir replied

    Hey Suzana!

    Can you please provide url , though i doubt this would work since the background is applied on the H2 directly and not a span tag like it is dont for the sub heading. 

    Thanks


    ThemeNectar Support Team 

  • Suska replied

    Hi Tahir,

    Here is the URL: http://scancia.wpengine.com/

    The issue is that the text is not visible on top of the banners, especially if the banner image is light... which most images are! So I have three suggestions:

    1) you allow an option to overlay a dark pattern on the image like this:
    https://www.dropbox.com/s/5226ovlu5c3xr3a/Screensh...

    2) Allow the text to remain white while having a black drop shadow to show:
    https://www.dropbox.com/s/8brhg8w875mwjzb/Screensh...

    3) Allow the text to have a background around it, just like you do in the subtitle.

    What do you suggest? I believe alot of ppl might have the same problem, but instead opt to use other images. My client paid for his images so we need to use them and I want to know the best solution for this!

    Thanks!

    Suzana

  •  8,442
    Tahir replied

    Hey Suzana!

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

    body .swiper-slide .content h2 {
        text-shadow: 2px 2px #000;
    }
    

    Cheers


    ThemeNectar Support Team 

  • Suska replied

    It did nothing?

  •   Suska replied privately
  •  8,442
    Tahir replied

    Hey Suzana!

    There was a missing curly brace in your custom css. I put it in and the css is working now. 

    All the Best,

    -T


    ThemeNectar Support Team 

  • Suska replied

    Thanks thanks thanks!