Is it possible to have an animated logo in the header area?

Hi, I’ve been asked by a client if they can have an animated logo instead of the usual image version. Before they pay to get it done, I thought I’d double check with yourselves first! The file types that it will be supplied in are:
AVI, MOV, MP4, WMV

If there is a different file type that would work besides the ones listed above, can you let me know please!

Thanks!

Hello @core365,

Thanks for writing in!

You can achieve logo animation by using a GIF file or using HTML5 and CSS animations. Providing support for the same will fall outside the scope of support we can offer. In case you want to go with HTML and CSS option, please take a look at following resource.

https://www.w3schools.com/cssref/css3_pr_animation.asp

https://www.w3schools.com/howto/howto_css_shake_image.asp

Thanks.

Hi, thanks for the info, but this was going to be a logo that had more complex animation so it would be a AVI, MOV, MP4, WMV file, but it sounds like you haven’t got the option to include that file type in the header.

Thanks

Hi @core365,

If you are using Pro, you can add a Video element to the header area since the files you are trying to use are video files.

If you are using X, this is still possible but you cannot do it through the logo option of the Theme Option settings. You can add the logo file by overriding the header code through a child theme.

The file that displays the logo area is _brand.php that is in wp-content/themes/x/framework/legacy/cranium/headers/views/global.

Hope this helps you get started.

Hi, thanks for the pointer! I’ve tried to use Pro before and found it much harder than X to do the header area. Are you able to tell me what I need to do to add the logo file to the header code as I can’t find the code in the child theme relating to this.

Thanks!

Hi @core365,

The _brand.php that is in wp-content/themes/x/framework/legacy/cranium/headers/views/global is the template file that displays the logo area.

So if you want to override, please install and activate the child theme. If you do not have the child theme installed yet, you can download it from here. Once you have it installed and activated, please login through FTP then go to wp-content/themes/x-child then go to the following directory framework/legacy/cranium/headers/views/global.

If any of those directories are not yet created, please manually create them until you get to the global directory and that is where you place the _brand.php that you will make changes to.

Try adding this code to the file:

<?php

// =============================================================================
// VIEWS/GLOBAL/_BRAND.PHP
// -----------------------------------------------------------------------------
// Outputs the brand.
// =============================================================================

$option_logo_text = x_get_option( 'x_logo_text' );
$option_logo_src  = x_get_option( 'x_logo' );
$logo_text        = ( empty( $option_logo_text ) ) ? get_bloginfo( 'name' ) : $option_logo_text;

if ( empty( $option_logo_src ) ) {
  $logo_output = $logo_text;
} else {
  $logo_src    = x_make_protocol_relative( $option_logo_src );
  $logo_output = '<img src="' . $logo_src . '" alt="' . $logo_text . '">';
}

if ( x_get_option( 'x_logo_visually_hidden_h1' ) ) {
  echo '<h1 class="visually-hidden">' . $logo_text . '</h1>';
}

?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>">
  <?php echo $logo_output; ?>
</a>

You will see the line: <?php echo $logo_output; ?> which outputs the logo.

You have to replace that line with the HTML5 video code:

https://www.w3schools.com/html/html5_video.asp

Hope this helps.

Hi @Jade,

That’s great! Thank you so much for the help and pointers, I really appreciate it!

Thank you!

You’re most welcome!

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.