Property: text-overflow
/* from: http://css3clickchart.com/#text-overflow */
.target {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; /* or "clip" */
}
Property: box-sizing
/* from: http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
/* apply a natural box layout model to all elements, but allowing components to change */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
Virtual Host Bits
# For localhost on XAMPP, MAMP, and others
# file: httpd-vhosts.conf
# restart apache after making changes
#------------------------------------------------------- DOMAIN
<VirtualHost *:80>
ServerName DOMAIN.dev
ServerAlias www.DOMAIN.dev
DocumentRoot "/path/to/document/root/DOMAIN/"
<Directory "/path/to/document/root/DOMAIN/">
AllowOverride All
Order Allow,Deny
Allow from all
Require all granted
</Directory>
</VirtualHost>
<VirtualHost *:443>
ServerName DOMAIN.dev
ServerAlias www.DOMAIN.dev
DocumentRoot "/path/to/document/root/DOMAIN/"
<Directory "/path/to/document/root/DOMAIN/">
AllowOverride All
Order Allow,Deny
Allow from all
Require all granted
</Directory>
SSLEngine on
SSLCertificateFile "/path/to/ssl/crt/DOMAIN.crt"
SSLCertificateKeyFile "/path/to/ssl/key/DOMAIN.key"
</VirtualHost>
jQuery: Get/Set Element Width/Height, And Resize
// Get element width/height
var element = $('.class');
var width = element.width();
var height = element.height();
// Set element width/height
var element = $('.class');
element.css( 'width', value + 'px' );
element.css( 'height', value + 'px' );
// On window resize
$(window).resize(function(){
// do stuff
});
// On element resize
element.resize(function(){
// do stuff
});
Not sure if this is still valid jQuery.
Text Shadow
/* x-offset, y-offset, blur radius, color */
.text_shadow {
text-shadow: x_offset y_offset blur_radius color;
}
/* multiple shadows, comma-separated */
.text-shadow {
text-shadow: shadow1, shadow2, shadow3;
}
/* from http://www.themeshock.com/css-text-shadow/ */
.pressed {
color: #222;
text-shadow: 0px 1px 1px #4d4d4d;
}
.embossed {
color: #066;
text-shadow: -1px -1px 1px rgba(255, 255, 255, 0.1), 1px 1px 1px rgba(0, 0, 0, 0.5);
}
.neon {
color: #fff;
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
letter-spacing: 5px;
}
.fire {
color: #fff;
text-shadow: 0px -1px 4px white, 0px -2px 10px yellow, 0px -10px 20px #ff8000, 0px -18px 40px red;
}
.3D {
color: #fff;
text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
}
.retro {
color: #990F0A;
text-shadow: 5px 5px 0px #EEE, 7px 7px 0px #707070;
}
.acid {
color:#00ff0f;
text-shadow: 0px 0px 10px #00ff0f, -1px -1px #000;
}
.shadow {
color:#333;
text-shadow: -5px 5px 5px rgba(0,0,0, 0.3);
}
.alpha {
color: rgba(0, 174, 239, 0.2);
text-shadow: rgba(0, 0, 30, 0.08) 0px 5px 2px;
}
.alpha3D {
color: transparent;
text-shadow: rgba(245, 245, 255, 0.35) 0 0px 0px, rgba(0, 0, 30, 0.08) 0px 2px 2px, rgba(0, 0, 30, 0.20) 0px 2px 1px, rgba(0, 0, 30, 0.40) 0px 2px 1px, rgba(0, 0, 0, 0.08) -5px 5px 2px;
}
.anaglyphs {
color: rgba(0, 168, 255, 0.5);
text-shadow: 3px 3px 0 rgba(255, 0, 180, 0.5);
}
.blur {
color: rgba(255, 255, 255, 0.1);
text-shadow: 0px 0px 15px rgba(255, 255, 255, 0.5), 0px 0px 10px rgba(255, 255, 255, 0.5);
}
Add IE Support for HTML5 Shiv
// Double check the src
function add_ie_html5_shim() {
echo '<!–[if lt IE 9]>';
echo '<script src=”http://html5shim.googlecode.com/svn/trunk/html5.js”></script>';
echo '<![endif]–>';
}
if ($GLOBALS['is_IE']) {
add_action('wp_head', 'add_ie_html5_shim');
}
Hopefully you’re not still supporting IE – unless you’re charging out the wazoo to the customer to do so.
Builder: Add DOM Element Before Container
// Add DOM element to Builder before container output (right after opening body tag)
function add_dom_element() {
echo '<div class"custom-class></div>';
}
add_action('builder_layout_engine_render_container', 'add_dom_element' );
No longer using Builder. It was good while they kept it up to date. Not so much now.