Button in header video

Hello,

how to integrate the button of the slider ( roll-button ) in the header video?

Thank for your help.

Best Regards,

Hello there,

Thank you for getting in touch here.

Hello there,

In order to accomplish that objective, could you please try to do the following?

  1. Install and activate the Header and Footer Scripts plugin
  2. Go To Settings > Header and Footer Scripts panel
  3. Paste this code into the provided Scripts in footer box
  4. Save settings

Regards,
Kharis

Ok Thank

I must not copy the right place
I ve the error message.
Parse error: syntax error, unexpected ‘<’ in /home/timeofdrta/www/wp-content/plugins/header-and-footer-scripts/shfs.php on line 364

Hello there,

Please post that file here, and share its URL here.

Regards,
Kharis

ok

thank,

This code must not be inserted directly in that file. It must be in Dashboard > Settings > Header and Footer Scripts panel.

Regards,
Kharis

ok
thank

can I use my .css button ?
when I called my class .css (perso) the button dispare.

/* Button perso
-------------------------------------------------------------- */
.perso {
position: relative;
margin-top:400px;
border-style:solid;
border-color:#1e73be;
border-radius: 50px;
text-decoration: none;
width:90px;
height:90px;
}
.perso:hover{
border-style:dashed;
}
.button-slider{
color: #0f639f;
font-size:40px;
font-family: Arial;
font-weight:bold;
line-height:90px;

}
a:hover{
color:#0f639f;
}

Hi, Kharis!

I´ve also tried it – unfortunately it doesn´t work and no button is showing up. Do you have an alternative coding which could work?

Thanks in advance

Hello @jfdel,

Could you please share your URL here so I can have a closer look?

Regards,
Kharis

Hello @bluewhite,

Try to clear your browser’s cache. If you have a cache plugin like W3 Total Cache being enabled, try to clear all caches as well.

If it didn’t give any changes, please share your URL here so I can have a closer look.

Regards,
Kharis

Hi,

I tried , and it’s ok for me

Hello,
It works :slight_smile: But is it possible to make it work with Polylang? So the text on button will change when language change?
Regards,
Rafal

Dear Rafal,

Please share your site’s URL here. Maybe there is something I can add to the code depending on your language.

Regards,
Kharis

Thank You :slight_smile: Currently it’s on my localhost. I’ll post URL, as soon as I put site on server.

hello kharis

my url www.timeofdrone.com

thanks

Hello @jfdel,

Please try to do the following:

  1. Add this PHP code into the child theme’s functions.php file

/**
 * Add current language name to body class
 */

add_filter( 'body_class', 'sydney_child_body_class' );
function sydney_child_body_class( $classes ) {
	$classes = (array) $classes;

	$current_lang = pll_current_language();

	if( !empty($current_lang) ){
		$classes[] = 'current-lang-' . $current_lang;
	}

	return array_unique( $classes );
}

  1. See the third step outlined here. Use the following jQuery code:

<script>
(function($){
      
    "use strict";

    var btnText = 'Click to begin';

    if($('body').hasClass('current-lang-it')){
      btnText = 'Button for Italiano';
    }

    if($('body').hasClass('current-lang-de')){
      btnText = 'Button for Deutsch';
    } 

    var CTAbtn = '<div class="text-slider-section">'+
                 '<a href="#primary" class="roll-button button-slider">'+btnText+'</a>'+
                 '</div>';
    
    $('.video-container').append(CTAbtn);

})(jQuery);
</script>

What you need to adjust is these lines:


if($('body').hasClass('current-lang-de')){
  btnText = 'Button for Deutsch';
} 

Meaning that you will specify a button text for Deutsch. If the respective language is Italian, you must change this line current-lang-de to current-lang-it. The pattern is current-lang-<LANGUAGE SLUG>. You can find the language slug here, in the “GlotPress” column.

I hope this reply helps.

Regards,
Kharis

Can it be done through custom css plugin, instead of child theme’s file?

My video header: http://vpr.pl/en/cnc-en/

You can also insert the PHP code (at the step 1) using the Functionality plugin.

Regards,
Kharis

Facing trouble while adding button on the video header. Please help. Link - http://dtwebsite.com.cp-30.webhostbox.net/

Hello… I have tried the same solution, but am getting a “jQuery not found” error. Please help in adding a button on the video header.