Sep 26, 2016 - CSS, LESS    Comments Off on UL/OL with different colored bullets

UL/OL with different colored bullets

  ol,ul{
    margin-left: 3.2em;
    ol,ul{
      margin-bottom: 0;
    }
  }
  ol{
    counter-reset: item; 
    li{
      list-style-type: none;
      &:before{
        margin-left: -1.2em;
        content: counter(item,decimal) ". ";
        counter-increment: item;
        color: @orange;
      }
    }
    ol{
      li{
        &:before{
          content: counter(item,lower-alpha) ". ";
        }
      }
    }
  }
  ul{    
    counter-reset: item; 
    li{
      list-style-type: none;    
      &:before{
        margin-left: -1.2em;
        margin-right: 0.5em;
        line-height: 0;
        content: "\26AB ";
        color: @orange;
      }
    }
    ul{
      li{
        &:before{
          content:"\25CB ";
        }
      }
    }
  }
Aug 26, 2016 - Notes    Comments Off on Grayscale via CSS

Grayscale via CSS

http://thenewcode.com/532/Convert-Images-To-Black-And-White-With-CSS

tl;dr:

img.desaturate{
	-webkit-filter: grayscale(1);
	-webkit-filter: grayscale(100%);
	filter: gray;
	filter: grayscale(100%);
	filter: url(desaturate.svg#greyscale);
}

And the SVG File:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="greyscale">
	<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
		0.3333 0.3333 0.3333 0 0
		0.3333 0.3333 0.3333 0 0
		0 0 0 1 0" />
	</filter>
</svg>

Or, inline the SVG and do it all in one place:

img.desaturate {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	filter: gray;
	filter: url("data:image/svg+xml;utf8,<svg version='1.1' xmlns='http://www.w3.org/2000/svg' height='0'><filter id='greyscale'><feColorMatrix type='matrix' values='0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0' /></filter></svg>#greyscale");
}
May 18, 2016 - CSS, WordPress    Comments Off on Style test page

Style test page

This is a block of body copy. This block of body copy is here to give an idea of what body copy might look like with regards to texture and style. This is the primary style for the website copy, and all other copy is a variable from this style. Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Just so that we have a baseline, this is what some italic text would look like inline. This is how we will style bold text. And there are rare instances where we may include both bold and italic on one element. We will also want to link some pages to other pages. I don’t know why, but some people still have a fondness for underlining content. I find this odd.

This is a content H1 tag

H1 tags are useful for SEO maintenance, but should be used very sparingly. The primary H1 tag on any page should be the title, generated by WordPress.

This is a content H2 tag

Likewise, H2 tags should be used sparingly in copy. The primary H2 tag for any page should be the subtitle and/or the site title. However, there are times when content copy hold a major import and should be drawn out both visually and for SEO.

This is a content H3 tag

This is a content H4 tag

The H3 & H4 tags are your primary ways to differentiate body copy as important without overriding the SEO goodness built by your page title and subtitle. Use with gusto and good judgement.

This is a content H5 tag
This is a content H6 tag

The last two heading types, H5 & H6 are good fall-back differentiators. Often, H5 resembles bolded content and H6 resembles plain content. Keep in mind that both are block elements (they will go on their own line) and that they are informative to SEO.

Preformatted content is rarely used except in situations of documentation. It is primarily for setting
aside things like code to be executed and/or commands to be typed. Unlike standard content, it will not
automatically "break" at a certain line length and <strong>must</strong> have explicit line breaks inserted.

Blockquotes are a great way to set very specific content out as either a “pull” from the primary content or as a quote from a specific individual. These can be useful for both hierarchical and design reasons.

– Catherine OBrien

Sometimes it is useful to create a bullet list:

  • For brief information
    • And the sub-items of that information
  • For a visual break
  • To outline basics before going more in-depth
  • For an actual list of items

Sometimes, an ordered list is more appropriate:

  1. To outline specific steps to take in process
  2. Defining items in order of importance
  3. To create an old-school content outline
    1. In which case you may have subitems
  4. As a table of contents

As you can see, there are many options to consider when styling body content in WordPress, and many options to use.

Here is an export file to use to import this page into a WordPress install so that you don’t have to write all this up. It includes some fields that are specific to my code, but otherwise, you might find it useful.

Aug 27, 2015 - Hosting Headaches, WordPress    Comments Off on Goddamn hackers

Goddamn hackers

find . -name '*.php' -print > badfile.txt
vi badfile.txt
:s%/.\//rm -f .\/

grep -H -r -l '\$sF\=' /path/to/dir/to/check/ > badfile.txt

Aug 14, 2015 - Meteor, Node.js    Comments Off on Meteor Deploy Notes

Meteor Deploy Notes

First need an Ubuntu server

Setup with Ubuntu:

curl --silent --location https://deb.nodesource.com/setup_0.12 | sudo bash -

Then install with Ubuntu:

sudo apt-get install --yes nodejs

Optional: install build tools

To compile and install native addons from npm you may also need to install build tools:

apt-get install --yes build-essential

1. Installing Meteor-Up.

Meteor-Up can be easily installed with NPM. Don’t forget the -g to make the package global.

npm install mup

You should now be able to display every MUP command with:

mup —help

If that’s all ok, then we can init a project:

mup init
Aug 4, 2015 - Hosting Headaches, Notes    Comments Off on Local ini on Storm/CentOS

Local ini on Storm/CentOS

Needs:

<IfModule mod_suphp.c>
suPHP_ConfigPath /home/USERNAME/public_html
</IfModule>
<Files php.ini>
order allow,deny 
deny from all 
</Files>

 

in .htaccess

and ini must have chown for USERNAME

Jul 1, 2015 - git, PlugIns    Comments Off on Gitting around git issues

Gitting around git issues

Sometimes I have a plugin in version control, for reasons of naming or maintenance, or whatever, and I forget that and use WP to update the plugin. Here’s how to fix it quickly on the remote site:

git fetch --all
git reset --hard origin/master
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'));
Pages:12345678»