Add text to left of social icons on topbar

[eutaw]

I was able to align text to the right on the topbar. However, I wanted the text that I added (DONATE) to be to the left of the social icons. How is that done?

Also, how would I show the text as a button?

Thank you.

Login info follows in a secure note.

[jade]

Hi there,

Please edit the HTML code for the donate link and add the x-btn x-btn-real x-btn-square x-btn-mini classes to it like this:

<a class="x-btn x-btn-real x-btn-square x-btn-mini" href=" https://friendsofoberlinvillage.org/donate/">DONATE</a>

Then add this code in the _topbar.php in x-child/framework/legacy/cranium/headers/views/global/ :

<?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 x_social_global(); ?>
      <?php if ( x_get_option( 'x_topbar_content' ) != '' ) : ?>
      <p class="p-info"><?php echo x_get_option( 'x_topbar_content' ); ?></p>
      <?php endif; ?>
    </div>
  </div>

<?php endif; ?>

Hope this helps.

[eutaw]

How do I access

_topbar.php in x-child/framework/legacy/cranium/headers/views/global/ : ?

Just to be clear…the PHP code moves the button to the left of the social icons, correct?

For the button, how do I change the background color of the button, make it have rounded edges, and cause it to be vertically centered on the topbar?

[rad]

Hi there,

Please skip that, instead, add this CSS to your global custom CSS.

.x-topbar-inner {
    display: -webkit-flex;
    -webkit-flex-direction: row-reverse;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

Cheers!

[eutaw]

Thank you. Thank you.

How do I vertically align the word ‘DONATE’? I styled the topbar with the following CSS, but it didn’t work.

vertical-align: middle;

[Prasant]

Hello @eutaw,

Please add following CSS under X > Launch > Options > CSS:

.x-topbar .p-info{margin-top: 10px;}

Thanks.

[eutaw]

Thank you!

[ruenel]

You are most welcome!