Create A Custom Farcry Login Page

This is post number three for today in a series I like to call “Farcry is AWESOME!” I previously explained how to set up Branch Specific Permissions in the site tree. You can view that post at http://jake.cfwebtools.com/index.cfm/2007/4/20/Site-Tree-Branch-Specific-Permission. Then I discussed setting up a members only section of a site so a user has to log in to view certain content. You can view that post at http://jake.cfwebtools.com/index.cfm/2007/4/20/Farcry-Members-Only-Section. There’s one more thing I want to discuss really fast and that’s the login page.

Specifically, when setting up a members only section, it is not very nice to be re-directed to the default blue login page of farcry then back to the site. You’ve spent all this time skinning your site and setting up your nav classes to wow your customer that this could possibly dissatisfy them. So, to avoid that I suggest a custom login page that has the same look and feel as the rest of your site. Here’s how you’d do it…

Start by creating a file in /project_name/customadmin/login/ called login.cfm. Add the following code at the top:

<!--- @@displayname: Custom Login Page --->
<!--- @@author: Jake Churchill (jake@cfwebtools.com) --->
<cfsetting enablecfoutputonly="yes">

<cfmodule template="/farcry/#application.applicationname#/webskin/includes/dmHeaderCFASLogin.cfm"
	layoutClass="type-a"
	pageTitle="Login">

<cfoutput>

Obviously you can change the displayname, author and change the name of the header template in the cfmodule tag. I always keep my nav class and stuff in my header file to keep thing simple. Do the same for the footer at the bottom of the file like this:

</cfoutput>

<cfmodule template="/farcry/#application.applicationname#/webskin/includes/dmFooterCFAS.cfm">

<cfsetting enablecfoutputonly="no">

In between the header and footer inside the cfoutput tags is where your form goes. In my case, I wanted the form to be the same as the default farcry login form, I just wanted the look and feel of the site. If you find yourself in a similar boat, then all you need to do is copy the contents of /farcry_core/tags/navajo/login.cfm. Make sure you paste it between the header and footer.

Now, go to the login page and see if your form is now surrounded by your site’s header and footer as intended. If not, feel free to debug your code

You will notice, however, that the login form might not be styled the way you’d expect. The default css file for mollio have styling in them for the login form but I always remove that because, well, I don’t know why. I guess I like my code short and sweet. If you left that in there, it should be applied because that css file should be linked in your header. If it’s not working, then look at the code you pasted from /farcry_core/tags/navajo/login.cfm. Around line 13 in that file you should see this:

<!--- check for custom Admin CSS in project codebase --->
<cfif fileExists("#application.path.project#/www/css/customadmin/admin.css")>
    <cfoutput>
    <link href="#application.url.webroot#/css/customadmin/admin.css" rel="stylesheet" type="text/css">
    </cfoutput>
<cfelse>
    <cfoutput>
    <link href="#application.url.farcry#/css/main.css" rel="stylesheet" type="text/css">
    </cfoutput>
</cfif>

Creat the file /project_name/css/customadmin/admin.css and put the following code in it:

#login {border: 8px solid #B2B4BA;background:#fff;width:37em;margin: 10px auto;padding: 20px;color:#999;}

	#login h1 {font-size:105%;color:#116EAF;margin: 0;float:left;display:inline;padding-bottom:10px}
	#login h1 img {margin: 0 0 15px}
	#login h1 img, #login h1 span {display:block;font: normal 80% arial;color:#999}
	#login h3 {clear:both;font: normal 86% arial;text-align:right;margin: 15px 0 0 auto;padding: 15px 0 0;border-top: 1px solid #eee;color:#ccc}
	#login h3 img {display:block;margin: 0 0 0 auto}
	#login fieldset {font-weight:bold;margin-bottom: 10px;width:17em;float:right; }
	#login fieldset h5 {margin: 50px 0 0;padding:2px 5px}
	#login label {width:17em}
	#login fieldset input {margin-top:-1.6em;width:140px;float:right;font-weight:bold}
	#login fieldset input.f-submit {margin: 5px 0;width:142px;_width:144px}

And there you go. You should now have a login page that contains your site’s header, footer and navigation. As I mentioned this is most useful when creating a member’s only section. If an anonymous user attempts to access a members only portion of the site, he/she will be redirected to your login page rather than the default farcry login page.

See http://jake.cfwebtools.com/index.cfm/2007/4/20/Farcry-Logging-In-And-Out for a brief discussion on logging in and out in Farcry when using the custom login scripts.