Dia slideshow element: changing h-tag, overlay and location/font size title

Hey Peter,

Thank you for the inquiry.

Are you using the Easy Slider element?

— You can change the heading default by editing any of the slides’ Advanced > Heading Tag settings.

— To center the caption and add a transparent overlay, try configuring the Styling > Caption > Caption Positioning settings.

— The font sizes can also be adjusted in the Styling > Font Sizes panel.

Best regards,
Ismael

Hi,
To make the slider title h3 try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

function custom_slider_h3_script() { ?>
  <script>
(function($) {
  $(function() {
    function replaceElementTag(targetSelector, newTagString) {
      $(targetSelector).each(function(){
        var newElem = $(newTagString, {html: $(this).html()});
        $.each(this.attributes, function() {
          newElem.attr(this.name, this.value);
        });
        $(this).replaceWith(newElem);
      });
    }
    replaceElementTag('.avia-caption-title.is-h1 h1', '<h3></h3>');
  });
}(jQuery)); 
</script>
  <?php
}
add_action( 'wp_footer', 'custom_slider_h3_script', 99 );

Best regards,
Mike

Hi,

Thank you for the inquiry.

The caption titles look white when we checked. To center-align the container, please add this css code:

.avia-slideshow.av-desktop-hide.av-medium-hide .avia-caption {
    bottom: 31%;
    left: 50%;
    transform: translateX(-50%);
}

Best regards,
Ismael

Hi,

Thank you for the clarification.

Try to add this css code to adjust the text color of the title:

#top #wrap_all .all_colors .av-image-caption-overlay-center h3 {
    color: #ffffff;
}

And to apply the overlay on mobile view, try this css code:

@media only screen and (max-width: 767px) {

  /* Add your Mobile Styles here */
  #top .avia-slideshow.av-m3vkqh71-4e1d1fba30600cffcf1218dbcfe528bd .avia-slide-wrap:before {
    content: '';
    background: rgba(0,0,0,0.5);
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
  }
}

Best regards,
Ismael

Hi,

Sorry for the delay. Glad to know that the suggestion worked. To remove the background of the caption text, please include the following code inside the css media query:

.avia-slideshow.av-m3vkqh71-4e1d1fba30600cffcf1218dbcfe528bd .avia-caption .avia-caption-title {
    background: transparent;
}

Best regards,
Ismael

Hi,

Thanks for the info @Guenni007.

Best regards,
Ismael

Hi,

Thank you for the update.

Please include this css code to adjust the arrows and the alignment of the caption text:

#top .av-slideshow-ui .avia-slideshow-arrows a.prev-slide {
    left: 0;
}

#top .av-slideshow-ui .avia-slideshow-arrows a.next-slide {
    right: 0 !important;
}

#top .avia-slideshow .avia-caption {
    min-width: 80%;
    text-align: center;
}

Best regards,
Ismael

Hi,

Thank you for the update.

To adjust the vertical alignment of the caption, look for this css rule and adjust the bottom property to 41% or so:

.avia-slideshow.av-desktop-hide.av-medium-hide .avia-caption {
    bottom: 31%;
    left: 50%;
    transform: translateX(-50%);
}

For the arrows, add this css code:

#top .avia-slideshow-arrows a {
    top: 40%;
}

Best regards,
Ismael