Implemented Login Widget: add additional markup

[Tecca]

I was originally going to post some CSS on how one might style the Login Widget provided by XenWord, but I decided to post a suggestion before doing so. There were two methods I was going to post:

1. Utilizing only CSS to style the login widget. This method is very CSS-hacky and I wasn't comfortable with some of the CSS involved to style the widget.
2. Using a little CSS but editing xenword-xf-login-widget.php for easier class targeting. This is usually undesirable for an end-user since they'd have to maintain the file themselves during upgrades.

So instead of posting either of those methods, I thought it best to see if you'd add some additional markup so that designers can take advantage of these. It'll also be an easier way to remove certain fields that might be unwanted (such as the email field, joined date, etc) without having to vastly change the PHP to accommodate choices in the XenWord backend.

Since a lot of XenForo themes are highly based off of the default theme's markup (even those that use theme frameworks), using some of the same HTML would be good. But not necessarily needed as long as everything can be targeted via CSS.

To achieve this on the WordPress-side (which is styled the same on my XenForo installation, using the default theme as a base), I needed to add some additional stuff to the login-widget php.

Example of the edit I made in xenword-xf-login-widget.php. It's a bit sloppy but it gives an idea of what I'm trying to suggest.

      $visitor = XenForo_Visitor::getInstance()->toArray();
       
       echo '<h2 class="rounded">Your Profile</h2>';

       echo '<a class="xenword_profile avatar" href="' . XenForo_Application::get('options')->boardUrl . '/account">';
       echo get_avatar( get_current_user_id(), 100 ) . '</a>';

         echo '' .$message_loggedIn. '';
         
         echo '<p>'.$message_loggedIn.'</p>';

         echo '<div class="xenword-login-profile">';

         echo '<h4 class="visitorText"><a class="xenword_profile username" href="' . XenForo_Application::get('options')->boardUrl . '/account">';
         echo '' . $visitor['username'] . '</a></h4>';
         
         echo '<div class="stats">';
           echo '<dl class="pairsJustified email"><dt>User email:</dt><dd>' . $visitor['email'] . '</dd></dl>';
           echo '<dl class="pairsJustified joined"><dt>Joined:</dt><dd>' . XenForo_Locale::dateTime( $visitor['register_date'] ) . '</dd></dl>';
           echo '<dl class="pairsJustified last-activity"><dt>Last Activity:</dt><dd>' . XenForo_Locale::dateTime( $visitor['last_activity'] ) . '</dd></dl>';
           echo '<dl class="pairsJustified messages"><dt>Messages:</dt><dd>' . XenForo_Locale::numberFormat( $visitor['message_count'] ) . '</dd></dl>';
           echo '<dl class="pairsJustified likes"><dt>Likes:</dt><dd>' . XenForo_Locale::numberFormat( $visitor['like_count'] ) . '</dd></dl>';
           echo '<dl class="pairsJustified trophies"><dt>Points:</dt><dd>' . XenForo_Locale::numberFormat( $visitor['trophy_points'] ) . '</dd></dl>';
         echo '</div>';
       
       echo '</div>';
       echo '<br />';
       
       echo '<a class="xenword_profile edit" href="' . XenForo_Application::get('options')->boardUrl . '/account">Edit Profile</a>';
       echo '<a class="xenword_logout logout" href="' . XenForo_Application::get('options')->boardUrl . '/logout">Logout</a>';

So if a designer wants to remove, say: Joined, Last Activity, User email, and Messages; they could simply use the CSS:

.pairsJustified.email,
.pairsJustified.joined,
.pairsJustified.last-activity,
.pairsJustified.messages {
    display: none;
}

The more time-consuming route would also be to allow these to be selected and turned on/off in the WordPress backend, similar to what you have in mind with the Community Statistics widget.

The suggestion probably reaches into the other widgets as well, but I personally haven't looked at them yet.

 

[Tecca]

Oh yeah, here's some actual CSS to go with that just to see how it looks. Again, might be a bit sloppy, I'm doing this stuff on the fly:

.rounded {
   display: none;
}

.widget_xenword_login_widget {
   background-color: transparent;
   border: 0;
}

body .widget_xenword_login_widget > div {
   padding: 0;
   overflow: hidden;
}

.xenword_profile.avatar {
  height: auto;
  margin-right: 5px;
  width: auto;
}

.widget_xenword_login_widget img.avatar {
   border: 3px solid #2b72bb;
   left: 2px;
   padding: 0;
   position: relative;
   top: 2px;
   height: 100px;
   width: 100px;
}

.widget_xenword_login_widget img.avatar:hover {
   border-color: #e39329;
}

.widget_xenword_login_widget h2 {
   padding: 0;
   margin: 0;
   box-shadow: 0 0 2px #eeeeee;
   background-color: transparent;
   border-bottom: 1px solid #dddddd;
   line-height: 18px;
}

.xenword_profile.username {
  font-family: Roboto, "Open Sans", Arial, sans-serif;
  font-size: 11pt;
  margin-left: 7px;
}

a.xenword_profile.username {
   color: #2b72bb;
}

a.xenword_profile.username:hover {
   color: #e39329;
}

.pairsJustified dt {
   float: left;
   margin-right: 5px;
   max-width: 100%;
}

.pairsJustified dd {
   float: right;
   max-width: 100%;
   text-align: right;
}

dl.pairsJustified,
.pairsColumns dl,
.pairsJustified dl {
   line-height: normal;
   padding: 0 8px;
   overflow: hidden;
   margin: 0;
   font-size: 13px;
}

.pairs dt,
.pairsInline dt,
.pairsRows dt,
.pairsColumns dt,
.pairsJustified dt {
   color: #717171;
}

.xenword_profile.edit {
  margin-right: 8px;
}

Example:

 

[LPH]

I deeply apologize. This was to be put into 2.1.1.01 because it is a great addition. The code is now included in 2.1.1.02.