Feb 6, 2015 - CSS, LESS    Comments Off on Vertical lines in the background

Vertical lines in the background

adam. urg.

/* Centered Vertical Line - using CSS3 gradients */
.centered-vert-line(@midColor: #ccc, @width: 1px, @startColor: transparent, @endColor: transparent, @deg: 90deg) {
  background-image: -moz-linear-gradient(@deg, @startColor, @midColor, @endColor); // FF 3.6+
  background-image: -webkit-linear-gradient(@deg, @startColor, @midColor, @endColor); // Safari 5.1+, Chrome 10+
  background-image: -o-linear-gradient(@deg, @startColor, @midColor, @endColor); // Opera 11.10
  background-image: linear-gradient(@deg, @startColor, @midColor, @endColor); // Standard, IE10
  background-position: 50%;
  background-repeat: repeat-y;
  background-size: @width 100px;
 }
Feb 2, 2015 - CSS    Comments Off on reverse arrows

reverse arrows

<div id="lead-box" class="wrappers">
			<div class="bar"></div>
			​
			<div class="holder">
				<div class="row">
					<div class="large-12 medium-12 small-12 columns">
						<div>
							<h1>Enterprise<br>Healthcare<br>is not going to<br>fix itself</h1>
							<h4>The Enterprise Healthcare Cloud</h4>
							<a class="button main-cta" target="_blank" href="http://content.castlighthealth.com/castlight-demo.html?promosrc=website_banner">See a Demo</a>
						</div>
					</div>
				</div>
				<div id="promo-box" class="row" style="opacity: 1;">
					<div>
						<div class="large-6 medium-6 small-12 columns promo video">
							<a target="_blank" class="promoCTA" href="http://content.castlighthealth.com/managing-the-transition-to-a-new-benefits-design-on-demand-webinar.html?promosrc=website%20banner">
								<h6><span></span>Video</h6>
								<h4>Managing the transition to a new benefits design</h4>
								<span>Watch Now</span>
							</a>
						</div>
						<div class="large-6 medium-6 small-12 columns promo map">
							<a target="_blank" class="promoCTA" href="/distinctive-searches/">
								<h6><span></span>Interactive Map</h6>
								<h4>New analysis:  A Snapshot of US Workers’ Health Search Patterns</h4>
								<span>Learn more</span>
							</a>
						</div>
											</div>
				</div>
			</div>
		</div>
.bar {
    bottom: 5%;
    height: 30px;
    margin: 0 auto;
    position: absolute;
    width: 100%;
}
.bar > p:before, .bar > p:after {
    border-top: 30px solid transparent;
    content: "";
    height: 30px;
    position: absolute;
    top: 0;
    width: 0;
    z-index: -1;
}
.bar:before, .bar:after {
    border-bottom: 30px solid white;
    box-sizing: border-box;
    content: "";
    height: 0;
    position: absolute;
    top: 0;
}
.bar:before {
    border-right: 30px solid transparent;
    left: 0;
    width: 50%;
}
.bar:after {
    border-left: 30px solid transparent;
    right: 0;
    width: 50%;
}
Feb 2, 2015 - Notes    Comments Off on Fix greensock clash with layerslider

Fix greensock clash with layerslider

        wp_deregister_script('greensock');
        wp_enqueue_script('tweenlite',get_stylesheet_directory_uri().'/lib/js/greensock/TweenLite.js');
        wp_enqueue_script('tweenmax',get_stylesheet_directory_uri().'/lib/js/greensock/TweenMax.js');
        wp_enqueue_script('timelinelite',get_stylesheet_directory_uri().'/lib/js/greensock/TimelineLite.js');
        wp_enqueue_script('greensock-easepack',get_stylesheet_directory_uri().'/lib/js/greensock/easing/EasePack.js');
        wp_enqueue_script('greensock-css',get_stylesheet_directory_uri().'/lib/js/greensock/plugins/CSSPlugin.js');
        wp_enqueue_script('tweenmax-jquery',get_stylesheet_directory_uri().'/lib/js/greensock/jquery.gsap.js',array('jquery','tweenmax'));
    
        wp_enqueue_script('scroll-magic',get_stylesheet_directory_uri().'/lib/js/jquery.scrollmagic.js',array('jquery','tweenmax'));
        wp_enqueue_script('scroll-magic-debug',get_stylesheet_directory_uri().'/lib/js/jquery.scrollmagic.debug.js',array('jquery','tweenmax','scroll-magic'));
Dec 18, 2014 - Genesis, Notes, PlugIns, WordPress    Comments Off on MSDLAB Toolkit

MSDLAB Toolkit

