Tagged: 

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • February 3, 2015 at 10:01 pm #390400
    Boulanger

    Hi there,
    I would like to place my captions below the images in the Easy Slider instead of on top of the image. The images show artwork so that’s why I want the captions below. I now created a separated block below with the credits but it doesn’t really look good. How can I fix this? Note: I have short en longer captions. Hope you can help me out, again.

    Kind regards,
    Charlotte

    February 4, 2015 at 5:19 pm #390805
    Elliott

    Hi Boulanger!

    I didn’t see any captions in your link but I think what your wanting to do is add this to your custom CSS.

    .avia-slideshow, .avia-slideshow * {
  overflow: visible !important;
}
.avia-caption { bottom: -200px !important; }

    Best regards,
    Elliott

    February 4, 2015 at 6:14 pm #390841
    Boulanger

    Hi Elliott,
    Yes that’s the idea! Thanks, but it still doesn’t look very clean. The tabs below are placed on top of the captions. And if I want to write even more caption lines it will probably cover the image again. How can I tidy this up?
    Thank in advance!
    Charlotte

    February 5, 2015 at 2:55 pm #391354
    Ismael

    Hi!

    You can move the tabs downwards with this:

    #top .tabcontainer {
margin-top: 100px;
}

    Cheers!
    Ismael

    February 5, 2015 at 3:46 pm #391396
    Boulanger

    Hi Ismael,
    Thanks for your reply. But I have over a 100 photos. So it’s not really an option to change this margin for every photo individually, and again if the caption is changed. I’m looking for a solution to fix this automatically for every photo, no matter how long of short the caption.
    Kind regards,
    Charlotte

    February 6, 2015 at 12:55 pm #391990
    Ismael

    Hi!

    Alright. Remove the modifications above. Please edit config-templatebuilder > avia-shortcodes > slideshow.php. Find this code on line 830:

    $html .= "<li {$slider_data} class='{$extra_class} slide-{$counter} ' >";
					$html .= "<".$tags[0]." data-rel='slideshow-".avia_slideshow::$slider."' class='avia-slide-wrap' {$linkdescription} >{$caption}";
					if($this->config['bg_slider'] != "true" && empty($video))
					{
						$html .= "<img src='".$img[0]."' width='".$img[1]."' height='".$img[2]."' title='".$linktitle."' alt='".$linkalt."' $markup_url />";
					}
					$html .= $video;
					$html .= "</".$tags[1].">";
					$html .= "</li>";

    Replace it with:

    $html .= "<li {$slider_data} class='{$extra_class} slide-{$counter} ' >";
					$html .= "<".$tags[0]." data-rel='slideshow-".avia_slideshow::$slider."' class='avia-slide-wrap' {$linkdescription} >";
					if($this->config['bg_slider'] != "true" && empty($video))
					{
						$html .= "<img src='".$img[0]."' width='".$img[1]."' height='".$img[2]."' title='".$linktitle."' alt='".$linkalt."' $markup_url />";
					}
					$html .= $video;
					$html .= "</".$tags[1].">";
					$html .= "{$caption}</li>";

    Add this on Quick CSS field.

    .avia-caption {
position: relative;
bottom: auto;
left: 0;
}

    Best regards,
    Ismael

    September 28, 2018 at 4:46 am #1015579
    e16esign

    Hi – does anyone know how to make Ismael’s modification in the child functions.php file instead of editing the Parent theme file?
    Many thanks : )

    September 28, 2018 at 5:27 pm #1015817
    Victoria

    Hi e16esign,

    No, this customization needs to be in that file. You can copy the file to the child theme, though.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    September 28, 2018 at 9:41 pm #1015928
    Guenni007

    can you try to make it dependent on screen width:

    .avia-slideshow,
.avia-slideshow-inner ,
.avia-slideshow li {
    overflow: visible;
}

.avia-slideshow {
    margin-bottom: 80px !important;
}

.avia-slideshow-inner .avia-caption {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
}

.avia-slideshow-inner .avia-caption-title {
    color: #000 !important;
    text-align: center;
    font-size: 2.5vw
}

    see here on bottom: https://webers-testseite.de/horizontal-gallery/

    the avia-slideshow margin-bottom: 80px. has to be big enough to show even the caption content – if there was something

    • This reply was modified 6 years, 1 month ago by Guenni007.
    October 1, 2018 at 4:10 am #1016382
    Rikard

    Hi,

    Thanks for sharing @guenni007 :-)

    Best regards,
    Rikard

    October 2, 2018 at 1:12 am #1016793
    e16esign

    Thank you very much, will give these both a try : )

    October 2, 2018 at 6:18 am #1016883
    Rikard

    Hi,

    Great, please let us know how you get on with it.

    Best regards,
    Rikard

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