Login Process | PostNuke Content Management

Now that you've made certain your users log in to your site, it's time to look at what happens during the login process. You are probably already very familiar with the default "Logging you in" message, but like all things PostNuke, you can change the way the transition screen looks and works.

Changing Login/Logout Colors

In PostNuke versions prior to .75, the login/logout screen was traditionally blue with white text, no matter which theme was chosen for a site. All of the pages now use the global color styles for consistency, but you can also adjust the login screen colors slightly for a more dramatic effect.

Open the following file in your text editor:

 /modules/NS-User/tools.php

The two main functions in the file, redirect_index and redirect_user, both control the screens that segue from form submissions back to the site. Lines 46 and 63 specifically have color references coded into them:

 echo "</head><body bgcolor=\"$GLOBALS[bgcolor1]\" text=\"$GLOBALS[textcolor1]\">\n";

But the HTML color attributes are actually ignored now in favor of the global style sheet. To override the cascading style sheets (CSS) body, code the styles directly into the tag, replacing the HTML, as shown in the following line:

 echo "</head><body style=\"background-color:$GLOBALS[bgcolor2]; color:$GLOBALS [textcolor1];\">\n";

These inline styles override the included CSS file. The small change to the bgcolor2 variable darkens the background for most themes while in transition, so the change is more noticeable. You can also hard-code in Hex color codes as you would any style.

Tip

Instead of coding multiple styles directly into the file, create a new style specifically for the redirect pages. Then add the class attribute to the body tags in tools.php.

Changing Login/Logout Text

The text displayed when a user logs in to or out of your site is also very important. It might only take a few seconds for the process to complete, but the short message on the page is likely to get more specific attention from your users than any other information on your site. You should consider carefully what message you want said to your users. In addition to conveying the redirect information, how it is written says a great deal about your site, too.

First examine the variables that are used on the login/logout redirect screens. Open your editor and load up this file:

 /modules/NS-User/lang/eng/global.php

The two specific lines you'll change are 64 and 116:

 define('_LOGGINGYOU','Logging you in  please wait!'); define('_YOUARELOGGEDOUT','You are now logged-out!');

Duplicate the originals and comment them out. Now, you can customize the text for your site. With our campaign example, use the statement: "Thanks for supporting John Smith! Granting special site access now..." for the login value. "Thanks for visiting ElectJohnSmith.com! We hope you return soon.<br /><br />Your personal account is logging off now." works similarly well for the logout value.

As you can see from the previous examples, the lines do not have to be just about the technical process, and HTML can be added for basic formatting. Including a personal comment helps maintain a connection with the user. Adding references to the site name or focus reminds the user once again what site they are on and why. That kind of reinforcement translates into strong return visitor traffic.

Forcing Redirect Page After Login

Normally, the login page redirects users to their personal page. Depending on what form was used, users might also be redirected to the main site home page. But for some sites, it might be important to redirect users to a different page. For example, a political campaign site might have an important message or news information that should be viewed by all users. You can force redirects to go to a specific page simply by changing the uniform resource locator (URL) variable in the login forms.

To change the login block redirection, open the same file you used to edit the styles and text:

 /includes/blocks/login.php

In the blocks_login_block function, look for this section of code:

 <input type="hidden" name="url" value="'.pnVarPrepForDisplay($path).'" />

The value in this hidden input tag sends a URL to the redirect function. Whatever URL you place in that value location is used for every user after the login. So, for example, if you want to send all users to a specific news article, you can code that link into the tag as follows:

 <input type="hidden" name="url" value="/modules.php?op=modload&name=News&file=article&sid=1" />

The same effect can be generated for the page version of the login form. Open the NS-User user.php file:

 /modules/NS-User/user.php

and scroll down to around line 330 to the user_user_loginscreen function. Look for this input near the end of the function:

 <input type=\"hidden\" name=\"url\" value=\"" . pnServerGetVar("HTTP_REFERER") . "\" />

Change its value to match the preceding one, and you've forced the redirect target after a login.

Adding Ads and Logos

Whether your site is commercially driven or not, the login/logout redirect page is valuable ad space. The page is nearly devoid of content, and every user is staring at the blank screen for those few seconds. You can let the captured audience go unused, or you can harness their attention by focusing on an ad graphic.

You can perform a simple edit to see how it's done by adding a site logo to the login screen. Use the same image from Chapter10, "Themes," which is included in the book materials. If you have not already done so, place the image in the main image path of your theme:

 /themes/yourtheme/images/postnuke-logo1.gif

Now open the main user tools file in your editor:

 /modules/NS-User/tools.php

Scroll down to the redirect_index function on line 34. The layout of an entire HTML page is in this function, and you can add whatever images or text you need to this page. It will be displayed to users when they log in and when they log out. Add an image line after the <body> tag opens, as follows:

     echo "</head><body style=\"background-color:$GLOBALS[bgcolor2]; color:$GLOBALS [textcolor1];\">\n";     echo "<img src=\"".$imagepath."/postnuke-logo1.gif\" />\n";

Save the change and perform a login or logout operation on your site. You should see a page similar to the one in Figure 24.7. This change adds branding to the site. Even a noncommercial site needs to protect its identity and should display a consistent logo on all pages. Commercial sites can just as easily display an advertising banner or message on the screen.

Figure 24.7. Branding the login/logout screens.

Adding a Timer Bar

It's becoming popular on Content Management System (CMS) sites to include an animated timer bar on the login screen. The MDpro PostNuke fork includes this feature now as a standard. It's very easy to port this effect back to your PostNuke install and give your site a little extra flash.

Brian Gosselin of scriptasylum.com is responsible for the very clean timer bar script found on so many sites. To add the bar to your site, you need a copy of his JavaScript file. It's available from this book's website, or you can get a current copy from The Script Asylum.

Place the file in this location:

 /modules/NS-User/

Open your editor and load the user tools file:

 /modules/NS-User/tools.php

The first main function is redirect_index. Scroll to the end of that function, and around line 47 find and comment out this line:

 echo "<div style=\"text-align:center\" class=\"pn-title\">$message</div></body></html>";

To replace the preceding code, add in these lines:

 echo "<div style=\"text-align:center\" class=\"pn-title\">$message</div>"; echo "<br /><br /><div style=\"text-align:center\"><script language=\"javascript\" src=\"/modules/NS-User/timerbar.js\"></script></div>"; echo "</body></html>";

These lines add the timer bar just below the login and logout messages (see Figure 24.8).

Figure 24.8. Animating your login/logout screens.

Change the line slightly to include the common "loading..." message:

 echo "<br /><br /><div style=\"text-align:center\">Loading...<br /><script language=\"javascript\" src=\"/modules/NS-User/timerbar.js\"></script></div>";

The timer bar script is also fully customizable. Open the JavaScript in your editor and look at the variable at the top of the file:

 var loadedcolor='darkgray' ;     // PROGRESS BAR COLOR var unloadedcolor='lightgrey';   // COLOR OF UNLOADED AREA var bordercolor='navy';          // COLOR OF THE BORDER var barheight=15;                // HEIGHT OF PROGRESS BAR IN PIXELS var barwidth=300;                // WIDTH OF THE BAR IN PIXELS var waitTime=5;                  // NUMBER OF SECONDS FOR PROGRESSBAR

Change these settings to match the bar's appearance to your site. The last variable, waitTime, determines how long it takes to run the bar. You might find reducing the seconds is more appropriate for faster sites.