Adding Shortcode To Topbar

[Contourandco]

Hey Guys,

In the regular version of xtheme I could easily install GTranslate into the topbar to the left of the social media icons. However, since x-pro doesnt have a topbar.php file I cant do it the way I usually do. I need to add this code to the left of the social media icons in my header.

<div class="google-translate"><?php echo do_shortcode('[gtranslate]'); ?></div>

See web address in secure note.

[Prasant]

Hello @Contourandco,

Thanks for asking.

As you have already installed child theme on the website, please copy _topbar.php from /wp-content/themes/pro/framework/legacy/cranium/headers/views/global/ and copy the same file into child theme under /wp-content/themes/pro-child/framework/legacy/cranium/headers/views/global/

After that you can replace the content of the file with following:

<?php

// =============================================================================
// VIEWS/GLOBAL/_TOPBAR.PHP
// -----------------------------------------------------------------------------
// Includes topbar output.
// =============================================================================

?>

<?php if ( x_get_option( 'x_topbar_display' ) == '1' ) : ?>

  <div class="x-topbar">
    <div class="x-topbar-inner x-container max width">
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
      <?php x_social_global(); ?>
      <div class="google-translate"><?php echo do_shortcode('[gtranslate]'); ?></div>
      </div>
  </div>

<?php endif; ?>

Next, step is to style the element. Please add following CSS under Pro > Theme Options > CSS:

.google-translate {
    float: right;
}

You can use above selector .google-translate to style other aspect of the elements as-well.

If you would like to learn CSS, I am sharing few resources that you take a look to get started with CSS and an interesting tool that you can use to speed up the development process.

I recommend you to watch following video that will help you to get started with CSS.

https://www.youtube.com/watch?v=MFR4WXiLzpc

Sometimes it can get a bit difficult to find out the right selector to be able to write the required CSS codes. A handy tool that can help you in this is Google Chrome dev tools. I am sharing the resource that you can refer to get started with dev tools.

https://developers.google.com/web/tools/chrome-devtools/css/

https://developers.google.com/web/tools/chrome-devtools/

https://www.youtube.com/watch?v=tP_kXBJWPhQ&t=200s

Thanks.