Gym demo site pro header

Support
#1

Hi Guys

I installed the gym demo site but the header is not built with the pro header builder, So I have recreated it as best as I can in the pro header builder.

The problem is when I add a widget and assign it’s no longer wrapped in the cool CSS that makes it look good.

So I inspected element and found this

        <a href="#" id="x-btn-widgetbar" class="x-btn-widgetbar collapsed" data-x-toggle="collapse-b" data-x-toggleable="x-widgetbar" aria-expanded="false" aria-controls="x-widgetbar" role="button" style="outline: none;">

  <i class="x-icon-plus-circle" data-x-icon-s=""><span class="visually-hidden">Toggle the Widgetbar</span></i>
</a>

So I just added a raw html element and added the code there to get it working,

How should I get this working via the widget element please? I tried adding x-btn-widgetbar to the class attribute to the widget but it took no effect.

Now that I have the widget working for logged out users that’s great.

So I made a header for the logged-in user by adding the following script to my functions.php file
<?php
add_filter(‘cs_match_header_assignment’, ‘custom_search_header’);
function custom_search_header($match) {
if (is_user_logged_in()) {
$match = 205; // the post ID for your header
}
return $match;

Then right clicked the "edit header button and copied target address and pasted the url to the address bare to see the heders ID and changed the “$match = 205; // the post ID for your header” to suit.

Now that I am logged in I see the Other header, I added the same html to a “raw content” for the widget as I did for the Logged out user header, however the widget now appears in the pro header builder editor but it does not show in the live site.
Do I need to adjust the html used for the logged-in user header?

Hope you can help

Thanks

Ben

#2

Ok I have had some success, when inspecting the element I didn’t copy the full script when closed and expanded
So the full code is this:

    <a href="#" id="x-btn-widgetbar" class="x-btn-widgetbar collapsed" data-x-toggle="collapse-b" data-x-toggleable="x-widgetbar" aria-expanded="false" aria-controls="x-widgetbar" role="button" style="outline: none;">
  <i class="x-icon-plus-circle" data-x-icon-s=""><span class="visually-hidden">Toggle the Widgetbar</span></i>



<div i="gform_login_widget-3" class="widget gform_login_widget"><h4 class="h-widget">Login</h4><div class="gf_browser_gecko gform_wrapper gf_login_form" id="gform_wrapper_0"><form method="post" id="gform_0"><input type="hidden" name="login_redirect" value="https://wordpressmu-110049-1087249.cloudwaysapps.com/"><div class="gform_body"><ul id="gform_fields_login" class="gform_fields top_label"><li id="field_1" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_1">Username</label><div class="ginput_container ginput_container_text"><input name="input_1" id="input_1" type="text" value="" class="" tabindex="1" aria-required="true" aria-invalid="false"></div></li><li id="field_2" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_2">Password</label><div class="ginput_container ginput_container_text"><input name="input_2" id="input_2" type="password" value="" class="" tabindex="2" aria-required="true" aria-invalid="false"></div></li><li id="field_3" class="gfield field_sublabel_below field_description_below hidden_label gfield_visibility_visible"><label class="gfield_label"></label><div class="ginput_container ginput_container_checkbox"><ul class="gfield_checkbox" id="input_3"><li class="gchoice_3_1">
							<input name="input_3.1" type="checkbox" value="1" id="choice_3_1" tabindex="3">
							<label for="choice_3_1" id="label_3_1">Remember Me</label>
						</li></ul></div></li></ul>
    <div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_0" class="gform_button button" value="Login" tabindex="4" onclick="if(window[&quot;gf_submitting_0&quot;]){return false;}  if( !jQuery(&quot;#gform_0&quot;)[0].checkValidity || jQuery(&quot;#gform_0&quot;)[0].checkValidity()){window[&quot;gf_submitting_0&quot;]=true;}  " onkeypress="if( event.keyCode == 13 ){ if(window[&quot;gf_submitting_0&quot;]){return false;} if( !jQuery(&quot;#gform_0&quot;)[0].checkValidity || jQuery(&quot;#gform_0&quot;)[0].checkValidity()){window[&quot;gf_submitting_0&quot;]=true;}  jQuery(&quot;#gform_0&quot;).trigger(&quot;submit&quot;,[true]); }"> 
        <input type="hidden" class="gform_hidden" name="is_submit_0" value="1">
        <input type="hidden" class="gform_hidden" name="gform_submit" value="0">
        
        <input type="hidden" class="gform_hidden" name="gform_unique_id" value="5e171259a8a4d">
        <input type="hidden" class="gform_hidden" name="state_0" value="WyJbXSIsImM4MjAwOTlmMjJjMjEzOGQ3ZjY3NDMxM2M2OTAxNWRiIl0=">
        <input type="hidden" class="gform_hidden" name="gform_target_page_number_0" id="gform_target_page_number_0" value="0">
        <input type="hidden" class="gform_hidden" name="gform_source_page_number_0" id="gform_source_page_number_0" value="1">
        <input type="hidden" name="gform_field_values" value="">
        
    </div></div></form></div><nav class="gf_login_links"><a href="https://wordpressmu-110049-1087249.cloudwaysapps.com/wp-login.php?action=register" title="Register">Register</a><br><a href="https://wordpressmu-110049-1087249.cloudwaysapps.com/index.php/my-account/lost-password/" title="Forgot Password?">Forgot Password?</a><br></nav></div>   </a>
	<div id="x-widgetbar" class="x-widgetbar" data-x-toggleable="x-widgetbar" data-x-toggle-collapse="1" aria-hidden="false" aria-labelledby="x-btn-widgetbar" style="">
  <div class="x-widgetbar-inner">
    <div class="x-container max width">

      <div class="x-column x-md x-1-1 last"><div id="gform_login_widget-2" class="widget gform_login_widget"><h4 class="h-widget">Login</h4><div class="gf_browser_chrome gform_wrapper gf_login_form" id="gform_wrapper_0"><form method="post" id="gform_0"><input type="hidden" name="login_redirect" value="https://wordpressmu-110049-1087249.cloudwaysapps.com/"><div class="gform_body"><ul id="gform_fields_login" class="gform_fields top_label"><li id="field_1" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_1">Username</label><div class="ginput_container ginput_container_text"><input name="input_1" id="input_1" type="text" value="" class="" tabindex="1" aria-required="true" aria-invalid="false" style="outline: none;"></div></li><li id="field_2" class="gfield gfield_contains_required field_sublabel_below field_description_below gfield_visibility_visible"><label class="gfield_label" for="input_2">Password</label><div class="ginput_container ginput_container_text"><input name="input_2" id="input_2" type="password" value="" class="" tabindex="2" aria-required="true" aria-invalid="false" style="outline: none;"></div></li><li id="field_3" class="gfield field_sublabel_below field_description_below hidden_label gfield_visibility_visible"><label class="gfield_label"></label><div class="ginput_container ginput_container_checkbox"><ul class="gfield_checkbox" id="input_3"><li class="gchoice_3_1">
							<input name="input_3.1" type="checkbox" value="1" id="choice_3_1" tabindex="3">
							<label for="choice_3_1" id="label_3_1">Remember Me</label>
						</li></ul></div></li></ul>
    <div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_0" class="gform_button button" value="Login" tabindex="4" onclick="if(window[&quot;gf_submitting_0&quot;]){return false;}  if( !jQuery(&quot;#gform_0&quot;)[0].checkValidity || jQuery(&quot;#gform_0&quot;)[0].checkValidity()){window[&quot;gf_submitting_0&quot;]=true;}  " onkeypress="if( event.keyCode == 13 ){ if(window[&quot;gf_submitting_0&quot;]){return false;} if( !jQuery(&quot;#gform_0&quot;)[0].checkValidity || jQuery(&quot;#gform_0&quot;)[0].checkValidity()){window[&quot;gf_submitting_0&quot;]=true;}  jQuery(&quot;#gform_0&quot;).trigger(&quot;submit&quot;,[true]); }"> 
        <input type="hidden" class="gform_hidden" name="is_submit_0" value="1">
        <input type="hidden" class="gform_hidden" name="gform_submit" value="0">
        
        <input type="hidden" class="gform_hidden" name="gform_unique_id" value="5e17152f5e46c">
        <input type="hidden" class="gform_hidden" name="state_0" value="WyJbXSIsImM4MjAwOTlmMjJjMjEzOGQ3ZjY3NDMxM2M2OTAxNWRiIl0=">
        <input type="hidden" class="gform_hidden" name="gform_target_page_number_0" id="gform_target_page_number_0" value="0">
        <input type="hidden" class="gform_hidden" name="gform_source_page_number_0" id="gform_source_page_number_0" value="1">
        <input type="hidden" name="gform_field_values" value="">
        
    </div></div></form></div><nav class="gf_login_links"><a href="https://wordpressmu-110049-1087249.cloudwaysapps.com/wp-login.php?action=register" title="Register">Register</a><br><a href="https://wordpressmu-110049-1087249.cloudwaysapps.com/index.php/my-account/lost-password/" title="Forgot Password?">Forgot Password?</a><br></nav></div></div>
    </div>
  </div>
</div>

So now I have it expanded with the loggin form in, However, is there a way to get it to stay expanded once if the login fails? Other wise you have to click the widget button to see your failed attempt.

It would be great if we could get this tidyd up and on the design cloud for all to use ready made!

Thanks for your time

Ben

#3

Hello Ben,

Please be advised that the Widgetbar is part of the default header. Once you create a custom header, the widgetbar will no longer displays. You will have to recreate it by adding something in your bar like the content area dropdown or content area collapse element. You can then use a custom login form shortcode (you might need 3rd party for this) and place it inside the content area dropdown or content area collapse. This is the best way to do it because what you are doing now is complicated and will become more complicated later on.

You have to understand that what you are trying to do is outside the scope of our support as this is not related to an issue with the theme and instead has to do with your customization of it. As such, you will need to investigate this particular issue on your own or seek help from a developer should you not feel comfortable making these changes yourself.

If you have any further questions about the theme, we are more than happy to provide you with assistance on these inquiries.

#4

That was just what I needed! Thank you, for anyone reading this later on, I did exactly what RueNel said.

I used the content area off canvas, I’m using gravity forms user registration add on and I filled the content area with the short code.

[gravityform action=“login” description=“false” logged_in_message=“Yay! You are logged in!” registration_link_text=“Register for my super awesome site” forgot_password_text=“Stop forgetting your password” /]

Thanks for your help!

All the best

Ben

#5

Hi I still have a problem though

I can embed any form in the off canvas area and it will work fine, except the user login form, if you enter the details incorrectly the area retracts and you cannot see the error.

I’ve asked the gravity forms support team and they said that they cannot help, do you guys know why its not happening? If I remember correctly it will work with the demo site with tier widget in the widget aarea, it’s a bit frustrating that I cant recreate the demo with pro header builder so that I can add in some extras.

Bellow is what I said to them last

Hi

So I have found that if I add any of my forms to the “off canvas area” and press submit the the off canvas area remains open as it should for you to see the error as shown here https://wordpressmu-110049-1087249.cloudwaysapps.com/index.php/unlicenced-warrior/
If you view any other area of the site to use the registration form and make it fail to submit, the off canvas area will disappear you can see this here https://wordpressmu-110049-1087249.cloudwaysapps.com/

#6

Hello Ben,

Please go to X > Global Blocks and create a global block. In the global block, insert a section, row, column, a text element and insert your user login shortcode. Save your changes and then take note of the Global Block shortcode. This is the shortcode that you will use in your content area off canvas element.

To know more about the Global Block, please check this out:

#7

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