Who is online?
In total there are 3 users online :: 0 Registered, 0 Hidden and 3 Guests None
Most users ever online was 246 on Tue 31 Jan - 2:47
Statistics
We have 150 registered usersThe newest registered user is Luxic
Our users have posted a total of 2050 messages in 200 subjects
Latest topics
» A small shareby Flora Today at 21:03
» Edit the 404 page on Forumotion
by LGforum Today at 15:29
» How to Change The Homepage?
by LGforum Today at 15:28
» Counter for my notices box
by Niko Today at 15:03
» 21. Show Recent Topics Preview In Accordion
by ReBoRN Yesterday at 19:08
12. LGforum Style Login
Page 1 of 1 • Share •
12. LGforum Style Login
by LGforum on Fri 2 Dec - 15:22
12. LGforum Style Log In
(all board types)
This tutorial will show you a mixture of CSS, HTML, jQuery and Javascript to make a simple Log in system similar to that of this board.
The design is simplistic, as that is how i like it, but feel free to spruce it up to your liking.
Start off by putting this in your CSS:
[noguest]
I know its a lot. But i have laid out it out for you to be able to edit it easily, and read through it.
Next, you need to visit your Forum Widgets.
At this point, if you use a sidebar, then put it in your sidebar. If you don't use a sidebar/widgets, then create a left sidebar, and i will provide some CSS at the end to get rid of the sidebar.
Make a new Widget, and remember to set its permissions to guests only. As only guests need to log in obviously.
And put all this HTML into it:
[noguest]
after doing that, head to Javascript management and create a new Javascript and tick in all pages.
Then put this inside it:
[noguest]
Again, i have laid this out nicely for you to read through
And now you hsould be done.
UNLESS you don't want a sidebar in which case you can add this to your CSS:
[noguest]
This tutorial was kind of written in a hurry so i apologise if something isn't clear. I will edit it soon to improve the quality of this tutorial.
(all board types)
This tutorial will show you a mixture of CSS, HTML, jQuery and Javascript to make a simple Log in system similar to that of this board.
The design is simplistic, as that is how i like it, but feel free to spruce it up to your liking.
Start off by putting this in your CSS:
[noguest]
- Code:
.dimpage {
position: fixed;
top:0px;
left: 0px;
height: 100%;
width: 100%;
background-color: #666;
opacity: 0.7;
filter:Alpha(opacity=70);
z-index: 0;
}
#LGlogin {
position: fixed;
width:50%;
left: 25%;
height: 30%;
top: 35%;
text-align: center;
border-radius:5px;
z-index: 999;
border: 2px solid #105289;
color: #105289;
background: #fff;
font-weight: bold;
font-size: 15px;
}
#LGlogin h1 {
margin-top: 0px;
margin-bottom: 7px;
background: #105289;
color: #fff;
padding: 3px;
font-size: 16px;
}
#LGloginbtn {
position: fixed;
top: 0px;
right: 5px;
border-bottom: 2px solid;
border-right: 2px solid;
border-left: 2px solid;
color: #105289;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
font-weight: bold; font-size: 14px;
padding: 5px;
background: #fff;
cursor: pointer;
}
#LGloginbtn:hover { color: red; }
img.closebutton {
float: right;
margin-right: 2px;
background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') no-repeat 0 -20px;
width:20px;
height20px;
cursor: pointer;
z-index: 999;
}
img.closebutton:hover {background: url('http://i45.servimg.com/u/f45/16/95/07/69/bt_clo10.png') 0 0px;}
I know its a lot. But i have laid out it out for you to be able to edit it easily, and read through it.
Next, you need to visit your Forum Widgets.
At this point, if you use a sidebar, then put it in your sidebar. If you don't use a sidebar/widgets, then create a left sidebar, and i will provide some CSS at the end to get rid of the sidebar.
Make a new Widget, and remember to set its permissions to guests only. As only guests need to log in obviously.
And put all this HTML into it:
[noguest]
- Code:
<div class="dimpage" style="display:none"></div><div id="LGloginbtn" onclick="LGlogin();">Click Here To Log In</div><div id="LGlogin" style="display: none"><div onclick="LGlogin();"><img src="http://illiweb.com/fa/empty.gif" class="closebutton" width="20px" height="20px" /></div><h1>Log In</h1>
<form action="/login.forum" method="post">
<label for="username">Username:</label> <input type="text" name="username" size="25" maxlength="40" /><br><label for="password">Password: </label><input type="password" name="password" size="25" maxlength="32" /><br><br>Log me on automatically each visit: <input type="checkbox" name="autologin" checked="true" /><br><br><input type="submit" class="mainoption" name="login" value="Log in" /><input name="redirect" type="hidden" value=""></form>
</div>
after doing that, head to Javascript management and create a new Javascript and tick in all pages.
Then put this inside it:
[noguest]
- Code:
function LGlogin() {
var x=document.getElementById('LGlogin');
if (x.style.display == 'none') {
$('#LGlogin').fadeIn('slow');
$('.dimpage').fadeIn('slow');
var y=$(x).find('[name="redirect"]');
y[0].value=window.location.href;
}
else {
$('#LGlogin').fadeOut('slow');
$('.dimpage').fadeOut('slow');
}
}
Again, i have laid this out nicely for you to read through
And now you hsould be done.
UNLESS you don't want a sidebar in which case you can add this to your CSS:
[noguest]
- Code:
#left { width: 0px!important; }
This tutorial was kind of written in a hurry so i apologise if something isn't clear. I will edit it soon to improve the quality of this tutorial.
Last edited by LGforum on Wed 7 Dec - 3:52; edited 1 time in total
LGforum- Forum Version: Phpbb3
Posts: 729
Join date: 2011-10-05
Location: UK 
Re: 12. LGforum Style Login
by LGforum on Fri 2 Dec - 15:24
I forgot to mention an important part of this Log In system.
It won't take the user back to the homepage, it will log them in and keep them on the same page they are on.
It won't take the user back to the homepage, it will log them in and keep them on the same page they are on.
LGforum- Forum Version: Phpbb3
Posts: 729
Join date: 2011-10-05
Location: UK -
Re: 12. LGforum Style Login
by Flora on Fri 2 Dec - 16:52
Great tutorial!! Loved reading through it. Its a nice & simple log in that is straight forward. Easily editable. Can't believe you did in a hurry, though... It sure doesn't look that way.
Now that I have it up, I'm going to go edit mine.
Catch you later on. Thank you!
Now that I have it up, I'm going to go edit mine.
Catch you later on. Thank you!
Flora
Status: If you like gardening, please join my site. Ty. :)
Forum Version: Phpbb3
Posts: 151
Join date: 2011-11-18
Location: USA-
Re: 12. LGforum Style Login
by Flora on Sat 3 Dec - 15:42
I came back to ask two questions:
One, can this log in be expanded to add other links besides the log in?
Two, how can I change the "log in automatically?" I like having things unchecked so that users have the option to check it themselves if they want it. Its a good practice to have, especially for those who may be using someone else s machine.
Thank you!
One, can this log in be expanded to add other links besides the log in?
Two, how can I change the "log in automatically?" I like having things unchecked so that users have the option to check it themselves if they want it. Its a good practice to have, especially for those who may be using someone else s machine.
Thank you!
Flora- Status: If you like gardening, please join my site. Ty. :)
Forum Version: Phpbb3
Posts: 151
Join date: 2011-11-18
Location: USA -
Re: 12. LGforum Style Login
by LGforum on Sat 3 Dec - 17:02
What links would you be referring to? Any extra links can be added in the HTML is you want.
To make it unchecked, find the bit in the HTML which says checked="true" and change true to false of course.
To make it unchecked, find the bit in the HTML which says checked="true" and change true to false of course.
LGforum- Forum Version: Phpbb3
Posts: 729
Join date: 2011-10-05
Location: UK -
Re: 12. LGforum Style Login
by Flora on Sat 3 Dec - 17:26
LGforum wrote:What links would you be referring to? Any extra links can be added in the HTML is you want.
To make it unchecked, find the bit in the HTML which says checked="true" and change true to false of course.
Just the home, register and of course log in, which is already there.
Ok. I'll go over the HTML part again. Thank you!
Flora- Status: If you like gardening, please join my site. Ty. :)
Forum Version: Phpbb3
Posts: 151
Join date: 2011-11-18
Location: USA -
Re: 12. LGforum Style Login
by tony_h on Mon 23 Jan - 9:43
Hi,
Is there any possibility of putting this widget on the right hand bar, as I have the left one hidden, if I activate the left one it messes up the screen display of my forum
Is there any possibility of putting this widget on the right hand bar, as I have the left one hidden, if I activate the left one it messes up the screen display of my forum
tony_h- Posts: 46
Join date: 2012-01-16 -
Re: 12. LGforum Style Login
by LGforum on Mon 23 Jan - 14:45
Yes of course create a right sidebar and stick it in there.
Nothing will need changing in the script.
and if you wish to hide it the CSS would be:
Nothing will need changing in the script.
and if you wish to hide it the CSS would be:
- Code:
#right { width: 0px!important; }
LGforum- Forum Version: Phpbb3
Posts: 729
Join date: 2011-10-05
Location: UK -
Re: 12. LGforum Style Login
by BlackNite on Wed 29 Feb - 10:00
Why it is not working in my forum?? I saw a log in panel but when I press it nothing happens!!!! I need help please
BlackNite- Posts: 2
Join date: 2011-12-23 -
Re: 12. LGforum Style Login
by LGforum on Wed 29 Feb - 13:58
Sounds like you haven't installed the JavaScript.
Or if you have then it sounds like you either haven't done it correctly or anther JavaScript of yours is crashing and breaking it.
Or if you have then it sounds like you either haven't done it correctly or anther JavaScript of yours is crashing and breaking it.
LGforum- Forum Version: Phpbb3
Posts: 729
Join date: 2011-10-05
Location: UK -
Re: 12. LGforum Style Login
by tpt8899 on Sat 14 Apr - 4:50
It just happened that the login din't work today. When I pressed the login button, nothing worked! untill today, it has worked. I have javascript installed, and I haven't added any new javascripts. please help!
EDIT: Nvrmind. a javascript code was breaking most of my other scripts! lol.
EDIT: Nvrmind. a javascript code was breaking most of my other scripts! lol.
tpt8899- Posts: 13
Join date: 2012-04-04 -
Page 1 of 1
Permissions in this forum:
You cannot reply to topics in this forum