Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

So I have this plugin for WordPress WPUnited that links my PHPBB board to WordPress. One of the PHP tags that can be called into a WordPress template is

<?php wpu_login_user_info("before=<li>&after=</li>&showLoginForm=1&showRankBlock=0&showNewPosts=0&showWriteLink=0&showAdminLinks=0&showPMs=0&autoLogin=1"); ?>

which produces two outputs depending on if a user is logged in or not,

logged out,

<form class="wpuloginform" method="post" action="<login-link>"><li><label for="phpbb_username">Username</label> <input tabindex="1" class="inputbox autowidth" type="text" name="username" id="phpbb_username"/></li><li><label for="phpbb_password">Password</label> <input tabindex="2" class="inputbox autowidth" type="password" name="password" id="phpbb_password" maxlength="32"/></li><li><input tabindex="3" type="checkbox" id="phpbb_autologin" name="autologin"/><label for="phpbb_autologin"> Remember me</label></li><li><input type="submit" name="login" class="wpuloginsubmit" value="Login"/></li><li><a href="<register-link>">Register</a></li><li><a href="<forgot-password-link>">Forgot Password?</a></li></form>

logged in,

<li class="wpu-widget-lu-username"><a href="User-profile-link" style="color: #AA0000"><strong>Username</strong></a></li><li class="wpu-widget-lu-avatar"><img src="<avatar-link>" alt="User avatar" pagespeed_url_hash="<hash-number>"/></li><li><a href="<logout-link>" title="Logout [ Username ]">Logout [ Username ]</a></li>

Between using jQuery and CSS I have managed to manipulate the strings to look the way I want however I am not sure if this is even the correct way to do this or the best way. Also I cannot get it to look right in IE8. I really don't want to edit the plugin to alter the output and I don't know any other means to achieve the look I want also while being compatible with IE. Can someone please take a look over my code and give any advice on how I can do it better?

Here is the HTML I am using,

<div id="logincontent">
               <div id="logging">
                <ul>
                    <li id="login">
                    <a id="login-trigger" href="#">
                    Log in
                    </a>
                 <div id="login-content">
                   <?php wpu_login_user_info("before=<li>&after=</li>&showLoginForm=1&showRankBlock=0&showNewPosts=0&showWriteLink=0&showAdminLinks=0&showPMs=0&autoLogin=1"); ?>
                 </div>
                   </li>
               </ul>
              </div>
           </div>

And here is the CSS,

    /* Logged Out */

#logging.loggedout ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: right;
    background: #003366;
    border: 1px solid #003366;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;    
}

#logging.loggedout li {
      font-size:100%;        
}

#logging.loggedout #login {  
}

#logging.loggedout a {
      text-decoration:none;
}

#logging.loggedout #login-trigger,
#register a { 
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 27px;
    line-height: 26px;
    font-weight: bold;
    padding: 0 10px;
    text-decoration: none;
    color: #ffffff; 
}

#logging.loggedout #register a {
    -moz-border-radius: 0 3px 3px 0;
    -webkit-border-radius: 0 3px 3px 0;
    border-radius: 0 3px 3px 0;
}

#logging.loggedout #login-trigger {
    -moz-border-radius: 3px 0 0 3px;
    -webkit-border-radius: 3px 0 0 3px;
    border-radius: 3px 0 0 3px;
}

#logging.loggedout #login-trigger:hover,
#logging.loggedout #login .active,
#logging.loggedout #signup a:hover {
      color: #000000
}

#logging.loggedout #login-content {
    display: none;
    position: absolute;
    top: 29px;
    right: 0;
    z-index: 999;    
    background: #000000;  
    padding: 15px;
    border: 2px solid #003366;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

#logging.loggedout li #login-content {
      right: -76px;  
}

/*--------------------*/

#logging.loggedout .wpuloginform input {
    background: #f1f1f1;
    padding: 6px 5px;
    margin: 0 0 5px 0;
    border: 1px solid #ccc;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-box-shadow: 0 1px 1px #ccc inset;
    -webkit-box-shadow: 0 1px 1px #ccc inset;
    box-shadow: 0 1px 1px #ccc inset;
}

