[dthomParticipant]

Hi I almost have my topbar logon/out button working here – https://mysalus.org. I have read and applied the following code (with nested modal) to create the button in the topbar.php file in my child theme. My only issue is that the button is directing to the logon page instead of launching the modal. The modal shortcode is from Formidable Forms. Is this possible to nest shortcodes like this? Ideas on how to make this work?

?>

<?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 if ( is_user_logged_in() ): ?>
<?php echo do_shortcode( ‘[button type=”real” shape=”rounded” size=”small” href=”‘.wp_logout_url( get_permalink() ).'” title=”Example”]Logout[/button]’); ?>

<?php else: ?>
<?php echo do_shortcode( ‘[button type=”real” shape=”rounded” size=”small” href=”‘.wp_login_url( get_permalink() ).'” title=”Example”][frmmodal type=”ihc-login-form” label=”Logon” size=”small”]Logon[/button]’); ?>

<?php endif; ?>
<?php endif; ?>
<?php x_social_global(); ?>
</div>
</div>

<?php endif; ?>

Thanks

[ThaiModerator]

Hi There,

Please find this code:

<?php echo do_shortcode( ‘[button type=”real” shape=”rounded” size=”small” href=”‘.wp_login_url( get_permalink() ).'” title=”Example”][frmmodal type=”ihc-login-form” label=”Logon” size=”small”]Logon[/button]’); ?>

And change to this:

<?php echo do_shortcode( '[frmmodal class="logon-btn" type="ihc-login-form" label="Logon" size="small"]'); ?>

After that add the following CSS under Customizer > Custom > Global CSS:

.logon-btn {
    color: #ffffff;
    border-color: rgb(49,137,42);
    background-color: rgb(49,137,42);
    margin-bottom: 0.25em;
    text-shadow: 0 0.075em 0.075em rgba(0,0,0,0.5);
    box-shadow: 0 0.25em 0 0 #2a2a2a, 0 4px 9px rgba(0,0,0,0.75);
    border-radius: 0.25em;
    padding: 0.429em 1.143em 0.643em;
    font-size: 14px;
}

Hope it helps 🙂

[dthomParticipant]

Thanks that is a lot closer! Looks good on desktop but off a bit for mobile. I played with the css adding float left and let padding but the bottom centers on mobile. I would like to have the logon button remain left and aligned with the social buttons on the right. Can you help me with the proper mods to the css above please?

Thanks! As always you guys are the best!

[dthomParticipant]

Here is a screenshot. Seems background is to left but button is centered

[Rue NelModerator]

Hello There,

Thanks for updating in! Could you please post the contents of your _topbar.php file. We need to check it first because there is some broken codes in it. We need to fix it first before we can style it correctly.

Thank you in advance.

[dthomParticipant]

here you go

<?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 if ( is_user_logged_in() ): ?>
<?php echo do_shortcode( ‘[button type=”flat” shape=”pill” size=”small” href=”‘.wp_logout_url( get_permalink() ).'” title=”Example”][icon type=”user”]Logout[/button]’); ?>

<?php else: ?>
<?php echo do_shortcode( ‘[frmmodal class=”logon-btn” type=”ihc-login-form” label=”Member Logon” size=”small” class=”ff-modal-header ff-modal-body “]’); ?>

<?php endif; ?>
<?php endif; ?>
<?php x_social_global(); ?>
</div>
</div>

<?php endif; ?>

[dthomParticipant]

OK, I have made a couple changes to transparent pill button for the logout button and have it styled screenshot attached).

Still cant’ figure out how to apply the same transparent button type to the logon shortcode however to launch the modal. I have attached a screenshot of that I am trying to achieve and have mocked up with the following button shortcode.

My topbar.php is

<?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  if ( is_user_logged_in() ): ?>
		 		<?php echo do_shortcode( '[button type="transparent" shape="pill" size="small" class="logon-btn" href="'.wp_logout_url( get_permalink() ).'" title="Example"][icon type="user"]Logout[/button]'); ?>

	 <?php else: ?>
		<?php echo do_shortcode( '[frmmodal class="logon-btn" type="ihc-login-form" label="Member Logon" size="small"]'); ?>
		
      <?php endif; ?>
      <?php endif; ?>
      <?php x_social_global(); ?>
    </div>
  </div>

<?php endif; ?>

My customizer css is

.logon-btn {
color: #1F8F1F;
border-color: #385638;
}

.logon-btn:hover {
color: #ffffff;
border-color: #600900;
background-color: #E5F6E4;
}

This is the link I have in my customizer header

<div class="p-info"><?php echo do_shortcode( get_theme_mod( 'x_topbar_content' ) ); ?></div>

My topbar logon works the way I want it to so I think the topbar.php is ok. How do I get the link in a transparent pill button?

Thanks

[Paul RModerator]

Hi,

To achieve that, kindly change your css code to this.

.x-topbar .logon-btn {
    background: transparent;
    color: #1F8F1F;
    border: 2px solid #385638;
    border-radius: 20px;
    padding: 5px 15px;
}

.x-topbar .logon-btn:hover {    
    background: #E5F6E4;
    color: #fff;
    border: 2px solid #600900;    
}

Hope that helps

[dthomParticipant]

Thant worked! Thanks so much!

[Prasant RaiModerator]

You are most welcome. 🙂

[Author]

Posts