InteractiveWebs Blog

We had a situation that clearly shows the use of the DotNetNuke Advanced Login Custom Script template, and how it can be used to deliver expected results.

The client wanted to use a custom search function that enabled search, twitter and Facebook into the top area of their skin.

The issue was, that when the this would cause some errors with the way that the search would display on top of the Advanced Login Module slide down effect that was set to run on the site.

The solution to this turned out to be a great example of how the “Custom Script” option from within the module, can be used to deliver a custom experience that takes into account other custom features of the skin or site.

So in this case we needed to move the Search, twitter, and Facebook information into the same layer as the slide down effect. We then changed some CSS styles to make the alignment of the item sit in the correct place on the skin, and not move to the right when the skin was on a wise display.

or

The end result

The custom script ended up looking like this:

jQuery(document).ready(function(){
jQuery(“#open”).click(function(){
jQuery(“div#adv_slidedown_panel”).slideDown(“slow”);
jQuery(“.search_style”).css(‘display’,'none’);
});
// Collapse Panel
jQuery(“#iwebs-close”).click(function(){
jQuery(“div#adv_slidedown_panel”).slideUp(“slow”);
jQuery(“.search_style”).css(‘display’,'block’);
});
// Switch buttons from “Log In | Register” to “Close Panel” on click
jQuery(“#toggle a”).click(function () {
jQuery(“#toggle a”).toggle();
});

jQuery(“#dnn_dnnLOGIN_cmdLogin”).css(“display”,”none”);
jQuery(“#dnn_dnnUSER_cmdRegister”).css(“display”,”none”);

if(jQuery(“.wsc_login”).length>0){
jQuery(“.wsc_login”).css(“visibility”,”hidden”);
}

jQuery(“.search_style”).appendTo(jQuery(“.tab”));
jQuery(“.search_style”).css(‘margin-top’,’10px’);

var w=jQuery(“.search_style”).offset().left- jQuery(“#s_wrap_main”).offset().left-jQuery(“#s_wrap_main”).width()+jQuery(“.search_style”).width();
if(w>0){
jQuery(“.search_style”).css(‘margin-right’,w+’px’);
}

})
function custom_validate_login(){
/*
add any custom login form validation logic here,
return true if pass validation
*/
return true;
}
function custom_validate_registration(){
/*
add any custom registration form validation logic here,
return true if pass validation
*/
return true;
}

The end result being that the skin, search and advanced login module slide down effect works well together.

slidedown-export

An example of the DotNetNuke user login via way of jQuery popup effect can be seen here.

The example shows two button images defined that when pressed will give the pop-up template effect shown here.

Popup of Login

Popup of Register

The configuration of this mode is really easy to manage.

Basic Settings Tab

1. Mode = Popup

2. Show Profile as Popup

Giving a Basic Settings tab looking like this:

Template Tab

We selected the Template-gray.

Look and Feel

We loaded some .png images for the Login and Register Buttons, and set the profile form width and height.

jQuery Settings

We left as default.

That was it. This will place the module into a Pop-Up mode, allowing dotnetnuke users to register on your website with a jQuery style of popup effect.

This month the DNN creative online magazine covered our Advanced Login module.

Welcome to issue 63 of DNN Creative Magazine

.

In this issue we focus on how DotNetNuke can be used to enhance or create a business.
To begin we provide video tutorials on Ecommerce and the Smith-Consulting Shopping Cart module. This module has all of the key features that you would expect from a store module, but it is also user friendly for setup and also usability for your customers.
The module allows you to create unlimited products, sell downloadable or physical goods, provide custom shipping, credit card processing, discounts, affiliate tracking and more.
Following this in the next set of video tutorials we demonstrate in detail the Advanced Login module by InteractiveWebs. This module features a Facebook connector, jQuery Popup, Skin Login and Region data import tool and allows you to customize the look and feel over the login and user registration process giving your DotNetNuke websites a professional user experience.
To finish, in our podcast this month we discuss the ways that we have encountered using DotNetNuke to run or enhance the running of a business. From simple subscription based websites through to large scale websites with 3000 child portals and 38,000 employees sharing documents. We discuss how DotNetNuke can benefit your business with its built-in functionality as well as the DotNetNuke community and the resources from third party developers for custom modules.

If you are using our DotNetNuke Login Module the Advanced Login Module, or any other DNN login module, you may find that after you set the DNN Admin settings page to use a new page as the “Login” page.

You receive an error that looks like this:

This is caused by some behaviour in DotNetNuke that is programmed in for good reason, although it is a pain for us.

The idea is that you would not want to set your login page to a page that does not itself have a login module on it, otherwise you would potentially lock yourself out of your own site.

While this is not exactly true, because there are some little tricks to find a login page for DNN websites, the idea is noble, and it was for this reason that DNN corp. decided for a short time to make DotNetNuke check for the DotNetNuke Module on the page set as Login.

From DotNetNuke version 5.0.0 to 5.1.1 this was the case, then some people pointed out that this made it a pain to use DotNetNuke Login Modules from third party DNN module developers like InteractiveWebs.

Here is the thread: http://support.dotnetnuke.com/issue/ViewIssue.aspx?ID=10367&PROJID=2

So if you are faced with this error when using our module, the solution is easy. Upgrade your DotNetNuke website to a version later than DNN 05.01.01. In any case, the DNN 5 version was not really recommended until about DNN 5.2+ so upgrading is really a very good idea.