Login Updates

file structure notes

\livewhale (backend)
    \client
        \modules
            \login_updates
                \private.application.login_updates.php (contents below)
                \styles
                    \login_updates.css (contents below)
    \core
    ...

login_updates.css

/* Card Styles */

.card.extra {
  margin-top: 15px;
}

.card.extra:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

/* Columns Styles */

.lw_widget_column {
  float: left;
}

.lw_widget_column > * {
  margin-right: 12px;
}

/* Generic Widget Styles */

.lw_widget li {
  padding-bottom: 15px;
}

.lw_widget li:last-child {
  padding-bottom: 0;
}

.lw_widget li.lw_has_image {
  margin-left: 99px;
  padding-bottom: 0;
}

.lw_has_image .lw_item_thumb img {
  float: left;
  margin-top: 5px;
  margin-left: -99px;
}

.lw_widget li.lw_has_image:after {
  clear: both;
  content: '.';
  display: block;
  height: 15px;
  overflow: hidden;
  visibility: hidden;
}

/* Blurbs Styles */

.lw_blurbs_title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}

.lw_blurbs_body {
  color: #333;
  font-size: 15px;
}

/* Events Styles */

.lw_events_header_date {
  margin-bottom: 0.3em;
  color: #999;
  font-size: 1.6em;
  font-weight: bold;
}

.lw_events_time {
  font-size: 18px;
  font-weight: 600;
}

.lw_events_title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
}

.lw_events_until {
  display: none;
}

/* News Styles */

.lw_news_headline a {
  font-size: 18px;
  font-weight: 600;
}

/* Twitter Styles */

.lw_widget_twitter li {
  position: relative;
  margin-left: 66px;
  margin-bottom: 15px;
  padding: 5px;
  background-color: #ddd;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.lw_widget_twitter li:last-child {
  margin-bottom: 0;
  padding-bottom: 5px;
}

.lw_widget_twitter li:before {
  content: "\25C0";
  position: absolute;
  left: -14px;
  top: 12px;
  color: #ddd;
  font-size: 18px;
}

.lw_widget_twitter li:after {
  clear: both;
  content: '.';
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
}

.lw_twitter_images,
.lw_twitter_date,
.lw_twitter_location {
  display: none;
}

.lw_twitter_username img {
  float: left;
  margin-top: -5px;
  margin-left: -72px;
}

.lw_twitter_username a {
  font-weight: 600;
  text-decoration: none;
}

.lw_twitter_tweet {
  display: block;
  overflow-x: hidden;
}

.lw_widget_column .lw_twitter_tweet {
  margin-right: 9px;
}

private.application.login_updates.php

<?php

// This application allows you to insert custom content underneath the login screen.
// Be sure to add accompanying CSS styles if needed. :)

$_LW->REGISTERED_APPS['login_updates']=array( // register this application
	'title' => 'Login Updates', // the module name
	'handlers'=>array('onLoad', 'onOutput') // the handlers to use
);

class LiveWhaleApplicationLoginUpdates {

  // we use a onLoad to get our custom CSS file loaded into the login page
  public function onLoad() {
    global $_LW;
    if ($_LW->page !== 'login') { return; } // exit if this is not the login page
    if ( file_exists($_LW->INCLUDES_DIR_PATH . '/core/modules/help') ) { // if 1.4.4 or greater, we’ll do things a bit differently
      $_LW->REGISTERED_CSS[] = '/live/resource/css/login_updates%5Clogin_updates.css';
    } else {
      $_LW->REGISTERED_CSS[] = '/live/resource/css/login_updates';
    }
  }
  
  public function onOutput($buffer) {
    global $_LW;
    if ($_LW->page !== 'login') { return; } // exit if this is not the login page

    // pattern is what we’ll search for to insert our new content
  	$pattern = '~<div id="tagline">~i';

  	// update is what we want to add, think about some twitter widgets, event widgets, a blurb widget or a file widget
  	// don’t try this with a slideshow yet :(
  	$widget_type = 'blurbs';
  	$widget_code = '<widget name="login_blurbs"></widget>';

  	// let’s go get the widget
   	if (!empty($widget_type) && !empty($widget_code)) {
   	  $updates = $_LW->getUrl("http://{$_SERVER['HTTP_HOST']}/livewhale/frontend.php?livewhale=preview_widget&widget={$widget_type}&syntax=" . rawurlencode($widget_code));
   	  $updates = preg_replace('~http://a~i', 'https://si', $updates);
   	}

  	// now we’ll add the updates content to the output
  	if (!empty($updates)) {
    	$result = preg_replace($pattern, '<div class="card extra">' . $updates . '</div><div id="tagline">', $buffer);
  	}

  	// and we return the updated content if the addition didn’t fail
  	return ((empty($result)) ? $buffer : $result);
  }

}

?>

This code is to help you drop a widget directly beneath the login form on the login page. You can try most any type of widget, but skip the slideshow feature for now, as the javascript that drives that is unavailable on the page at present.

All of this code becomes a client application in the backend of your LiveWhale, so you’ll need FTP access to your web server to be able to place this code and get everything working. Do see the file structure notes atop the gist for where to place these two files as their position and names must match to work correctly.

Once the files are in place, you must change the $widget_type and $widget_code in the private application to be the widget type and code for the widget you want to use.

I’ve also added some basic CSS to handle the default formats of various widgets including: twitter, events, news and blurbs. Do feel free to modify it to accommodate your choice of widget.

If you use this code, please send us a screenshot or two — we’d love to see what you do with it.