Totally changing login page

rameleu · January 04, 2015, 04:37:39 PM

Hello everyone,

I've been searching on the web without any answer, so I came here to ask you, is there a way to totally change my login page ? I mean, I'd like to use this one : http://www.24psd.com/minimal-flat-css-login-form/ or something like that, but I don't know at all what I should change to make it my default login page, and when I hit connect, to redirect me to my main forum page.

Thank's a lot in advance

Rameleu

Antechinus · January 04, 2015, 04:52:52 PM

You'd need to write your own CSS to get that working. Which means you'd need to be reasonably competent at writing your own CSS. You'd also need a couple of PHP tweaks I suspect. How good are you at coding?

rameleu · January 04, 2015, 04:56:22 PM

Well I've already got my login page (you can check the censored link in the 1st message) so I've got the css.

I'm okay at coding, but I'm not pro

I've seen things about the SSI.php, something would help me there, you got any idea ?

Antechinus · January 04, 2015, 05:35:46 PM

Oh ok. I thought you were the sort we often get here (ie: Found a PSD online and wanted to know how to turn it into code).

You could do it with a bit of template tweaking. I'm not much on the back end stuff but templates are easy.

If you add this to the head section of your index.template.php you'll get an id assigned to the body tag via action (action=login, in this case).

Code Select

	// Allow setting body tag classes by action.
	$body_class = array();
	if (!empty($context['current_action']))
		$body_class[] = 'action_'. $context['current_action'];
	if (!empty($context['current_subaction']))
		$body_class[] = 'subaction_'. $context['current_subaction'];
	if (!empty($context['current_board']))
		$body_class[] = 'board_'. $context['current_board'];
	if (empty($body_class))
		$body_class[] = 'action_index';

	echo '
</head>
<body id="', implode(' ',$body_class), '">';

Then you can just use CSS to ditch default styles on all the stuff you don't want, and display: none the menu if you like, etc. Style the whole page up however you want it.

Code Select

#login {background: whatever;} #login #main_menu {display: none;} etc etc

rameleu · January 04, 2015, 05:38:03 PM

Thank's for your answer, I'm going to try working on this tomorrow

Kindred · January 04, 2015, 10:09:10 PM

Wait... from your previosu posts, I believe that you are trying to replace the current login page in SMF with your own.

Your discussions with Antechinus will not do that.
Doing that is actually rather complicated.

Using SSI will allow you to set up your own external login page -- but will not replace the login page inside the forum (e.g. if they click login)

Antechinus · January 04, 2015, 11:51:17 PM

Why not just direct all guests to action=login, then style that page?

Kindred · January 05, 2015, 12:09:10 AM

Yup... That would be my suggestion too... But the op was talking about already having an external page

rameleu · January 05, 2015, 10:22:28 AM

Well what I was talking about was just "delete" the original login page. I'd like to make another one (outside SMF) which will redirect the user who is trying to access my forum without being logged. What should I know before doing that ? Thank's for your answers

Kindred · January 05, 2015, 12:19:28 PM

no. bad idea. very very bad idea.
There are bits that connect to that page scattered throughout the code - it's not just a matter of replacing the login page... especially since the file that handles login also handles logout and a few other things.

Why not just restyle the existing login page?

Antechinus · January 05, 2015, 12:36:23 PM

What I was thinking is that you could (I think) set up a basic redirect for guests to take them straight to action=login. If you can do that, you can easily style that page as if it was an external page. This is going to require a mod to set up the redirect though.

You can't just rely on unchecking the standard admin setting of "Allow guests to browse the forum", because although that presents them with a login form instead of the list of categories, the action is still just index.php, not action=login. It'd be best to have the redirect, IMO.

IF for some reason a redirect is not possible, there could be a workaround. You could add a conditional to check for guest/logged status in the top of index.template.php, and use that to add a body id, or even to load an extra stylesheet. That could then re-style your basic index.php url to look like an external page for guests, and as soon as someone logs in they'd be back to the normal forum view.

rameleu · January 05, 2015, 01:31:29 PM

Quote from: Kindred on January 05, 2015, 12:19:28 PM
no. bad idea. very very bad idea.
There are bits that connect to that page scattered throughout the code - it's not just a matter of replacing the login page... especially since the file that handles login also handles logout and a few other things.

Why not just restyle the existing login page?

Well is that possible to ENTIRELY restyle my existing login page ? The only problem is that I'm not familiar with CSS at all (I can just play around with things), and so I don't know if I'll be able to rebuild the exact same page as mentionned in my 1st message.

If it's possible, I will need to use "if($context['user']['is_logged'])" at the beginning of my index.template.php, but what about the CSS ? How will I be able to link this ? And will I need to keep the original SMF login method, or would I be able to use the mentionned one ? I'm really lost with that

Antechinus · January 05, 2015, 01:41:41 PM

