Tagged: , ,

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • September 22, 2018 at 10:47 am #1013026
    mofix

    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

    September 24, 2018 at 6:17 pm #1013735
    Victoria

    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 6 years, 2 months ago by Victoria.
    September 24, 2018 at 6:25 pm #1013739
    mofix

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

    September 25, 2018 at 7:11 am #1014021
    Ismael

    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

    September 25, 2018 at 10:42 am #1014107
    mofix

    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

    September 26, 2018 at 5:55 am #1014540
    Ismael

    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

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