Tagged: 

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • October 30, 2020 at 5:36 pm #1257084
    atelieremiliegayet

    Hi,
    1. I want to have a post slider with this look https://kriesi.at/themes/enfold-2017/elements/post-slider/ but for the moment I just have a post slider like that https://kriesi.at/themes/enfold/shortcodes/post-slider/
    How can I do ?

    2. I want also to reduce space between the column at 1%, how can I do

    Many thanks in advance

    October 30, 2020 at 9:52 pm #1257175
    Victoria

    Hey atelieremiliegayet,

    Can you give us temporary admin access to your website in the private content box below, so that we can have a closer look?

    Best regards,
    Victoria

    October 31, 2020 at 3:36 pm #1257236
    atelieremiliegayet

    Hi,
    I give you below the link to the page where I put what I want to have as post slider and what I have
    Thanks in advance for your help

    October 31, 2020 at 3:38 pm #1257237
    atelieremiliegayet

    PS : here is my custom css for masonry & post slider
    /* ————————MANSONRY———————— */
    /* Modifier la taille et le style du texte dans masonry */
    #top #main .av-masonry-entry .av-masonry-entry-title.entry-title {font-size:20px; color:#009da5; font-weight:400;}

    /* Modifier le texte du filtre masonry */
    #top div.container .av-masonry .av-masonry-sort {font-size:20px; text-align:left; text-transform:uppercase; font-family:’Oswald’;}

    /* Cacher la date dans masonry */
    #top span.av-masonry-date { display: none; }

    /* Ajoute une ombre aux vignettes dans masonry */
    #top .av-inner-masonry {box-shadow: 0 0 10px rgba(0,0,0,0.1);}

    /* ————————Post Slider———————— */

    /* personnalise les fleches de deplacement du slider */
    .avia-slideshow-arrows a::before {border-radius: 0px;}

    /* Cacher la date */
    .avia-content-slider .slide-meta .slide-meta-time {display: none;}

    /* Cacher les separator */
    .avia-content-slider .slide-meta .slide-meta-del {display: none;border:none;}
    .html_elegant-blog .avia-content-slider .slide-meta {display: none;border:none;}

    /* Cacher les Meta area */
    .html_elegant-blog #top .post-entry .blog-categories {display: none;}

    /* marge du texte des vignettes */
    #top .avia-content-slider {padding:0 10px;}
    #top .avia-content-slider article.slide-entry {margin-bottom:40px;}

    #top .avia-content-slider .slide-content {padding: 30px 20px;}

    /* personalisation du titre h3 */
    .html_elegant-blog .avia-content-slider .slide-entry-title {text-align:left;letter-spacing: 0px;font-size:20px; color:#009da5; font-weight:400;}

    /* Ajoute un fond et une ombre aux vignettes */
    #top .avia-content-slider article.slide-entry {box-shadow: 0 0 10px rgba(0,0,0,0.1);background: #F8F8F8;}
    .avia-content-slider .slide-image img {border-radius: 0px;}
    .avia-content-slider .slide-image {border-radius: 0px;}

    /* Text area */
    #top .avia-content-slider .slide-content {padding:30px 20px;margin-top:-10px;}

    November 4, 2020 at 12:55 pm #1258237
    Yigit

    Hi,

    Please go to Enfold theme options > Blog Layout > Blog Styling and choose “Modern Business” :)

    Best regards,
    Yigit

    November 4, 2020 at 1:15 pm #1258248
    atelieremiliegayet

    Thanks for your answer but nothing change with the “Modern Business” style :-(

    November 4, 2020 at 1:25 pm #1258250
    Yigit

    Hi,

    Please add following code to Quick CSS in Enfold theme options > General Styling

    .html_elegant-blog .avia-content-slider .av-vertical-delimiter {
    display: none;
}
.html_elegant-blog #top .post-entry .post-title, .html_elegant-blog .avia-content-slider .slide-entry-title {
    margin-bottom: 0;
}
.avia-content-slider-inner div .av_one_third {
    margin-left: 2%;
    width: 31.334%;
}

    Best regards,
    Yigit

    November 4, 2020 at 1:41 pm #1258256
    atelieremiliegayet

    Thanks, it’s working :-)

    1. It’s working but only for 3 columns, if I put less or more columns it’s not working anymore :-(

    2. For the image overlay do I have to put .image-overlay {display: none !important;} only ?

    3. How add an effect on the image as the masonry example ?

    Thanks a lot !

    November 4, 2020 at 1:48 pm #1258260
    Yigit

    Hey,

    1- Following code should be adjusted for other column counts as well

    .avia-content-slider-inner div .av_one_third {
    margin-left: 2%;
    width: 31.334%;
}

    2- If you would like to disable it globally, please go to Enfold theme options > Advanced Styling and edit “Linked Image Overlay” and if you would like to remove it from post slider only, you can use the code as following 

    .avia-content-slider-inner .image-overlay {display: none !important;}

    3- Please add following code to Quick CSS as well

    .avia-content-slider .slide-image:hover img {
    -webkit-transform: scale(1.05,1.05);
    transform: scale(1.05,1.05);
}
.avia-content-slider .slide-image img {
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
}

    Cheers!
    Yigit

    • This reply was modified 3 years, 8 months ago by Yigit.
    November 4, 2020 at 1:59 pm #1258264
    atelieremiliegayet

    Beautifull !! Everything is well working :-)
    Thanks, amazing support !

    November 4, 2020 at 2:08 pm #1258270
    Yigit

    Hi,

    You are welcome! :)

    For your information, you can take a look at Enfold documentation here – https://kriesi.at/documentation/enfold/

    If you have any other questions or issues, feel free to start a new thread under Enfold sub forum and we will gladly try to help you :)

    Enjoy the rest of your day!

    Best regards,
    Yigit

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The topic ‘Post Slider Custumization’ is closed to new replies.