I took the code from "How to Create a Custom DNN Skin with Bootstrap 3" and created a web page using the Dark Horizon skin. Everything works well except for the login link. When clicked, a popup window flashes on the screen for a fraction of a second and then you end up on the regular login page (http://localhost/Login?returnurl=%2...-Horizon). It is as if some code creates the modal window and then subsequently executed code kills the modal popup and we end up on the login page. Any suggestions?

Start by looking for javascript errors. If you open the page in Chrome, you can use the developer tools to do this.

Also, it's not clear to me how you used the Bootstrap code with the "Dark Horizon" skin. I'm not familiar with this skin, unless you really mean Dark Knight. Still, how did you use the Bootstrap code?

Also, which version of DNN are you using? Is this a new site, or an upgrade of an existing one?

I've looked for error in the JavaScript console, there is one message:

JMIGRATE: jQuery is not compatible with Quirks Mode

I don't know what JMIGRATE is. I am not sure whether it came with the files from DNN Creative or whether it is part of the DNN installation.

"Dark Horizon" is a skin example created by Andy Stephenson (February 2014). The complete code and the accompanying video can be found at:

How to Create a Custom DNN Skin with Bootstrap 3
http://www.dnncreative.com/Tutorial...fault.aspx

The accompanying files are:

zzzj_CustomSkinningBootstrap3_Resources_3633.zip
zzzj_CustomSkinningBootstrap3_Videos_8259.zip

In the video Andy goes over the steps to translating a PSD design into a functioning DNN Bootstrap 3 website

I did not find this video by using the DNN Creative search function. It was found by a Google search. Maybe this video is not ready for prime time?

The DNN platform that I am using is v7.3.1. It is a completely vanilla installation -- exactly as from the DNN install package.

To avoid making making mistakes, I used directly the complete code example supplied by Andy rather than build the necessary files using code snippets. The complete code example matches exactly what Andy describes in the video.

Except for this glitch, everything works perfectly. I've spent hours trying to figure out what is going on to no avail.

Oops, sorry. I didn't recognize the name. Yes, that is one of our tutorials, and is quite ready for prime time.

I verified the behavior that you reported. So ... it's not a problem on your end.

Configuring the site to use the Gravity skin results in the login popup working correctly. This is also a Bootstrap based skin.

I believe that the Quirks message goes away if your set the fallback doctype to HTML5 on the Host Settings page. That doesn't fix the popup behavior, though.

jquery-migrage is a "plugin [that] can be used to detect and restore APIs or features that have been deprecated in jQuery and removed as of version 1.9." I don't believe that it is part of the problem.

Hopefully, Andy will be able to take a look at this and provide some help.

Hello Joe,

I've changed the fallback doctype to HTML5. That has gotten rid of the jquery-mirage warning. Thanks for that advice. Unfortunately, everything else is still the same.

There may be a JavaScript error. A message appears in the console (in red) but disappears in a fraction of a second. Is there a way to see a log of error messages because I'll never be able to read a message that flashes by so quickly?

I run into the same behaviour with another one of Andy's tutorials:

Creating a Responsive Bootstrap 3 Skin for DotNetNuke (November 2013)
http://www.dnncreative.com/Tutorial...fault.aspx

It's like some other piece of code gets executed after the popup command that kills the modal popup. The popup is there for the briefest of times (well less than a second).

Maybe it is something with DNN 7.3.1 that wasn't in the DNN version that Andy used to develop these two tutorials.

I compared Gravity and Andy's skin and found that they handle the login a little differently.

In gravity:

<dnn:LOGIN ID="dnnLogin" CssClass="LoginLink" runat="server" LegacyMode="false" />

In Andy's skins:

<dnn:LOGIN ID="LOGIN1" class="inline" runat="server" LegacyMode="true" />

So the class and LegacyMode flags are different. However, I really have no idea whether these difference are significant.

Figured out how to preserve the log upon navigation, so now I've got an error for you:

Wow, this is a tough one.

So the dnn js object is not defined. That is definitely the problem.

This made me think that there is some conflict between the js in the skin and some new or changed js introduced in 7.3.1. But I tried removing all js from the dark horizon skin and still get the error.

I also tried using the exact same login skin object setup as the gravity skin but still no luck.

I really can't see any other reason why this would be happening. There must be something, somewhere that is preventing the dnn js object from being set up

So for some reason dnn.js isn't being included in pages with the dark horizon skin.

dnn.js is where the dnn object is set up. I can think of no reason why this file isn't being included in the page, it certainly isn't anything to do with what we've put in the skin. I'm pretty sure this is a bug.

For now, you could stick this in dark horizon's default.ascx, just underneath the other DnnJsInclude:



That should fix the issue until DNN fixes the cause.

Your fix worked perfectly. Thanks!

Just for the record (and for other people who might need to use this information), I added the line:



Will you be submitting a bug report to DNN?