Agency demo header

[abdurrehman]

Hi

I would like to edit the header file via child theme of demo agency, which file should I look for? I’m trying to achieve this https://puu.sh/BrK7w/befc962945.png

Thoughts?

[ruenel]

Hello There,

Thanks for writing in!

You are trying to edit the topbar. Once you have your child theme active and ready, please follow the following steps below:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?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>
  </div>

<?php endif; ?>

3] Save the file named as _topbar.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/. You will have to create the folder path since it does not exist yet in your child theme.
5] And then go X > Theme Options > Header > Miscellaneous and enable the Topbar so that your changes will display above the header.

Hope this helps. Please let us know how it goes.

[abdurrehman]

This file is the top bar but I’m trying to add in the where logo is and also how can I align that to the left to add contents on right side of the log?

Thanks

[ruenel]

Hello There,

If you want to add your modification in the right side of the logo then you will have to modify the _brand.php file instead. Please remove or delete first the _topbar.php and do the following again:
1] Using Notepad or TextEdit or Sublime Text or any text editor, please create a new file in your local machine.
2] Insert the following code into that new file

<?php

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

$site_name        = get_bloginfo( 'name' );
$site_description = get_bloginfo( 'description' );
$logo             = x_make_protocol_relative( x_get_option( 'x_logo' ) );
$site_logo        = '<img src="' . $logo . '" alt="' . $site_description . '">';

?>

<?php echo '<h1 class="visually-hidden">' . $site_name . '</h1>'; ?>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>

3] Save the file named as _brand.php
4] Upload this file to your server in the child theme’s folder wp-content/themes/x-child/framework/legacy/cranium/headers/views/global/

Hope this helps. Please let us know how it goes.

[abdurrehman]

Thanks.

Where in this file I could add my HTML to show up on the left and right of the logo?

[rad]

Hi @abdurrehman,

The left of the logo is before this line

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

then the right is after this line

</a>

Though, it may not work as you expected since it’s not meant for that setup. What you’re trying to di is create a layout with left, center, and right in which a more complex customization.

Though, if it’s just adding text content relative to the logo, then that might work if you’ll use float styling. Example,

<div style="float: left"> left text </div>

<a href="<?php echo home_url( '/' ); ?>" class="<?php x_brand_class(); ?>" title="<?php echo $site_description; ?>">
  <?php echo ( $logo == '' ) ? $site_name : $site_logo; ?>
</a>

<div style="float: left"> right text </div>

Though,if you’re aiming to create a layout around the logo then I recommend using Pro custom header, you could do it without any coding. Or hire a developer that could create custom templates for logo layout.

Thanks!

[abdurrehman]

Ok. Thank you.

I’m just wondering why do already I have the folder framework/views in my child theme? Can I delete that?

[thai]

Hey There,

That’s default directories in the child theme. Please keep it.

You just need to add the legacy/cranium/headers/views/global/ directories.

Regards!

[abdurrehman]

Ok. Thanks.

[rad]

You’re welcome!