Skip to content

Instantly share code, notes, and snippets.

@jsonberry
jsonberry / mobile.css
Created June 10, 2016 18:43
Switch content order CSS only / IE11+ Friendly
/*
I needed to switch the order of content displayed between two sections that each had nested information.
On desktop section #1 was a left sidebar, section #2 was the main content.
On mobile these needed to be flipped so the main content would appear before the sidebar content, in a column.
The solution here worked only so far: http://stackoverflow.com/questions/17455811/swap-div-position-with-css-only
The main problem with this solution was that on iOS Chrome version ^51.0.2 on iPhone 6 and iPad mini, as well as Safari and whatever default internet browser coems on Android devices...
... all content was stacked on top of each other.
The following solution gave me the effect I was looking for, without content stacking on top of each other.
*/
@jsonberry
jsonberry / hero_img_overlay_content.css
Last active June 1, 2016 18:42
Hero image + overlay + centered content (with adjustable vertical height)
// These styles can help you get a hero image with an overlay as well as centered content placement
/* Example markup
<div id='hero-image'>
<div id='hero-overlay'></div>
</div>
<div id='hero-content'>
<p>Look ma, no hands!</p>
</div>
*/
@jsonberry
jsonberry / wp-custom-menu.php
Created February 19, 2016 20:17
WordPress -> Custom Menu Area function, add to functions.php
<?php
function register_my_menus()
{
register_nav_menus(
array(
'footer-menu' => __( 'Footer Menu' )
)
);
}
@jsonberry
jsonberry / wp-new_widget.php
Last active February 19, 2016 20:18
WordPress -> Custom Widget Function. Add to functions.php.
<?php
function create_widget($name, $id, $description)
{
register_sidebar(array(
'name' => __( $name ),
'id' => $id,
'description' => __( $description ),
'before_widget' => '<div id="'.$id.'" class="widget %1$s %2$s">',
'after_widget' => '</div>',