Add three buttons on video header in sydney


#1

Thanks for the awesome website theme sydney. I would like to know what javascript needs to be added to add three buttons: one on the left, one in the center and the other on the right side of video header in sydney theme.


#2

Hello there,

Try this jQuery code:


(function($){
      
    "use strict"

    var buttonURL1   = '#1';
    var buttonURL2   = '#2';
    var buttonURL3   = '#3';
    
    var buttonLabel1  = 'Button 1';
    var buttonLabel2  = 'Button 2';
    var buttonLabel3  = 'Button 3';
    
    var heroContent  = '<div class="slide-inner">';
        heroContent += '<a href="'+buttonURL1+'" class="roll-button button-slider button-left" target="_top">'+buttonLabel1+'</a>';
        heroContent += '<a href="'+buttonURL2+'" class="roll-button button-slider button-center" target="_top">'+buttonLabel2+'</a>';
        heroContent += '<a href="'+buttonURL3+'" class="roll-button button-slider button-right" target="_top">'+buttonLabel3+'</a>';
        heroContent += '</div>';
        
    $('.sydney-hero-area').append(heroContent);

})(jQuery);

To apply it to your site, you can use the TC Custom JavaScript plugin.

Regards,
Kharis


#3

Appreciate the prompt response. It worked.
Could you please explain as to how the each of the buttons can be inserted on the leftmost side of the screen and on the rightmost side of screen.

Also when i add css
.sydney-hero-area,
.fluid-width-video-wrapper,
#wp-custom-header-video {
max-height: 90vh !important;
}

.fluid-width-video-wrapper {
padding-top: 0 !important;
}
my video height is full page, but this reduces my video width.How can the video be made fit to page.


#4

Hello there,

To place the left and right buttons to left/right edge of the screen, add this CSS code:


.button-left {
  float: left;
}

.button-right {
  float: right;
}

I am sorry, there is no way to fit the video size.

Regards,
Kharis


#5

Thanks for the prompt response once again, it worked.
Can the buttons be center aligned vertically.


#6

Hello there,

Add this CSS code, please. Let me know how it goes.


.sydney-hero-area {
  position: relative;
}

.slide-inner {
  min-height: auto;
  padding-top: 0;
}

Regards,
Kharis


#7

Thanks again, it worked!!! Great support…


#8

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


#9

Hello

I need to get this CTA on a video header too here http://r4i.62a.myftpupload.com/

I added the js http://r4i.62a.myftpupload.com/wp-content/uploads/custom-css-js/31.js

But I am not seeing the buttons, any ideas what could be wrong?

thanks


#10

I am trying this one from you too, to get Title, slider text and CTA button but also with out success


#11

Hello there,

Viewing the source code of your site, I didn’t see any JS code applied. Try doing the below steps, please:

  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($){
          
        "use strict"

        var buttonURL1   = '#1';
        var buttonURL2   = '#2';
        var buttonURL3   = '#3';
        
        var buttonLabel1  = 'Button 1';
        var buttonLabel2  = 'Button 2';
        var buttonLabel3  = 'Button 3';
        
        var heroContent  = '<div class="slide-inner">';
            heroContent += '<a href="'+buttonURL1+'" class="roll-button button-slider button-left" target="_top">'+buttonLabel1+'</a>';
            heroContent += '<a href="'+buttonURL2+'" class="roll-button button-slider button-center" target="_top">'+buttonLabel2+'</a>';
            heroContent += '<a href="'+buttonURL3+'" class="roll-button button-slider button-right" target="_top">'+buttonLabel3+'</a>';
            heroContent += '</div>';
            
        $('.sydney-hero-area').append(heroContent);

    })(jQuery);
  1. Update

Regards,
Kharis


Adding Title and button in Video Header
#12

You Have no Idea how happy you have made me with that :slight_smile:
Thank you very much you are awesome!!

But the frustrating thing is that I already have two JS plugins and I did have another JS script you provided on some old posts. I added this new JS script, the one from this thread and the other one old one to the JS plugin I was using with that old code and also didn’t work.

I saw that in one one post you suggested this JS plugin but since it says is not ben tested with the latest WP I didn’t installed it and choose the other one.

So the buttons now appear, thanks to the jS plugin you suggested.

I was able to change the inner color and the border color but I have not being able to figure out how to change the text color for hover and then for link already visited.

Also as you will see they are glued together, and they are way to high, I am not sure how will be the best CSS to position them like maybe 50px over the bottom edge of the video and bee on that same position for pc, tablet an phones


Polylang other Language not responding to CSS changes
#13

Hello there,

Try adding this CSS code to Appearance > Customize > Additional CSS from dashboard.

    .button-slider.button-center {
      margin-left: 20px;
      margin-right: 20px;
    } 

Regards,
Kharis


#14

Thank you :slight_smile:


#15

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