Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1013026

    Hi, I have been working hard to change the featured slider to something I see others have that are super elegant and cool. I think many wants this, so I’m glad to share it and hope you can help me with the rest. Many clients can’t edit in photoshop etc. They want it easy and simple. The ones I have now just want to upload the articles with features image, and just put it in the right category and that’s what they can do basically. So to make a simple and elegant post slider is much appreciated without all the fuss about layers and editing in photo programs.

    So here it is:

    On the default, the features image is in the whole slider and the text above. I want the image to be on the left and the text on the right. I also made it transparent so that the background image in the color section under shows as widescreen.

    This is the example that the client wants (copy from illustrated image file) https://www.dropbox.com/s/ongiq7zyzitjagh/ex1.jpg?dl=0

    This is how far I have got with this in Enfold (screenshot with explanation) https://www.dropbox.com/s/vu8ljrfltrmtxz1/ex2.jpg?dl=0

    This is the css code I have so far:
    #top .avia-slideshow-fixed-height > li {
    position: absolute;
    width: 100%;
    height: 100%;
    background-size: 450px 630px!important;
    background-position: left center!important;
    background-repeat: no-repeat!important;
    background-color:rgba(0, 0, 0, 0)!important;
    margin-left: 10%!important;
    }

    .avia-featureimage-slideshow .slideshow_caption h2 {
    margin: 0;
    text-shadow: none!important;
    }

    .avia-slideshow-arrows {
    display: none!important;
    }

    #top div .caption_center .slideshow_caption {
    margin-left: 44%!important;
    width: 50%!important;
    margin-right: 25px!important;
    text-align: left!important;
    }

    .avia-slideshow-caption-title {
    position: relative;
    top: -50px;
    left: -50px;
    }

    So what I can’t find to change is the small line under the title, it need to go to left. And then I wonder if we can move the bullets on the left side and change them to be vertical. Also that the slide transition goes up/down, not sideways. That would be awesome!
    I can’t figure out the responsive version of it. Would like the image to scale properly. And it all to look very good.

    I so much hope you can help me with the rest.

    Thanks, Mathilde

    #1013735

    Hey Mathilde,

    Could you please give us a link to your website, we need more context to be able to help you.

    I’m not sure we can move the dots to the left, but the underline can be adjusted.

    Best regards,
    Victoria

    • This reply was modified 5 years, 9 months ago by Victoria.
    #1013739

    Hi Victoria, thanks.
    Look at private content for the url.and wp admin
    Cheers, Mathilde

    #1014021

    Hi,

    Thanks for the update.

    You can use this css codes to adjust the layout of the slider.

    .avia-slideshow-dots {
        left: 20px;
        width: 20px;
        height: auto;
        top: 50%;
        transform: translate(0, -50%);
        bottom: auto;
    }
    
    #top .av-control-minimal .avia-slideshow-dots a.active {
        background: #000000;
        border: 2px solid #000000;
    }
    
    .avia-featureimage-slideshow h2.avia-caption-title:after {
        display: block;
        content: "";
        width: 40px;
        border-top: 3px solid #000000;
        margin: 11px 0;
        position: relative;
        top: 7px;
    }
    

    Best regards,
    Ismael

    #1014107

    Wow!!! Yes!! Thanks a lot!! You’re the best!! Can you please help me with the responsive version of it?
    Was there a possibility to make it slide up/down instead of sideways?
    Cheers and thanks, Mathilde

    #1014540

    Hi,

    You can hide that particular slider on mobile view and then add another type of slider that is more suited on smaller screens. You can toggle the sliders’ screen options for that. Unfortunately, you can’t set the slider to move vertically.

    Best regards,
    Ismael

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.