The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

How to add popup login

5 posters

Go down

In progress How to add popup login

Post by luiz187 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
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™ 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');
        });
    });
 
});
Sir Chivas™
Sir Chivas™
Helper
Helper

Male Posts : 6965
Reputation : 457
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 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.
avatar
runawayhorses
Hyperactive

Male Posts : 2537
Reputation : 166
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 August 30th 2013, 3:22 pm

Hey!
I'm the administrator of DailySupport.. I use LG Login. Please visit:
Link Removed
Legolas
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 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.


How to add popup login Slgray10

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

Male Posts : 51463
Reputation : 3519
Language : English
Location : United States

https://forumsclub.com/gc/128-link-directory/

Back to top Go down

In progress Re: How to add popup login

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

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

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

http://everyonesblog.net

Back to top Go down

Back to top


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