Incorporate Userpro plugin into Login/Sign in Topbar

Hello everyone,

I’m new to Newspaper6 but so far I really can’t complain, it looks great!

I Would although like to incorporate my premium plugin called UserPro into the login/Sign in the topbar. Is this possible? And if so, as anyone tried it before and perhaps could point me in the right direction?

Many Thanks
FP

Hi Marius,

Thank you very much for your reply. I was able to add the userpro login box into your topbar sign/in by adding the following code on line 77 of the top-menu.php

<div class=”td-login-info-text”>‘ . __td(‘Forgot your password?’) . ‘</div>’ . do_shortcode(‘[userpro template=login]’) . ‘</div>

This brings up my login box when i click login but the issue i have now is that the Newspaper default login box still shows as well, so i end up with two login boxes. I only really wanted to click on your signin botton on the topbar and for only my userpro login box to show up.

Thank you so much Marius, you’re an absolute star 🙂

Im getting this http://www.screencast.com/t/8lVpn25XBHs

Marius here is my top-menu.php http://www.screencast.com/t/PStLkOiZZF does that look right? I also copy and pasted the custom CSS from your post and this is whats popping up http://www.screencast.com/t/8lVpn25XBHs. Thank you

Thanks that definitely worked. After I got that working I wanted to try to get the UserPro login to come up instead of being displayed inside of the td-login-wrap to make it a little cleaner. I found what might be an even easier solution. I replaced THIS css class in top-menu.php to THIS. Try it and see if it works on your end, it seems to be working for me. You can test it on my site Mainly Viral. Let me know what you think. Thanks again for the fast help!

Hello, I want to do the same thing with UPME (user profiles made easy) plugin.

1.
I managed so far to do this: http://prntscr.com/8681ir
using this example http://screencast.com/t/5rnWGav3
So you can see there that i have put more width to it. But the form is going too much to the right, and I can’t fix it to be centered, what did I missed? Please help.

2. Also if this don’t work for me, (for now are 50-50 chances), can you please also show me where can I add link to SignIn/Join so it do not opet login but instead take you to some other page, like http://domain.com/login.

Thank you

I forgot to ask one important thing. On my mobile phone, I can’t find nowhere this ‘Sign In/Join button.
Should I enable it somewhere or is it somehow missedout?

That was something I didn’t like, so I put a conditional menu tab in my main menu bar. If a user is logged out it shows login or register links, once logged in it shows the edit profile and such, as well as a toggle icon that shows that your logged in. Check it out, if you are interested in knowing how I did it I can point you in the right direction. Heres my site http://www.mainlyviral.com/

Hi.
Awesome jynx2298, this could really save my time if you could share your solution with me on this one. Looks really great.
Thanks Alin for custom css.

No problem. Here are a few steps to get it working.
1. Install and activate this plugin Show/Hide Menu If you want to use icons in your menus, install and activate Font Awesome

2. Go to appearance>menus. click screen options at the top and make sure to tick the css classes box. Now create 2 menus with the same name like THIS. One is going to be your logged in tab, the other when logged out. Once you have those 2 menu items added to your menu, click the options arrow on the menu item, and where it says css classes, put “forguest” in your logged out tab, and “formember” on your logged in tab.

3. Add submenus as you want, make sure you put your login and register submenu items under the menu marked as forguest. Here is what my logged in and logged out looks like in the dashboard PIC

4. If you want to use a icons in your menu, add a second css class to the menu. put a space after “formember” or “forguest” and add the css class for the icon you want to use, the font awesome plugin has to be installed to use them. HERE is the full list of icons and their css classes that you can use.

If I missed anything let me know

Thanks for instructions. But I need the part how you set up login popup for upme, having width and height like you have now, since I cant seems to find a way to center mine.
btw I tried to register on your site, but when I try to put the username, I cant click in the field. Like it is not working.
Regards

Wow thanks for pointing that out!! Fixed it. I’m using userpro so I’m not exactly sure how to adjust the popup with UPME. With userpro the popup works out of the box like you see it on my site, no adjustments were needed. Try contacting the support for that plugin they can probably help you the best.

@Marius

Hi,

Just edit the code like here: http://screencast.com/t/5rnWGav3 and use this CSS to adjust the look, add it in Theme Panel -> Custom CSS section

.td-login-wrap {
padding: 21px 21px 17px;
}
#login-form .mfp-close {
display: none;
}

result: http://screencast.com/t/FGr1ZSsZ

I have edited top-menu.php like your pic. But the Newspaper default login box still shows.
My site: dautu365.com
Please help me!

• This reply was modified 10 years by gagosg.
• This reply was modified 10 years by gagosg.
• This reply was modified 10 years by gagosg.

Open your top-menu.php in an editor and look around line 25 for this

http://www.screencast.com/t/kGjFtDOts3uz

change the highlighted part to this

http://www.screencast.com/t/jYagN6Gy2

• This reply was modified 10 years by jynx2298.
• This reply was modified 10 years by jynx2298.
• This reply was modified 10 years by jynx2298.
• This reply was modified 10 years by jynx2298.

Thanks. It’s working
But can you round/transparent/draw borders or change color of the rest of newspaper login box ?
//Sr for my English.

http://www.screencast.com/t/K5xFVvpjaABN

• This reply was modified 10 years by gagosg.

Thanks,
I haved done it. I have only created a HTML link with URL=# and CSS class=popup-login.