Media Queries Template for Browser Window Adjustments

Posted in Code Snippets

CSS /* 320px to 420px */ @media screen and (min-device-width : 320px) and (max-device-width : 480px) { } /* below 600px */ @media screen and (max-width: 600px) { } /* 600px to 799px */ @media screen and (max-width: 800px) and (min-width: 601px) { } /* 800px to 1024px */ @media screen and (max-width: 1024px) and (min-width: 801px) { } @media screen and (max-width: 1220px) and (min-width: 1025px) { } /* iPhone [portrait + landscape] */ @media screen and (max-device-width:...

Read More

Get Custom Fields Outside the Loop

Posted in Code Snippets

<?php global $wp_query; $postid = $wp_query->post->ID; echo get_post_meta($postid, 'customField', true); ?> From: WPRecipes

Read More

Use Arrows Keys to Trigger Jquery Slider

Posted in Code Snippets

This code is from jqueryfordesigners.com. It uses the current item class to find the next or previous list item, and trigger a click event on that item. If the current class is on the link tag itself, you need to move up to the parent element first. See the original article for the code including the .parent thing. <script> $(document.documentElement).keyup(function (event) { // handle cursor keys if (event.keyCode == 37) { // go left $('#roundabout-wrap ul li.roundabout-in-focus') ...

Read More

Inset Box Shadow

Posted in Code Snippets

Nice inset box shadow values. box-shadow: 0 1px 15px rgba(0, 0, 0, 0.7) inset; -webkit-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.7) inset; -moz-box-shadow: 0 1px 15px rgba(0, 0, 0, 0.7) inset;

Read More

Jquery Slideout Div

Posted in Code Snippets

#slide-down is the Button that triggers the slide-out div. .cities-dropdown is the div that drops down, magically, out of nowhere. The “body” click function is to trigger the .slideToggle event if the user clicks anywhere in the body. The event.stopPropgation is assigned to both the #slide-down and the .cities-dropdown divs. This is so the event won’t propagate and automatically re-trigger the toggle, and so that if you click inside the toggled element, the .cities-dropdown div, then it...

Read More

Testimonials Styling with Quotation Mark Image for Pages

Posted in Code Snippets

div.quote-begin { background: url("images/quote-begin.png") no-repeat scroll 0 0 transparent; float: left; height: 30px; margin-top: -10px; width: 40px; } div.testimonials-page p { margin-bottom: 20px; } Copy quotation mark images into WordPress theme’s images...

Read More