Support » Theme: Virtue » Slider caption transparency & size & position

  • 1stclasspaintinganddecorating

    (@1stclasspaintinganddecorating)


    Hi,

    Firstly Id just like to say fantastic theme. πŸ™‚

    Question is..
    How can I make the transparent box for the text as clear/transparent as possible like the text are in your demos on sliders?.. as mine look quite dark (grey/black)

    Or if not possible can i make the transparent box smaller as possible to fit the text/letters close as possible… (i.e same size as my text or close as possible.)

    P.s ..(FYI,.. incase this helps,) I am also using the mobile flex slider with only one photo and auto play off for page loading speed.. as i didnt know if there is a way to just load a photo for mobile and not have to use the mobile slider.

    The code Im using at the moment is as below.

    .flex-mobile-caption {
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 77px;
    margin: 0 auto;
    }

    .flex-padding {
    padding: 0;
    }

    .flex-caption {
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 77px;
    margin: 0 auto;
    }

    .flex-padding {
    padding: 0;
    }

    Hope the above helps also.

    Many thanks in advance
    Paul

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

Viewing 12 replies - 1 through 12 (of 12 total)
  • Can you link to the demo that you’re referring to so I can be sure of what you’re talking about?

    Try adding this CSS and let me know if it does what you’re wanting.

    -Kevin

    Thread Starter 1stclasspaintinganddecorating

    (@1stclasspaintinganddecorating)

    Hi Kevin,

    Thank you for the fast reply.

    I think you may of missed off the CSS

    The link is.. https://themes.kadencethemes.com/virtue/

    Basically in your sites demo the text looks placed in the photo rather than showing any transparent box at all.
    Where as with mine you can clearly see the darker box around my caption text “making home sparkle” etc.

    Its even worse on mobile as it takes up half the height of my photo if you view it on mobile.

    best regards
    Paul

    Thread Starter 1stclasspaintinganddecorating

    (@1stclasspaintinganddecorating)

    P.s.. Im a novice and my above CSS was just what i have learned by trialled and error of reading the support and googling before contacting you so it may be wrong and not all necessary. Please advise if I also need to remove any and change any as well.

    Thank you

    Paul

    The demo site actually has the text added to the image prior to being uploaded for the slider.

    Here is the CSS that I intended to share:

    .captiontitle h4 {
        margin: 0;
    }
    
    .captiontitle.headerfont {
        background: rgba(0, 0, 0, 0.56);
    }

    let me know if that works for you. And in response to your last post, yeah that CSS may be causing the problem.

    My CSS should fix it, but if it persists, we’ll look at your other CSS and see if we can find a better way to write it.

    -Kevin

    Thread Starter 1stclasspaintinganddecorating

    (@1stclasspaintinganddecorating)

    Ah i did wonder if it had been added first,

    Yes thats got the caption box closer thank you ….. can we try to go a tiny bit more please… (then i will also learn/understand what change you have made for future reference.

    And as for the transparency its actually gone darker.

    Thanks
    Paul

    Would you prefer to remove the shadow completely?

    You can do so with this CSS:

    .captiontitle.headerfont {
        background: transparent;
    }

    -Kevin

    Thread Starter 1stclasspaintinganddecorating

    (@1stclasspaintinganddecorating)

    Brilliant thank you Kevin, yes that exactly what I wanted and its worked perfectly on desktop.

    As Im using the mobile flex slider do i need to add separate CSS for that as that is still dark?… (i have cleared phone cache)

    Below is the revised CSS I now have including yours..

    .captiontitle.headerfont {
    background: transparent;
    }

    .captiontitle h4 {
    margin: 0;
    }

    .flex-padding {
    padding: 0;
    }

    .flex-caption {
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 54px;
    margin: 0 auto;
    }

    .flex-mobile-caption {
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 47px;
    margin: 0 auto;
    }

    .flex-mobile-padding {
    padding: 0;
    }

    Thanks
    Paul

    hannah

    (@hannahritner)

    Hey Paul,
    I’m seeing your flex captions with a transparent background on mobile. Have you cleared all your cache? What device are you using?

    Hannah

    Thread Starter 1stclasspaintinganddecorating

    (@1stclasspaintinganddecorating)

    Hi Hannah,

    Sorry for my slow reply.

    Yes its clear now thank you.. I did clear caches on my phone but think it took some time to clear/come through.

    How can i centralise it on the mobile slider please?

    I have still got the same CSS as posted below… Im not sure whats incorrect or if any conflict.

    .captiontitle.headerfont {
    background: transparent;
    }

    .captiontitle h4 {
    margin: 0;
    }

    .flex-padding {
    padding: 0;
    }

    .flex-caption {
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 54px;
    margin: 0 auto;
    }

    .flex-mobile-caption {
    width: 100%;
    text-align: center;
    position: relative;
    bottom: 47px;
    margin: 0 auto;
    }

    .flex-mobile-padding {
    padding: 0;
    }

    Thank you and
    Best regards

    Paul

    hannah

    (@hannahritner)

    I’m already seeing your captions centered on mobile. Do you mean to vertically centralize?

    Hannah

    Thread Starter 1stclasspaintinganddecorating

    (@1stclasspaintinganddecorating)

    Hi Hannah,

    Thank you for the reply

    Ahh sorry no thats because Ive just reverted back to my old setting at the moment as I created a big problem with 404 errors so its now on a previous a backed up just at present temporarily … (thats why the transparency on captions isn’t there again either… I stupidly hadnt backed up the latest)

    The setting im talking about was as before, i was using mobile flex slider with only one photo and auto play turned off and the image was larger…

    So the caption was/is over to the right say 2/3 rds approx.

    I will be reverting back soon as ive time to edit again

    Is there a general CSS you would use to off set… I will be using all the above CSS as posted above

    Kind regards

    Paul

    hannah

    (@hannahritner)

    Try adding this css:

    .flex-caption {
        left: 20px;
    }

    Does that work for you?

    Hannah

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Slider caption transparency & size & position’ is closed to new replies.