Tagged: 

Viewing 21 posts - 1 through 21 (of 21 total)
  • Author
    Posts
  • September 22, 2014 at 3:51 pm #323080
    pegasso4444

    Hey!
    I need to have the captions in center below the Fullwidth Easy Slider.

    Following code is working for the Easy Slider:
    /****Caption Title Color****/
    .avia-slideshow .avia-caption .avia-caption-title {
    color: #777777 !important;
    font-size: 15px !important;
    text-transform:capitalize
    }
    /****Caption Text Color****/
    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
    background: transparent;
    font-size: 13px !important;
    color: #b6b6b6 !important;
    padding: 0px 0px;
    text-transform:capitalize
    }
    /***Caption in Center****/
    .caption_framed .slideshow_caption .avia-caption-content p, .caption_framed .slideshow_caption .avia-caption-title, .avia-caption .avia-caption-content p, .avia-caption .avia-caption-title {
    width: 100%;
    text-align: center;
    }
    .avia-caption, .avia-inner-caption, .avia-inner-caption {
    width: 100%;
    left: 0;
    }
    /****Caption below Slider****/
    .avia-caption {
    position: absolute;
    bottom: -34px;
    }
    .avia-slideshow, .avia-slideshow-inner {
    overflow: visible !important;
    }
    .avia-slideshow {
    padding-bottom: 34px;
    }

    How can I get that also for the Fullwidth Easy Slider?
    Thanks for your help
    Peter

    September 23, 2014 at 11:32 pm #323960
    Josue

    Hey!

    Can you post a link to the page where you are trying this?

    Cheers!
    Josue

    September 24, 2014 at 3:39 pm #324333
    pegasso4444

    He Josue!
    My site is local, but I made a test site live.
    http://euramobil.info/portfolio-item/full-width-easy-slider-test/
    Here what I need:
    http://gyazo.com/817706f50373768509dc0fbfabdce0db

    Photographers do not want captions in the image, so I need caption in center below the slider
    Thanks for your help
    Peter

    September 25, 2014 at 6:56 am #324807
    Josue

    Hi Peter!

    Try with this:

    .caption_bottom {
    bottom: -100px;
}
.caption_bottom *{
    color: red !important;
}
.avia-slideshow, .avia-slideshow-inner {
    overflow: visible;
}

    Adjust as needed.

    Cheers!
    Josue

    September 26, 2014 at 8:40 am #325440
    pegasso4444
    This reply has been marked as private.
    September 29, 2014 at 5:30 am #326288
    Josue

    Hi!

    Add this to your CSS:

    .avia-caption-content {
    top: -5px;
    position: relative;
}

.avia-caption-title{
    font-family: sans-serif;
    font-style: normal;
    font-weight: normal;
}

    That line you mention is created by the next element, not the slider.

    Best regards,
    Josue

    September 29, 2014 at 1:07 pm #326482
    pegasso4444

    Hey Josue!
    Yes I am almost there, but the Fullwidth Easy Slider has this animation in the caption:
    http://euramobil.info/portfolio-item/full-width-easy-slider-test/

    How can I get rid of that?
    Thanks for your help
    Peter

    September 29, 2014 at 1:13 pm #326487
    Yigit

    Hey!

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

    .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-title, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-title, .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-caption-content, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-caption-content {
visibility: visible;
-webkit-animation: none;
-moz-animation: none;
animation: none;
}

    Regards,
    Yigit

    November 12, 2015 at 6:07 pm #534945
    jdbrunet

    Hi,
    Sorry, but I think I have the same question as above but I’m unclear about which answer is right for me. I am using a full width easy slider and would like the captions to appear below the image, not anywhere on the image. Can you provide me with the code to change this? And please provide details as to where I need to insert the code. I am a newbie.

    There are no captions at the moment. I removed them because in most cases they are simply too hard to read when placed anywhere on the image.

    Thank you!!

    Joe

    November 13, 2015 at 1:57 am #535183
    Josue

    Hi!

    Place a bottom caption and start with this code.

    Best regards,
    Josue

    November 13, 2015 at 4:19 am #535200
    jdbrunet

    Thank you! And should I go to Appearance > CSS Stylesheet Editor and enter the code there ? Or is there another place I should paste it into?

    November 13, 2015 at 10:30 am #535307
    Josue

    Enfold > General Styling > Quick CSS.

    November 16, 2015 at 9:53 pm #536895
    jdbrunet

    Thank you!!!

    November 17, 2015 at 9:59 am #537191
    Rikard

    Hi,

    Glad we could help :-)

    Thanks,
    Rikard

    December 8, 2015 at 3:07 am #548480
    jdbrunet

    Hi,
    The caption appears below the slide show which is what I want. Thanks, again for providing the code to do so.
    But I am wondering if there is a way to slightly reduce the white space between the caption and the bottom of the image?

    Here is a link to the page with the slide show: http://josephbrunette.com/field-notes/
    You can see that the caption below it feels a bit too far away.

    Thank you!

    December 14, 2015 at 4:07 pm #552418
    Andy

    Hey!

    try this code in Quick CSS field:

    .caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
padding-bottom: 38px;
}

    and adjust as needed.

    Regards,
    Andy

    January 10, 2016 at 7:37 pm #562788
    jdbrunet

    Hi Andy,

    I’ve tried adjusting the padding with the code you provided but it is not affecting the placement of the text at all.
    I’ve tried several values ranging from 38px to -20px but it has no affect. Any other ideas?

    http://josephbrunette.com/field-notes/

    Thank you!

    Joe

    January 11, 2016 at 7:50 am #562951
    Rikard

    Hi,

    Please try the following instead: 

    .page-id-800 .avia-caption-content p {
margin-top:10px !important;
}

    Regards,
    Rikard

    • This reply was modified 8 years, 3 months ago by Rikard.
    January 11, 2016 at 8:16 pm #563460
    jdbrunet

    Thanks for such a quick response! I tried the code you suggested but that did not have any effect either. For some reason when I made that change all of the text for my captions are colored red and I am unable to change them back to grey like they were before. Not sure what I am doing wrong! http://josephbrunette.com/field-notes/

    Joe

    January 12, 2016 at 8:56 am #563738
    Rikard

    Hi,

    You have this CSS turning your text red: 

    .caption_bottom *{
    color: red !important;
}

    I would try to clean out the code you don’t need or use, it gets difficult knowing what it does otherwise.

    Regards,
    Rikard

    January 12, 2016 at 3:37 pm #563906
    jdbrunet

    Thank you for your expertise!
    Much appreciated,
    Joe

  • Author
    Posts
Viewing 21 posts - 1 through 21 (of 21 total)
  • The topic ‘Caption below Fullwidth Easy Slider’ is closed to new replies.