How can I have "top title for the first slide" like tasty demo

Hi,

how can I have a third field for the slides in the Header Slider configuration?

If I install the Tasty demo I can see “top title for the first slide” for each slide but not in a default Sydney Pro installation.

Thank You for the support.

Hello there,

Unfortunately the option for top slide title is only available for Tasty. To achieve the same result on Sydney Pro, alternatively you can do the below steps:

  1. Install and activate the TC Custom JavaScript plugin
  2. Go To Appearance > Custom JavaScript
  3. Paste the following code into the provided box
    ;(function($) {

      // Function to alter button text and link address
      $.fn.slideTopTitle = function(titleTop) {
        if( this.length ) {
          this.find('.text-slider').prepend('<p class="toptitle">'+titleTop+'</p>');
        }
      }

      // First slide
      $('.slide-item:nth-of-type(1)').slideTopTitle('My Top Title Slide 1 Text');

      // Second slide
      $('.slide-item:nth-of-type(2)').slideTopTitle('My Top Title Slide 2 Text');

      // Third slide
      $('.slide-item:nth-of-type(3)').slideTopTitle('My Top Title Slide 3 Text');


    })(jQuery);
  1. Update
  2. To add some styles, add this CSS code to Appearance > Customize > Additional CSS from dashboard.
    .header-slider .slide-item .toptitle {
      color: #fff;
      text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
      margin-bottom: 0;
      font-size: 20px;
    }

Regards,
Kharis
aThemes Support

Ok, it works but I have two more issues:

  1. if I activate in the Header Slider section the option “Stop the text slider?” the top title field disappears. How can I prevent it?

  2. In the Additional CSS section you provide me above I put the following statement to change the font of the top title field but it does not work:

font-family: ‘Allura’, cursive !important;

How can I change the font?

Thank You for you magic support :wink:

Try replacing these lines of code:

      // First slide
      $('.slide-item:nth-of-type(1)').slideTopTitle('My Top Title Slide 1 Text');

      // Second slide
      $('.slide-item:nth-of-type(2)').slideTopTitle('My Top Title Slide 2 Text');

      // Third slide
      $('.slide-item:nth-of-type(3)').slideTopTitle('My Top Title Slide 3 Text');

with:

      // Stopped Text Slider
      $('.header-slider .text-slider-stopped').slideTopTitle('My Top Title Slide 1 Text');

Regards,
Kharis
aThemes Support

Great as always!

And how can I do to change the font?

If Allura is Google Font, you would use extra plugin like Easy Google Fonts.

Regards,
Kharis
aThemes Support

Thank You! Fantastic support as always!

1 Like

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support