Yes, it's possible to entirely re-style your existing login page. It's not even all that difficult. Basically you would use display: none; on elements you didn't want, if they were not parents of elements you did want. For instance, if you use the admin setting to stop guests browsing the forum, you'll be relying on the login form in the middle of the page. That means the entire theme header and footer can be ditched with one simple declaration. Assuming your conditional body ID for guests is id="flying_wombats" you would use:

Code Select

#flying_wombats #header, #flying_wombats #footer {display: none;}

Then for #content_section and some of the others you'd just set background: none; with the result that you'd have a lonely little login form sitting in the middle of an empty page. Set the body background to what you want, then style up the login form. All done. Go have beer.

This is assuming you keep the original SMF login method, which really would be easiest (and it works).

Antechinus · January 05, 2015, 01:50:18 PM

Hey hang on. I just thought of something even easier. You can really cheat on this.

You still need the same body id for guests, but you don't even need overrides for most of the theme CSS. You can leave it all alone. The only bit you need to frig around with is the actual login form.

What you could do is set that form to position: fixed; with a hefty z-index. This will haul it out of the normal markup flow and set it way above the rest of the forum. Then set the width and height of the form to 100%, and the left, right, top and bottom to 0. Your login form's background will now cover the entire page. Make the form's background whatever colour you like, then use auto margins and a little bit of other stuff to finish the styling for the form's innards.

Then go have beer.

ETA: If I get time tonight I'll play with the basics and set up proof of concept CSS for you.

Antechinus · January 05, 2015, 02:31:47 PM

On second thought, the basics are so easy you can have them now. Start by unchecking that admin setting for guest browsing. Then:

Index.template.php:

Code (Find (line 166 of default file)) Select

<body>';
}

Code (Replace) Select

<body ', (!$context['user']['is_logged']) ? 'id="flying_wombats"' : '', '>';
}

index.css

Code (Add to end of file) Select

/* Proof of concept for custom login page. */
#flying_wombats #frmLogin {position: fixed; z-index: 99; top: 0; bottom: 0; left: 0; right: 0; background: #000;}
#flying_wombats #frmLogin .cat_bar:first-child {margin-top: 20%;}

That gives you the basics. The rest is just eye candy. Go for it.

ETA: Come to think of it, when doing it this way it'd be best to set up a custom skipnav link as well, in case anyone is using keyboard access for links, etc on your site. Without that they'd have to tab through all the links that are above the login form in the actual markup, which would be confusing and a PITA. The skipnav is easy to arrange. You sort your eye candy, then I'll tell you how to do the skipnav.

Antechinus · January 05, 2015, 03:11:51 PM

Because that will automatically show the login form, which is what you want. You don't want the seeing them boards if they're not logged in, right?

rameleu · January 05, 2015, 03:12:40 PM

Damn I've read the wrong thing, I thought you want me to CHECK it

rameleu · January 05, 2015, 03:32:17 PM

Nothing is changing with your code, I don't know why I can't get it working

Antechinus · January 05, 2015, 03:33:19 PM

Are you logged in on that browser?

rameleu · January 05, 2015, 03:37:11 PM

No I'm not, by the way I'm changing the CSS with Chrome, is that the reason ? Because I don't want to purge my cloudflare cache everytime, but if it's needed..

Antechinus · January 05, 2015, 04:03:32 PM

Set up a local host test site. Much easier for testing stuff quickly.

Are you on Windows or Mac?

rameleu · January 05, 2015, 04:12:51 PM

I'm on Windows, going to download Easy-PHP right now

Kindred · January 05, 2015, 04:15:29 PM

meh... cloudflare is a complete waste anyway...

rameleu · January 05, 2015, 04:27:49 PM

Well it can only help

rameleu · January 05, 2015, 04:32:37 PM

Quote from: Antechinus on January 05, 2015, 04:03:32 PM
Set up a local host test site. Much easier for testing stuff quickly. Are you on Windows or Mac?

I think I know the problem of why it doesnt do anything : I've got my own theme, because in local with the default theme, it works like a charm..

Antechinus · January 05, 2015, 04:35:58 PM

Well there you go then. Now you just have to adapt it slightly.

rameleu · January 05, 2015, 04:37:15 PM

Well thank's a lot for your help man and for spending your time for me ! Hope it'll be usefull for others

Kindred · January 05, 2015, 04:40:48 PM

cloudflare doesn't help anything, with regards to the forum -- and has been known to cause issues.

Antechinus · January 05, 2015, 04:44:33 PM

No worries. Hey just thinking about it: it would probably still best to display: none; on #header and on .navigate_section (which is the forum's linktree/breadcrumbs). This is for the keyboard access thing. Hiding those two elements should get rid of all links and inputs in the markup before your login form, which is an easier and safer move than frigging around with skipnavs or tabindex shenanigans.

Short version is: if something is rendered in the markup before your login form, and that something contains links or input boxes, use display: none; on it.

rameleu · January 05, 2015, 05:03:17 PM

Okay I'll think about that, thank's again for all your advices and for your help, I really appreciate !

News:

Totally changing login page