Windycityfella,

Step 1:

Ok, the first step is to edit the “nav-menu-template.php” in the /wp-includes/ directory of your core WP install. On line 85, change “rel=” to “data-rel=” ….ignore where-ever I use quotes, it’s just for emphasis.

Step 2:

In the MikMag theme edit “footer.php” add the following on line 50, just underneath the theme-totop entries that are already there:

<div class=”hidden”>
<div id=”LoginPopup”>
<form class=”loginForm” style=”padding:30px;” id=”popupLoginForm” method=”post” action=”<?php echo wp_login_url(); // optional redirect: wp_login_url(‘/redirect/url/’); ?>”>
<div id=”loginBg”><div id=”loginBgGraphic”></div></div>
<div class=”loginContainer”>
<h3 style=”text-align:center;”><?php _e( ‘Sign in to your account’, THEME_NAME ); ?></h3> 
<fieldset class=”formContent”>
<div class=”fieldContainer” style=”float:left;”>
<label for=”ModalUsername”><?php _e( ‘Username’, THEME_NAME ); ?></label>
<input id=”ModalUsername” name=”log” type=”text” class=”textInput” />
</div>
<div class=”fieldContainer” style=”float:right;”>
<label for=”ModalPassword”><?php _e( ‘Password’, THEME_NAME ); ?></label>
<input id=”ModalPassword” name=”pwd” type=”password” class=”textInput” />
</div>
</fieldset>
</div>
<div class=”formContent” style=”float:left;”>
<button type=”submit” class=”btn signInButton”><span><?php _e( ‘Sign in’, THEME_NAME ); ?></span></button>
</div>
<div class=”formContent” style=”float:right;”>
<a href=”<?php bloginfo(‘wpurl’) ?>/wp-login.php?action=lostpassword” id=”popupLoginForgotPswd”><?php _e( ‘Forgot your password?’, THEME_NAME ); ?></a>
</div>
</form>
</div>
</div>

Step 3

In your MikMag settings, under General / Miscellaneous add the following to your custom CSS:

#LoginPopup { width: 210px; margin: 0 auto;}
#LoginPopup fieldset legend { display: none; }
#LoginPopup div.fieldContainer { margin-bottom: 0em; } /* space between inputs */
#LoginPopup label { width: 80px; display: block; float: left; line-height: 27px; }
#LoginPopup .textInput { width: 85px; }
#LoginPopup .formContent { width: 80%; margin-left: auto; margin-right: auto; }
#LoginPopup .hr { margin: 16px 0 19px; }

.hidden { display: none !important; visibility: hidden; }

Last Step:

In the menu admin on wordpress, create a menu item with following attributes:

URL: #LoginPopup
Navigation Label: Login
CSS Classes (optional): popup
Link Relationship (XFN): prettyPhotoinline

NOTE: To see the “Link Relationship (XFM):” field, enable it under screen options at the top of the screen.

Step Done:

No more steps, that should do it. Let me know how it works for you.

• This reply was modified 2 months, 2 weeks ago by  pinkfloyd.
• This reply was modified 2 months, 2 weeks ago by  pinkfloyd.

I too ran the same check. There are a lot of errors and non-compliance issues. Looks like too many disparate things were pulled from many sources and boiled into a XHTML/HTML4.01/HTML5 soup. I would suggest going through the code, cleaning up and optimizing it. prettyphoto.js is outdated too, and this can usually be a security concern or at the very least fix some bugs. Server load and speed at which the client side renders is very important. I like what YOOtheme does with their Warp framework. It takes 24 requests / 120KB and squeezes it down to 2 requests / 40KB ….same output. It also integrates lightweight CSS, HTML5 shim (for older browsers), plus a lot more. I haven’t bought any of their themes yet, but in testing them on their demo site, they are VERY fast and responsive, still not at pretty as MikMag though! ….so, if the developers can clean up the code this would make for a really nice solution.