#logging.loggedout .wpuloginform input:focus {
    background-color: #fff;
    border-color: #e8c291;
    outline: none;
    -moz-box-shadow: 0 0 0 1px #e8c291 inset;
    -webkit-box-shadow: 0 0 0 1px #e8c291 inset;
    box-shadow: 0 0 0 1px #e8c291 inset;
}

/*--------------------*/

#logging.loggedout #login #actions {
    margin: 10px 0 0 0;
}

#logging.loggedout #login .wpuloginsubmit {     
    background-color: #d14545;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#e97171), to(#d14545));
    background-image: -webkit-linear-gradient(top, #e97171, #d14545);
    background-image: -moz-linear-gradient(top, #e97171, #d14545);
    background-image: -ms-linear-gradient(top, #e97171, #d14545);
    background-image: -o-linear-gradient(top, #e97171, #d14545);
    background-image: linear-gradient(top, #e97171, #d14545);
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
    -moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;
    box-shadow: 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 0 rgba(255, 255, 255, 0.3) inset;    
    border: 1px solid #7e1515;
    height: 30px;
    padding: 0;
    width: 100px;
    cursor: pointer;
    font: bold 14px Arial, Helvetica;
    color: #fff;
}

#logging.loggedout #login .wpuloginsubmit:hover,
#login .wpuloginsubmit:focus {      
    background-color: #e97171;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#d14545), to(#e97171));
    background-image: -webkit-linear-gradient(top, #d14545, #e97171);
    background-image: -moz-linear-gradient(top, #d14545, #e97171);
    background-image: -ms-linear-gradient(top, #d14545, #e97171);
    background-image: -o-linear-gradient(top, #d14545, #e97171);
    background-image: linear-gradient(top, #d14545, #e97171);
}   

#logging.loggedout #login .wpuloginsubmit:active {      
    outline: none;
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;     
}

#logging.loggedout #login .wpuloginsubmit::-moz-focus-inner {
    border: none;
}

#logging.loggedout #login label {
    line-height: 30px;
}

#logging.loggedout #login label input {
    position: relative;
    top: 2px;
    right: 2px;
}

/* LoggedIn */

#logging.loggedin ul {
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    float: right;
    background: #003366;
    border: 1px solid #003366;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

#logging.loggedin li {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

#logging.loggedin li.wpu-widget-lu-username a {
    color: #CCC !important;
}

#logging.loggedin li.welcome {
    color:#FFF;
    font-weight:bold;
}

#logging.loggedin li a { 
    display: inline-block;
    *display: inline;
    *zoom: 1;
    height: 27px;
    line-height: 26px;
    font-weight: bold;
    padding: 0 10px;
    text-decoration: none;
    color: #ffffff;
    font-size:100%;
}

#logging.loggedin a:hover {
    color: #000000;
}

#logging.loggedin #login {
    display: none;
}

#logging.loggedin #login-trigger {
    visibility:hidden;
}

#logging.loggedin #login-content {
    display: none;
    float: right;
    right: 0;
    z-index: 999;    
    background: #000000;  
    padding: 15px;
    border: 2px solid #003366;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;
    border-radius: 3px 3px 3px 3px;
}

and here is the jQuery I am using,

    jQuery(function ($) {
$(document).ready(function(){
         if($('#phpbb_password').length){

         $('#phpbb_username').attr('Placeholder', 'Username');
         $('#phpbb_password').attr('Placeholder', 'Password');
         $('label[for="phpbb_username"]').remove();
         $('label[for="phpbb_password"]').remove();
         $('#logging').addClass('loggedout');

      } else {

        $('#logging').addClass('loggedin');
        $('.wpu-widget-lu-username').before('</li><li class="welcome">Welcome</li>');
        $('li[class="wpu-widget-lu-avatar"]').remove();
}

        $('#login-trigger').click(function(){
        $(this).next('#login-content').slideToggle();
        $(this).toggleClass('active');                  

        if ($(this).hasClass('active')) $(this).find('span').html('&#x25B2;')
            else $(this).find('span').html('&#x25BC;')
        })
});
                 });

Currently I don't have the login-trigger part of the jQuery setup while trying to to make the other work.

Thanks in advance for any suggestions.

share|improve this question

Know someone who can answer? Share a link to this question via email, Google+, Twitter, or Facebook.

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Browse other questions tagged or ask your own question.