This is what I use for most of my WordPress Sites. The GitHub repository has most of the custom stuff that I use over and over. Generally speaking, I simply customize as needed per client. Not the “properest” way to do it, but faster and more cost effective for the client. Sometimes I do a major update when I find myself doing very similar customizations over and over.

Themes

Genesis Framework

Mad Science themes are built as child themes for the Genesis framework by StudioPress. Genesis themes work differently from other WordPress themes, because they rely strongly on hooks and actions. These two important keywords can take a bit of fiddling with to wrap your head around, but they are built into every part of WordPress, and once you understand them, they make it very simple to customize layout, activity, and even functionality of a WordPress site.

There are some nice reference sites for Genesis. I find myself going back to the visual hook guide frequently, as well as other areas of Genesis Tutorials.

You will need to install the Genesis theme on any site that you will be installing a genesis child theme.

MSDLAB Starter Theme

A Genesis starter theme with Twitter Bootstrap & Font Awesome support using LESS. On GitHub. Copy and rename to use.

Plugins

Premium Plugins

Custom Plugins

The GitHub repository has a number of customized plugins. The one that is used on almost every site I do is MSD Site Settings. The others are mostly customizations of existing plugins. As I have time I am making them into “child plugins” so that they don’t need to be updated every time a source plugin is updated.

Plugin Directory Plugins

Can be found as favorites under my username, Foxydot. I don’t use all of these on every site, obviously, but these are ones I use often and trust.

Tools

The one tool I rely on quite a bit is WPAlchemy. There is a copy in the GitHub repository, at the WP_CONTENT_DIR level, because that’s where my plugins and themes call it from. You can place it anywhere you like, and there are probably old copies in my plugins too. Yes, you can do all of this the Tadlock Way (and the Tadlock Way is usually the right way), but I find WPAlchemy to be a small overhead price to pay for ease of use and function.

Dec 3, 2014 - WordPress    Comments Off on Move content directory for additional security

Move content directory for additional security

Add this to wp-config-sample.php after an update, or add it to wp-config.php. Just after the prefix code. Replace “newdir” with the name of your new directory.

/**
 * Move content directory for additional security
 */
define( 'WP_CONTENT_DIR', dirname(__FILE__) . '/newdir' );
define( 'WP_CONTENT_URL', 'http://'.$_SERVER['SERVER_NAME'].'/newdir' );
Nov 25, 2014 - WordPress    Comments Off on Bootstrap for dynamic widget widths

Bootstrap for dynamic widget widths

jQuery(document).ready(function($) {	
    var numwidgets = $('.header-widget-area section.widget').length;
    $('.header-widget-area').addClass('cols-'+numwidgets);
    var cols = 12/numwidgets;
    $('.header-widget-area section.widget').addClass('col-sm-'+cols);
    $('.header-widget-area section.widget').addClass('col-xs-12');
});
Sep 2, 2014 - Domain Issues, Hosting Headaches, PlugIns, WordPress    Comments Off on Contact Form 7 and Bluehost

Contact Form 7 and Bluehost

Had some issues setting up a site developed by other developers. Aaaaaand this is why Gravity Forms is better. But, anyway, the solution was simple enough: http://wordpress.org/support/topic/contact-form-7-not-working-6

Update: Come to find the same issue with Gravity Forms on a Liquid Web VPS. I realized that (duh) this would always be an issue for clients who use a remote mail exchanger, as the server won’t even look outside itself if it thinks the mail exchanger is local. So, the steps for a cPanel host (which is most of my clients):

cPanel->Mail->MX Entry->Choose Domain-> Find MX Record and look for “Email Routing”->Change to Remote Exchanger.

Of course, ONLY do this for sites that aren’t using the web host to collect mail!

Aug 25, 2014 - WordPress    Comments Off on Getting an attachment from a URL

Getting an attachment from a URL

Specifically, to get a different size of the image.

        $attachment_id = get_attachment_id_from_src($solutions_metabox->get_the_value('image'));
        $image_url = wp_get_attachment_image_src($attachment_id,'solutions');
Jul 14, 2014 - Javascript    Comments Off on Safari and Hash URLs

Safari and Hash URLs

Just discovered this strange behaviour in Safari (and Safari mobile). If you are using a cross-page url with a hash tag, first it must be formatted thus:

http://domain.tld/path/to/page/#hashtag

Note the slash before the hash. That’s apparently key to getting the hash recognized in Safari. Doesn’t seem to break in other browsers this way.
Next, the javascript to capture this is different:

//no good:
var hash = window.location.hash.replace('tab-', '');

//good:
var hash = location.hash.replace('tab-', '');

Again, this seems to work in other browsers.