The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

How to add popup login

View previous topic View next topic Go down

In progress How to add popup login

Post by luiz187 on August 18th 2013, 7:22 am

How do i add a pop-up login like this forum http://dailysupport.quickbb.com/ ? (Not my forum)
My forum is phpbb 3.

luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

In progress Re: How to add popup login

Post by Sir Chivas™ on August 18th 2013, 8:35 am

Well, since you can't edit the templates, I don't really think this would really look good in your forum version. However, this are the following codes:

HTML: This can be placed inside a widget:
Code:
<a href="#" class="activator" id="activator">Login</a>
Code:
<div class="overlay" id="overlay" style="display:none;"></div><div class="box" id="box">
<a class="boxclose" id="boxclose">x</a>
<p>
<div id="loginBox">
<form action="/login.forum" method="post" name="login">

<label for="username">Username:</label>
<input type="text" name="username" size="25" maxlength="40">

<br><br>
 
<label for="password">Password:</label>
<input type="password" name="password" size="25" maxlength="32">

<br><br>

<label for="autologin">Log me on automatically each visit:</label>
 <input type="checkbox" name="autologin" checked="true">

<br>

<input type="submit" class="mainoption" name="login" value="Log in">

<input name="redirect" value="/" type="hidden">

</form>
</div>


 </p>
</div>
CSS:
Code:
.overlay{
    background:transparent url(http://i15.servimg.com/u/f15/17/59/75/01/overla10.png) repeat top left;
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;
    right:0px;
    z-index:100;
}


.box {
    position:fixed;
    padding: 30px 40px 34px; 
    top:-200px;
    left:30%;
    right:30%;

    background: #F9F9F9 url(http://i15.servimg.com/u/f15/17/59/75/01/modal-10.png) no-repeat -200px -80px;

    outline: 1px solid #E1E1E1;
    border: 1px solid #ffffff;
 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -ms-box-shadow: 0 0 10px rgba(0,0,0,.4);
    -o-box-shadow: 0 0 10px rgba(0,0,0,.4);
    box-shadow: 0 0 10px rgba(0,0,0,.4); 
 
    z-index:101;
}


a.boxclose{
    top: 8px;
    right: 11px;
    line-height: .5;
    position: absolute;

    color: #AAA; 
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
 
   
    -webkit-text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    -moz-text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    -ms-text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    -o-text-shadow: 0 -1px 1px rbga(0,0,0,.6);
    text-shadow: 0 -1px 1px rbga(0,0,0,.6);
}




#loginBox {
    width: 300px; 
 
    text-align: center;
    font-size: 10px; 
}
JavaScript:
Code:
$(function() {
    $('#activator').click(function(){
        $('#overlay').fadeIn('fast',function(){
            $('#box').animate({'top':'160px'},500);
        });
    });
    $('#boxclose').click(function(){
        $('#box').animate({'top':'-200px'},500,function(){
            $('#overlay').fadeOut('fast');
        });
    });
 
});



Attention!
- Please provide your forum URL at all times.
- When the issue is solved, please mark it as solved.



Sir Chivas™
Support Moderator
Support Moderator

Male Posts : 6783
Reputation : 430
Language : EN, FR, ES
Location : || CSS || HTML || Graphics Designs || Support ||

Back to top Go down

In progress Re: How to add popup login

Post by runawayhorses on August 19th 2013, 2:24 pm

@luiz187 wrote:How do i add a pop-up login like this forum http://dailysupport.quickbb.com/ ? (Not my forum)
My forum is phpbb 3.
I didn't see the popup because I have popup blocker enabled. Consider that a lot of people use them and won't be able to see it.

runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 162
Language : English
Location : United States

http://runawayhorses.alldiscussion.net/

Back to top Go down

In progress Re: How to add popup login

Post by Legolas on August 30th 2013, 3:22 pm

Hey!
I'm the administrator of DailySupport.. I use LG Login. Please visit:
Link Removed

Legolas
Forumember

Male Posts : 262
Reputation : 33
Language : English

http://www.daily-support.org

Back to top Go down

In progress Re: How to add popup login

Post by SLGray on August 30th 2013, 6:30 pm

@Legolas wrote:Hey!
I'm the administrator of DailySupport.. I use LG Login. Please visit:
Link Removed
Posting just a link is considering advertising. Please if you are referring to a tutorial on another forum, just post the link to the tutorial. Also do not post links to tutorials where you have to register to see the tutorials.


When your topic has been solved, ensure you mark the topic solved.
Never post your email in public.


SLGray
Administrator
Administrator

Male Posts : 36641
Reputation : 2441
Language : English
Location : United States

http://ztwds.forumotion.com/

Back to top Go down

In progress Re: How to add popup login

Post by luiz187 on September 10th 2013, 4:56 am

it didnt work see everyonesblog.net to see what happened (my forum)

luiz187
Forumember

Male Posts : 183
Reputation : 3
Language : English and Portuguese and some Spanish
Location : ISS

http://everyonesblog.net

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum