![Check out Enfold](https://kriesi.at/wp-content/themes/kriesi/images/banner-enfold.jpg)
Tagged: easy slider, post slider, posts
-
AuthorPosts
-
September 22, 2018 at 10:47 am #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
September 24, 2018 at 6:17 pm #1013735Hey 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, 11 months ago by
Victoria.
September 24, 2018 at 6:25 pm #1013739Hi Victoria, thanks.
Look at private content for the url.and wp admin
Cheers, MathildeSeptember 25, 2018 at 7:11 am #1014021Hi,
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,
IsmaelSeptember 25, 2018 at 10:42 am #1014107Wow!!! 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, MathildeSeptember 26, 2018 at 5:55 am #1014540 -
This reply was modified 5 years, 11 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.