Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
    Posts
  • #1283609

    hello, the title in the slider keeps on being black.
    nevertheless my attempt to change it

    
    /* titel slideshow homepage*/
    .avia-slideshow .avia-caption .avia-caption-title { color: white !important; }
    
    
    .avia-caption-title { color: white !important; }
    

    none of them worked.
    how can i put it in white?

    best regards jelle

    ps somewhat later ive discovered this one;

    
    .template-page .entry-content-wrapper h1 {color: white;}
    

    this works, but this seems to affect all the h1 on the entire site, not only the easy slider on the homepage….of course not what i want…

    • This topic was modified 3 years, 9 months ago by yampieters.
    #1283698

    sorry , i got it:
    there was this h1 tag in the title textfield….<h1> title text </h1>
    so that part is sloved.

    but on my mobile ive seen tat the text of the slider, caption title and text, is not totally visible if you look at it holding the mobile phone
    upright. is there a solution for this?.

    best regards, jelle

    • This reply was modified 3 years, 9 months ago by yampieters.
    #1284119

    Hi yampieters,

    There is not enough space in the portrait mode for that slider, it should probably be hidden, and another element added in its place.

    Best regards,
    Victoria

    #1284348

    ok, i will think about that.
    but if i decide to do so, it will be this way again?

    @media only screen and (max-width: 767px) {
    .anotherelement {
        <img src="yourpic.jpg" alt=""> 
    }
    }

    best regards, jelle

    #1284629

    Hi jelle,

    That CSS doesn’t look complete, please don’t use that. Could you try to explain your intentions a bit further please? If you need an identifier for the slider, then please try adding a class, then target it using that.

    Best regards,
    Rikard

    #1284645

    Rikards way is the best – give a custom-class to your slider and let it be part of the selector to the heading you like to change
    the custom-class will be on the slider itself (

    .custom-class .avia-caption-title {
        color: red;
    }

    (maybe an !important is neccessary)

    btw: there is no class : avia-caption on the tree there is : slideshow_caption

    Edit: sorry on easy slider there is avia-caption class !

    ___________
    next if you like to influence it in dependency to the slide you had to insert slide class ( slide-1, slide-2 etc.)

    .custom-class .slide-1 .avia-caption-title {
        color: red;
    }

    _____________


    BUT:
    there is the way in the slider ALB Element itself to change the font-color:
    On Styling Tab you got:

    Edit: sorry on easy slider there is this option missing – only for full-screen or full-width slider

    _________
    offtopic:
    well this is not the right way.
    There are attribute selctors that could be used. – You find a good list f.e. here https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
    but even those selectors are outside the curly brackets f.e.:

    .anotherelement img[src*="yourpic"] {
    your css code here …
    }

    that littel asterisk means : contains at least one occurrence of value (yourpic) within the string
    the list is big see link above ( *, $, ^, ~, |, etc. pp )

    #1284649

    but :

    .avia-slideshow .avia-caption .avia-caption-title { color: white !important; }
    

    That should work on easy slider – maybe it is a caching problem? Refresh the merged files etc.

    #1284967

    Hi,

    Thanks for helping out @guenni007 :-)

    Did you have any luck with the suggestions above @yampieters?

    Best regards,
    Rikard

    #1285409

    Hello and thanks Rikard en Guenni007,
    im on the way but not there yet.

    two questions left: how to repair the height so the text will, for all images in the slider, fit in the container on a mobile and how to put the textcontainer in the middle?

    this is what i did in the quick css, see code.
    the class i gave is ‘mobiel’

    `
    /*make slider text fit for mobile title*/
    @media only screen and (max-width: 767px)
    {
    .mobiel .avia-caption-title
    {width: 100% !important;
    height: 100% !important;
    font-size: 14px;
    }
    }

    /*make slider text fit for mobile text*/
    @media only screen and (max-width: 767px)
    {
    .mobiel .avia-caption
    {width: 100% !important;
    height: 100% !important;
    }
    }

    best regards, jelle

    • This reply was modified 3 years, 8 months ago by yampieters.
    #1287351

    Hi,

    I’m sorry for the very late reply. Please try this CSS as well:

    @media only screen and (max-width: 767px) {
    .avia-caption {
        bottom: 0;
        left: 0;
    }
    .avia-caption-content p {
        font-size: 12px !important;
        line-height: 12px;
    }
    }

    Best regards,
    Rikard

    #1287477

    Hello Rikard
    Thanks, i can see some improvements now, like it is in the middle and on the most pictures all text is to be seen.
    Ive made all pictures equal size now , and only nr 1 and nr 2 dont show the total text.
    Some lines at the bottom are missing.
    Is there a solution for tis?
    Ive tried to play with “bottom: 0px” but …no result…

    best regards, jelle

    • This reply was modified 3 years, 8 months ago by yampieters.
    #1287924

    You can close this one Rikard.
    Ive changed the proportions of the images, now its oke.
    thanks anyway for your help.
    best regards, jelle

    • This reply was modified 3 years, 8 months ago by yampieters.
    #1288256

    Hi,

    Great, I’m glad that you found a solution, and thanks for the update. I’ll go ahead and close this thread for now then. Please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 13 posts - 1 through 13 (of 13 total)
  • The topic ‘change color caption title on slider’ is closed to new replies.