Why do login forms look different on different pages?

This topic contains 11 replies, has 4 voices, and was last updated by  Backpacking Series 6 years, 2 months ago.

We have moved to a support ticketing system and our forums are now closed.

Open Support Ticket
  • Author
    Posts
  • January 28, 2018 at 5:23 pm #1442

    Backpacking Series
    Buyer
    Post count: 104

    Hello,

    I truly value your time and guidance. So, I do try to troubleshoot before posting a query here.

    Tonight, I am trying to figure out why a login form should look different on two different pages. For instance, on Review the Book page, it appears broken – stretched and out of shape. Whereas on the main login page, it appears in its proper (desired) form.

    This problem first appeared in a popup. I accepted it assuming may be that is how the popup maker wraps all its content. However, since my last query about redirect, where I was told that login redirect will not work with popups, I have deleted the related popup post.

    I have since inserted [uwp_login] in different pages. However, the login form hasn’t regained its original (desired) look. To troubleshoot, I have cleared all caches, tried different browsers, tried incognito mode, and created a new page to test – all without success. I have also verified the CSS. The UWP-related styling is limited to what is – recommended in this thread.

    Perhaps it is something simpler than I can imagine. Can someone please compare the two pages and help me with suggestions?

    1. Broken: Review the Book page
    2. Desired: login page

    Kind regards,

    January 28, 2018 at 11:31 pm #1444

    Guust
    Moderator
    Post count: 29970

    That is because the Ultimate Shortcodes plugin is applying different styling to the different pages.

    You can try to fix the CSS yourself based on this:
    https://wpgeodirectory.com/docs/customizing-your-style/

    Or remove the Ultimate Shortcodes you put around the UsersWP shortcode, or seek support from the Ultimate Shortcodes plugin developers.

    Thanks

    January 29, 2018 at 7:58 am #1445

    Backpacking Series
    Buyer
    Post count: 104

    Thank you for your response.

    I should have mentioned in my previous post but forgot to – I did suspect a plugin conflict and tried the following: 1) deactivated Shortcodes Ultimate plugin and 2) created a new page for [uwp_login] without the shortcodes ultimate wrapper. No joy yet.

    Test URL without Shortcodes Ultimate:
    https://www.backpackingseries.com/login/test-uwp-login-without-shortcodes-ultimate/

    Kind regards

    January 29, 2018 at 9:10 am #1446

    Guust
    Moderator
    Post count: 29970

    I had a closer look, and the reason is that
    https://www.backpackingseries.com/login/test-uwp-login-without-shortcodes-ultimate/
    is not a page nominated at UsersWP > General Options
    but the page is a page nominated there.

    What that does, is that UsersWP will assign additional CSS.
    So to make both look the same, you will to apply the relevant CSS from
    https://www.backpackingseries.com/wp-content/plugins/userswp/public/assets/css/users-wp.css
    or you need to add this to the header of all pages:

    <link rel='stylesheet' id='userswp-css' href='https://www.backpackingseries.com/wp-content/plugins/userswp/public/assets/css/users-wp.css' type='text/css' media='all' />

    Thanks

    January 29, 2018 at 11:40 am #1447

    Backpacking Series
    Buyer
    Post count: 104

    Thank you for your response and direction to troubleshoot.

    What that means is that the UsersWP shortcodes work only on nominated pages under Settings -> General. Hope I got it right. If so, it is counter-intuitive to how shortcodes usually work in WordPress.

    About the suggested solutions, I should admit that I am neither comfortable modifying the header for all pages (not preferred) nor fully understand the ‘relevant CSS’ (preferred interim approach) to be applied to each page where I intend to insert 

    [uwp_login]

    . Hence, for now, I will remove the shortcodes from all pages except the ones nominated.

    Kind regards,

    PS: Is this something that a next product version might deal with?

    January 29, 2018 at 12:35 pm #1449

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    Yes this will be resolved in the next release.

    Thanks,

    Stiofan

    January 29, 2018 at 12:41 pm #1450

    Backpacking Series
    Buyer
    Post count: 104

    Thank you Stiofan!

    Kind regards,

    Abhijeet

    February 10, 2018 at 11:45 am #1526

    Backpacking Series
    Buyer
    Post count: 104

    Hello,

    Thank you for the updates to the UsersWP plugin, delivered last week.

    I just wanted to follow up whether this issue has been fixed in the new release – since I continue to see slightly distorted forms? Please see test URL below.

    https://www.backpackingseries.com/login/test-uwp-login-without-shortcodes-ultimate/

    Thank you

    February 10, 2018 at 4:27 pm #1532

    Stiofan O’Connor
    Site Admin
    Post count: 22956

    Hello,

    There is some css in your theme that seems to be messing things up, is this part of the theme or added by you? if i remove it then it looks normal:

    

    *, *:before, *:after {
    box-sizing: inherit;
}
    

    Stiofan
    

		
	
    


    

			
				

    

	
    

		February 11, 2018 at 7:27 am

		
		#1538

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Hi Stiofan,
    

    Thank you for the suggestion. 
    

    That CSS is coming from the Theme (Gazette) style sheet. I assume (please correct me otherwise), it should impact all instances of [uwp_login] forms. The main login page of the site looks good. But the test page, not nominated under UsersWP – settings, distorts the form.
    

    Kind regards,
    

    Abhijeet
    

		
	
    


    

			
				

    

	
    

		February 12, 2018 at 12:03 pm

		
		#1565

		
		
		
	
    


    


    

	
    

		
		
    Patrik
    Moderator
    
		
		
     Post count: 1971
    
	
    

	
    

		
		
    Hi Abhijeet,
    

    We have already removed conditions to apply CSS and JS for UWP pages only so that all forms not on UWP pages will display properly. We have “uwp_page” class in body for all UWP pages to prevent conflicts for CSS and JS which is missing in non UWP pages. So if you want to use the same shortcode on other pages then you can add the class in the body by putting following code in your functions.php file of the current theme.
    

    

    add_filter( 'body_class', 'uwp_add_body_class_for_shortode', 10, 1 );
function uwp_add_body_class_for_shortode( $classes ) {

    global $post;

    if ( isset($post->post_content) && has_shortcode( $post->post_content, 'uwp_login' )) {
        $classes[] = 'uwp_page';
    }

    return $classes;
}
    

    You can modify this function for other shortcodes also if you want to use them on non UWP pages.
    

    Regards,
    
Patrik
    

		
	
    


    

			
				

    

	
    

		February 12, 2018 at 12:42 pm

		
		#1572

		
		
		
	
    


    


    

	
    

		
		
    Backpacking Series
    Buyer
    
		
		
     Post count: 104
    
	
    

	
    

		
		
    Thank you Patrik, 
    

    The code works as promised!
    

    I look forward to the next release of UsersWP.
    

    Kind regards
    

    Abhijeet
    

		
	
    


    

			
		
	
    • 

	
  • 

		
    Author
    

		
    

			
				Posts
			
		
    

	
    • 





			



	


		Viewing 12 posts - 1 through 12 (of 12 total)
	


	


		
	





		
				

			

				

					
We have moved to a support ticketing system and our forums are now closed.

					Open Support Ticket