<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" media="screen" href="/~d/styles/rss2full.xsl"?><?xml-stylesheet type="text/css" media="screen" href="http://feeds.feedburner.com/~d/styles/itemcontent.css"?><rss xmlns:content="http://purl.org/rss/1.0/modules/content/" xmlns:wfw="http://wellformedweb.org/CommentAPI/" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:sy="http://purl.org/rss/1.0/modules/syndication/" xmlns:slash="http://purl.org/rss/1.0/modules/slash/" xmlns:feedburner="http://rssnamespace.org/feedburner/ext/1.0" version="2.0">

<channel>
	<title>WebDesign&amp;Such</title>
	
	<link>http://webdesignandsuch.com</link>
	<description>a Beantown Design Production</description>
	<lastBuildDate>Fri, 10 May 2013 13:17:26 +0000</lastBuildDate>
	<language>en-US</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.5.1</generator>
		<atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="self" type="application/rss+xml" href="http://feeds.feedburner.com/webdesignandsuch" /><feedburner:info uri="webdesignandsuch" /><atom10:link xmlns:atom10="http://www.w3.org/2005/Atom" rel="hub" href="http://pubsubhubbub.appspot.com/" /><feedburner:emailServiceId>webdesignandsuch</feedburner:emailServiceId><feedburner:feedburnerHostname>http://feedburner.google.com</feedburner:feedburnerHostname><item>
		<title>Disable Default WordPress Widgets</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/NGnsg3jY5RY/</link>
		<comments>http://webdesignandsuch.com/disable-default-wordpress-widgets/#comments</comments>
		<pubDate>Fri, 10 May 2013 13:17:26 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4478</guid>
		<description><![CDATA[Here is how to quickly disable/remove the default WordPress widgets.]]></description>
				<content:encoded><![CDATA[<p>If you build websites for clients using WordPress you might not include a blog. If you don&#8217;t have a blog on the site you might want to remove some of the default widgets that you can use in the widget area of WordPress (this makes it less confusing for your client). Add the following to your functions.php file to remove the widgets.</p>
<pre class="brush: php; title: ; notranslate">
function Wps_unregister_default_widgets() {
    unregister_widget('WP_Widget_Pages');
    unregister_widget('WP_Widget_Calendar');
    unregister_widget('WP_Widget_Archives');
    unregister_widget('WP_Widget_Links');
    unregister_widget('WP_Widget_Meta');
    unregister_widget('WP_Widget_Search');
    unregister_widget('WP_Widget_Text');
    unregister_widget('WP_Widget_Categories');
    unregister_widget('WP_Widget_Recent_Posts');
    unregister_widget('WP_Widget_Recent_Comments');
    unregister_widget('WP_Widget_RSS');
    unregister_widget('WP_Widget_Tag_Cloud');
}
add_action('widgets_init', 'Wps_unregister_default_widgets', 1);</pre>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/NGnsg3jY5RY" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/disable-default-wordpress-widgets/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/disable-default-wordpress-widgets/</feedburner:origLink></item>
		<item>
		<title>Embed a WordPress Custom Menu in Page Content with a Shortcode</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/QLGwcte05SQ/</link>
		<comments>http://webdesignandsuch.com/embed-a-wordpress-custom-menu-in-page-content-with-a-shortcode/#comments</comments>
		<pubDate>Fri, 26 Apr 2013 13:39:55 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4471</guid>
		<description><![CDATA[Quick method to embed a WordPress custom menu in the page content with a shortcode.]]></description>
				<content:encoded><![CDATA[<p>You may want to add a WordPress custom menu to the content of a WordPress page. For example you might want to create a sitemap as a custom menu and embed it on the page. First register your sitemap menu, here is an example (this would be in functions.php):</p>
<pre class="brush: php; title: ; notranslate">add_action( 'init', 'my_custom_menus' );
function my_custom_menus() {
    register_nav_menus(
        array(
            'primary-menu' =&gt; __( 'Primary Menu' ),
			'secondary-menu' =&gt; __( 'Secondary Menu' ),
            'footer-left' =&gt; __( 'Footer Left' ),
			'footer-right' =&gt; __( 'Footer Right' ),
			'sitemap' =&gt; __( 'Sitemap' )
        )
    );
}</pre>
<p>Then add the following to your functions.php (this creates a shortcode to embed the menu):</p>
<pre class="brush: php; title: ; notranslate">function print_menu_shortcode($atts, $content = null) {
extract(shortcode_atts(array( 'name' =&gt; null, ), $atts));
return wp_nav_menu( array( 'menu' =&gt; $name, 'echo' =&gt; false ) );
}
add_shortcode('menu', 'print_menu_shortcode');</pre>
<p>Then you can add the shortcode to the page with the name of the menu, for my example it would be:<br />
[menu name="sitemap"]</p>
<p><a href="http://stephanieleary.com/2010/07/call-a-navigation-menu-using-a-shortcode/" target="_blank">code source</a></p>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/QLGwcte05SQ" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/embed-a-wordpress-custom-menu-in-page-content-with-a-shortcode/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/embed-a-wordpress-custom-menu-in-page-content-with-a-shortcode/</feedburner:origLink></item>
		<item>
		<title>Allow editor level to edit WordPress SEO by Yoast plugin settings</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/PZPkw0CCkcA/</link>
		<comments>http://webdesignandsuch.com/allow-editor-level-to-edit-wordpress-seo-by-yoast-plugin-settings/#comments</comments>
		<pubDate>Thu, 25 Apr 2013 19:16:51 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4467</guid>
		<description><![CDATA[Here's how to allow editor level users to edit the WordPress SEO by Yoast plugin settings.]]></description>
				<content:encoded><![CDATA[<p>By default the WordPress SEO by Yoast plugin doesn&#8217;t allow editor level users to edit the main SEO settings. You may want to change this if you have somebody in charge of your SEO who you only want to have regular editor level privileges. This should be a setting on the plugin, but until they edit it you can use the code below to allow access to a specific user. Change the #3 to the user id that you want to give access to. Add this to your functions.php file. </p>
<pre class="brush: php; title: ; notranslate">
// change the #3 to the user id
$user = new WP_User( 3 );
$user-&gt;add_cap( 'manage_options');</pre>
<p><a href="http://wordpress.org/support/topic/plugin-wordpress-seo-by-yoast-editor-access-to-wp-seo-yoast-dashboard" target="_blank">code source</a></p>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/PZPkw0CCkcA" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/allow-editor-level-to-edit-wordpress-seo-by-yoast-plugin-settings/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/allow-editor-level-to-edit-wordpress-seo-by-yoast-plugin-settings/</feedburner:origLink></item>
		<item>
		<title>A Showcase of Beautifully Designed App Icons</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/qg7DOiPbsgM/</link>
		<comments>http://webdesignandsuch.com/a-showcase-of-beautifully-designed-app-icons/#comments</comments>
		<pubDate>Sat, 16 Feb 2013 02:02:28 +0000</pubDate>
		<dc:creator>Alex</dc:creator>
				<category><![CDATA[Inspiration]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4297</guid>
		<description><![CDATA[The difference between good design and great design is in the details. Great design makes sure that everything is well thought-through. If you&#8217;re building an application, that means that the [...]]]></description>
				<content:encoded><![CDATA[<p>The difference between good design and great design is in the details. Great design makes sure that everything is well thought-through. If you&#8217;re building an application, that means that the same level of care and attention that you give to the main product is also given to the smaller, less used parts like the settings screen, the login/signup screen and &#8211; if it&#8217;s a mobile, tablet or desktop app &#8211; the icon.</p>
<p>The icon is often overlooked but is surprisingly important. After all, it forms a big part of the identity for your app and can be seen by your users many times throughout the day, whenever they look at their taskbar or phone. Putting care, attention and focus into getting it right can result in more downloads from the app store, a better likelihood that the user will allow the app to appear on their phone&#8217;s home screen and can lead to them using your app more often. It&#8217;s clearly not something that should be designed as an after thought.</p>
<p>To help give you some inspiration, we&#8217;ve brought together a showcase of some of the best designed, elegant, beautifully designed app icons out there. We hope you find the collection useful and interesting for any app icon design projects that you may have.</p>
<h2>Mailbox</h2>
<p><a href="http://www.mailboxapp.com/"><img class="aligncenter size-full wp-image-4433" alt="Mailbox" src="http://webdesignandsuch.com/wp-content/uploads/01-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Vine</h2>
<p><a href="http://vine.co/"><img class="aligncenter size-full wp-image-4436" alt="Vine" src="http://webdesignandsuch.com/wp-content/uploads/02-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Vyclone</h2>
<p><a href="http://www.vyclone.com/"><img class="aligncenter size-full wp-image-4438" alt="Vyclone" src="http://webdesignandsuch.com/wp-content/uploads/03-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Retina Backgrounds</h2>
<p><a href="https://itunes.apple.com/us/app/retina-wallpapers-backgrounds/id519299835?mt=8"><img class="aligncenter size-full wp-image-4439" alt="Retina Backgrounds" src="http://webdesignandsuch.com/wp-content/uploads/04-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Setlist</h2>
<p><a href="http://gosetlist.com/"><img class="aligncenter size-full wp-image-4440" alt="Setlist" src="http://webdesignandsuch.com/wp-content/uploads/05-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Kamera X</h2>
<p><a href="http://www.x.dk/"><img class="aligncenter size-full wp-image-4441" alt="Kamera X" src="http://webdesignandsuch.com/wp-content/uploads/06-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Photo Cookbook</h2>
<p><a href="http://www.thephotocookbook.com/"><img class="aligncenter size-full wp-image-4442" alt="Photo Cookbook" src="http://webdesignandsuch.com/wp-content/uploads/07-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>SoundBrush</h2>
<p><a href="http://leafnotesinc.com/"><img class="aligncenter size-full wp-image-4445" alt="SoundBrush" src="http://webdesignandsuch.com/wp-content/uploads/08-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Iris</h2>
<p><a href="http://www.irisapp.cc/"><img class="aligncenter size-full wp-image-4446" alt="Iris" src="http://webdesignandsuch.com/wp-content/uploads/09-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Speedtest</h2>
<p><a href="http://speedtest.net/"><img class="aligncenter size-full wp-image-4447" alt="Speedtest" src="http://webdesignandsuch.com/wp-content/uploads/10-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Skala Preview</h2>
<p><a href="http://bjango.com/mac/skalapreview/"><img class="aligncenter size-full wp-image-4448" alt="Skala Preview" src="http://webdesignandsuch.com/wp-content/uploads/11-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>GitHub Issues</h2>
<p><a href="http://mobile.github.com/"><img class="aligncenter size-full wp-image-4450" alt="GitHub Issues" src="http://webdesignandsuch.com/wp-content/uploads/12-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>Michel Thomas</h2>
<p><a href="http://www.michelthomasapp.com/"><img class="aligncenter size-full wp-image-4451" alt="Michel Thomas" src="http://webdesignandsuch.com/wp-content/uploads/13-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>MetalStorm</h2>
<p><a href="http://z2live.com/games/metal-storm-online/"><img class="aligncenter size-full wp-image-4452" alt="MetalStorm" src="http://webdesignandsuch.com/wp-content/uploads/14-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<h2>AmpKit</h2>
<p><a href="http://agilepartners.com/apps/ampkit/"><img class="aligncenter size-full wp-image-4453" alt="AmpKit" src="http://webdesignandsuch.com/wp-content/uploads/15-app.jpg" width="590" height="270" style="border:0px"/></a></p>
<p>Have you found any examples of beautifully designed, thoughtfully crafted app icons? Let us know what you&#8217;ve found in the comments.</p>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/qg7DOiPbsgM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/a-showcase-of-beautifully-designed-app-icons/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/a-showcase-of-beautifully-designed-app-icons/</feedburner:origLink></item>
		<item>
		<title>A look at The Revolution Slider. Steve Jobs would be proud.</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/208QYr1Rn_Y/</link>
		<comments>http://webdesignandsuch.com/jquery-revolution-slider-steve-jobs-would-be-proud/#comments</comments>
		<pubDate>Fri, 08 Feb 2013 19:11:31 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[WordPress]]></category>
		<category><![CDATA[Slider]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4277</guid>
		<description><![CDATA[An overview of the responsive jQuery slider called The Revolution Slider. The most badass slider ever.]]></description>
				<content:encoded><![CDATA[<h2>Remember Flash? Yuck.</h2>
<p>A few years ago Steve Jobs decided that it was time to take a stand against Adobe and their proprietary software Flash. Steve turned a lot of heads and started a ton of heated debates when he flat out refused to support Flash in the iPhone. Some people thought it was only a matter of time before Apple &#8220;had&#8221; to support Flash because really there is no way that we will be able to produce the same animation effects with javascript/jQuery, etc. That turned out to be incorrect. Since Apple products were so popular website developers had to come up with different solutions for their animations. In my opinion Steve&#8217;s decision is a major reason jQuery and HTML5 has progressed so much in the last few years.</p>
<h2 style="line-height: 30px;"><em style="font-size: 16px;">Fastforward a couple years&#8230;</em><br />
Introducing The Revolution Slider</h2>
<p>I recently launched a responsive WordPress theme called &#8220;<a href="http://bit.ly/WWP7tP" target="_blank">Hipster</a>&#8221; at ThemeForest. The theme has the WOW Slider built in but I decided to give an extra slider option for people purchasing the theme, and decided on The Revolution Slider. I had seen the slider around over the last few months but never had a chance to use it. Last weekend I started creating the <a href="http://hipsterwprev.beantowndesign.com/" target="_blank">demos</a> for the theme homepage with the new slider built in, and all I can say is WOW. I can honestly say that I haven&#8217;t had as much fun with, or been blown away by the quality and experience of any plugin/slider/website building tool in&#8230;ever?? If you think I&#8217;m blowing smoke I dare you to try the WordPress plugin and disagree. The plugin has an almost &#8220;Flash like&#8221; experience of building your slides (except without the headaches). Add layers of text, images, or videos, then adjust animation, timing, etc.<br />
<strong>Yup, it&#8217;s official&#8230; <em>Flash is fucked</em>.</strong></p>
<p><a href="http://goo.gl/vEjKP" target="_blank"><img class="alignnone size-full wp-image-4288" alt="revolution-slider-plugin" src="http://webdesignandsuch.com/wp-content/uploads/revolution-slider-plugin.jpg" width="590" height="300" /></a></p>
<h4>What makes it so great?</h4>
<ul>
<li>Pricing</li>
<li>Responsive</li>
<li>Video Support</li>
<li>Flexibility / Customization Options</li>
<li>Layers..Layers..Layers</li>
<li>Touch Enabled</li>
<li>Duplicate Existing Slides or Sliders Feature</li>
</ul>
<p>The first thing I wondered when purchasing the plugin is how complicated creating the different layers would be, setting the timing of all the layers, etc. I remember the days of setting up timing in Flash and what a headache it was. Well with The Revolution Slider this was surprisingly simple. There are a ton of settings, allowing you to customize pretty much anything. Set different animations and timing for each slide, set different entering and leaving animations for each layer, it&#8217;s pretty unreal. The flexibility of the slider really allows you to create a &#8220;movie like&#8221; experience on your &#8220;slides&#8221;. The term &#8220;slider&#8221; doesn&#8217;t really seem like the right term for this in my opinion..</p>
<h2>The Revolution Slider Demos</h2>
<p>Here are 3 demos of the revolution slider in action. I created this slider for the demos of my WordPress theme Hipster. Check out the <a href="http://hipsterwprev.beantowndesign.com/" target="_blank">theme demo</a> to see these slider in the larger size, and to test the responsive size-adjusting it offers. You can purchase my WordPress theme on <a href="http://bit.ly/WWP7tP" target="_blank">ThemeForest</a>, The Revolution Slider comes with the theme ready to use.</p>
<h3 style="clear: both; padding-top: 20px; margin-bottom: 10px; padding-left: 10px;">Demo with shadow type 1 and arrow navigation.</h3>
								<!-- START REVOLUTION SLIDER 2.2.1 -->											<style type='text/css'>				#rev_slider_1_1, #rev_slider_1_1_wrapper { width:940px; height:401px;}									   @media only screen and (min-width: 3000px)  {			 		  #rev_slider_1_1, #rev_slider_1_1_wrapper { width:940px; height:401px;}				   }												   @media only screen and (min-width: 0px) and (max-width: 2999px) {			 		  #rev_slider_1_1, #rev_slider_1_1_wrapper { width:590px; height:251px;}				   }						</style>												<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper" style="margin:0px auto;background-color:#F5F6FA;padding:0px;margin-top:0px;margin-bottom:0px;">					<div id="rev_slider_1_1" class="rev_slider" style="display:none;">																<ul>								<li data-transition="papercut" data-slotamount="7" data-masterspeed="300" data-delay="4800" >						<img src="http://webdesignandsuch.com/wp-content/uploads/diner.jpg" alt="diner" >																		<div class="tp-caption lfb"  					 data-x="66" 					 data-y="13" 					 data-speed="650" 					 data-start="800" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/monkey.png" alt="Image 1"></div>												<div class="tp-caption big_white_league randomrotate"  					 data-x="454" 					 data-y="153" 					 data-speed="500" 					 data-start="1100" 					 data-easing="easeOutExpo"  >Welcome to Hipster!</div>												<div class="tp-caption hipster_red lfr"  					 data-x="454" 					 data-y="205" 					 data-speed="400" 					 data-start="1600" 					 data-easing="easeOutExpo"  >Responsive Awesomeness!</div>												<div class="tp-caption medium_text randomrotate"  					 data-x="730" 					 data-y="371" 					 data-speed="1000" 					 data-start="2200" 					 data-easing="easeInCirc"  >care for a tour?</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-delay="6200" >						<img src="http://webdesignandsuch.com/wp-content/uploads/slide21.jpg" alt="slide21" >																		<div class="tp-caption hipster_blue_league randomrotate"  					 data-x="74" 					 data-y="69" 					 data-speed="300" 					 data-start="1200" 					 data-easing="easeOutExpo"  >Loaded with Features</div>												<div class="tp-caption medium_black sfl"  					 data-x="75" 					 data-y="121" 					 data-speed="300" 					 data-start="2000" 					 data-easing="easeOutExpo"  >WOW Slider</div>												<div class="tp-caption medium_black sfl"  					 data-x="75" 					 data-y="152" 					 data-speed="300" 					 data-start="2300" 					 data-easing="easeOutExpo"  >Revolution Slider</div>												<div class="tp-caption medium_text sfl"  					 data-x="76" 					 data-y="190" 					 data-speed="300" 					 data-start="2600" 					 data-easing="easeOutExpo"  >Instagram Feed</div>												<div class="tp-caption medium_text sfl"  					 data-x="75" 					 data-y="261" 					 data-speed="300" 					 data-start="3200" 					 data-easing="easeOutExpo"  >Staff & Portfolio Layouts</div>												<div class="tp-caption medium_text sfl"  					 data-x="76" 					 data-y="225" 					 data-speed="300" 					 data-start="2900" 					 data-easing="easeOutExpo"  >Twitter Feed</div>												<div class="tp-caption fade"  					 data-x="645" 					 data-y="80" 					 data-speed="600" 					 data-start="700" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/lady1.png" alt="lady"></div>												<div class="tp-caption medium_text sfl"  					 data-x="75" 					 data-y="293" 					 data-speed="300" 					 data-start="3500" 					 data-easing="easeOutExpo"  >Responsive Fancybox</div>												<div class="tp-caption medium_hipster_blue sfl"  					 data-x="75" 					 data-y="328" 					 data-speed="300" 					 data-start="3800" 					 data-easing="easeOutExpo"  >Translation Ready .. Preview Data .. Google Fonts..</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="6500" data-delay="6000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/slide4.jpg" alt="slide4" >																		<div class="tp-caption lfl"  					 data-x="70" 					 data-y="49" 					 data-speed="1800" 					 data-start="700" 					 data-easing="easeOutElastic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/laptop.png" alt="Image 1"></div>												<div class="tp-caption big_white_league randomrotate"  					 data-x="619" 					 data-y="144" 					 data-speed="400" 					 data-start="900" 					 data-easing="easeOutExpo"  >Fully Responsive</div>												<div class="tp-caption medium_grey randomrotate"  					 data-x="619" 					 data-y="194" 					 data-speed="600" 					 data-start="1800" 					 data-easing="easeOutExpo"  >From Desktop</div>												<div class="tp-caption fade"  					 data-x="329" 					 data-y="28" 					 data-speed="900" 					 data-start="2600" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/mag.png" alt="Image 4"></div>												<div class="tp-caption medium_grey randomrotate"  					 data-x="621" 					 data-y="221" 					 data-speed="600" 					 data-start="3800" 					 data-easing="easeOutExpo"  >To Mobile</div>												<div class="tp-caption lfl"  					 data-x="9" 					 data-y="232" 					 data-speed="600" 					 data-start="4500" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/phone2.png" alt="Image 6"></div>												</li>									<li data-transition="slotzoom-horizontal" data-slotamount="7" data-masterspeed="300" data-delay="6000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/film.jpg" alt="film" >																		<div class="tp-caption medium_grey_league randomrotate"  					 data-x="344" 					 data-y="96" 					 data-speed="300" 					 data-start="2000" 					 data-easing="easeOutBounce"  >nice slider</div>												<div class="tp-caption very_big_white lft"  					 data-x="306" 					 data-y="149" 					 data-speed="600" 					 data-start="2800" 					 data-easing="easeOutBounce"  >But what about video??</div>												<div class="tp-caption randomrotate"  					 data-x="65" 					 data-y="14" 					 data-speed="600" 					 data-start="1000" 					 data-easing="easeInOutCirc"  ><img src="http://webdesignandsuch.com/wp-content/uploads/girl.png" alt="Image 1"></div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-delay="7200" >						<img src="http://webdesignandsuch.com/wp-content/uploads/filmbackgroundblue.jpg" alt="filmbackgroundblue" >																		<div class="tp-caption fade"  					 data-x="96" 					 data-y="66" 					 data-speed="300" 					 data-start="500" 					 data-easing="easeOutExpo"  ><iframe src='http://player.vimeo.com/video/33480080?title=0&amp;byline=0&amp;portrait=0' width='500' height='281' style='width:500px;height:281px;'></iframe></div>												<div class="tp-caption big_black lfl"  					 data-x="609" 					 data-y="200" 					 data-speed="500" 					 data-start="1100" 					 data-easing="easeOutCubic"  >Yup..</div>												<div class="tp-caption big_white lfr"  					 data-x="609" 					 data-y="242" 					 data-speed="500" 					 data-start="1600" 					 data-easing="easeOutCubic"  >Even</div>												<div class="tp-caption big_white lfl"  					 data-x="609" 					 data-y="285" 					 data-speed="500" 					 data-start="2100" 					 data-easing="easeOutCubic"  >Video :)</div>												<div class="tp-caption fade"  					 data-x="862" 					 data-y="12" 					 data-speed="800" 					 data-start="3000" 					 data-easing="easeOutCubic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/youtube.png" alt="Image 5"></div>												<div class="tp-caption fade"  					 data-x="848" 					 data-y="318" 					 data-speed="800" 					 data-start="4000" 					 data-easing="easeOutCubic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/vimeo.png" alt="Image 6"></div>												<div class="tp-caption small_text fade"  					 data-x="605" 					 data-y="326" 					 data-speed="800" 					 data-start="5000" 					 data-easing="easeOutExpo"  >(full screen video on next slide)</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" >						<img src="http://webdesignandsuch.com/wp-content/uploads/filmbackgroundblue.jpg" alt="filmbackgroundblue" >										<div class="tp-caption fade fullscreenvideo" data-autoplay="false" data-x="0" data-y="0" data-speed="500" data-start="10" data-easing="easeOutBack"><iframe src="http://player.vimeo.com/video/23199805?title=0&amp;byline=0&amp;portrait=0;api=1" width="100%" height="100%"></iframe></div>									</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-delay="12000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/grungebackground.jpg" alt="grungebackground" >																		<div class="tp-caption randomrotate"  					 data-x="87" 					 data-y="6" 					 data-speed="800" 					 data-start="1800" 					 data-easing="easeInCirc"  ><img src="http://webdesignandsuch.com/wp-content/uploads/camgirl.png" alt="Image 1"></div>												<div class="tp-caption very_large_text sfl"  					 data-x="298" 					 data-y="61" 					 data-speed="600" 					 data-start="3000" 					 data-easing="easeOutExpo"  >Get Creative.</div>												<div class="tp-caption lft"  					 data-x="302" 					 data-y="281" 					 data-speed="1200" 					 data-start="3600" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic1.png" alt="Image 3"></div>												<div class="tp-caption lft"  					 data-x="417" 					 data-y="287" 					 data-speed="1200" 					 data-start="3900" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic2.png" alt="Image 4"></div>												<div class="tp-caption lft"  					 data-x="328" 					 data-y="224" 					 data-speed="1200" 					 data-start="4200" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic3.png" alt="Image 5"></div>												<div class="tp-caption lft"  					 data-x="435" 					 data-y="201" 					 data-speed="1200" 					 data-start="4500" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic4.png" alt="Image 6"></div>												<div class="tp-caption lft"  					 data-x="299" 					 data-y="155" 					 data-speed="1200" 					 data-start="4800" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic5.png" alt="Image 7"></div>												<div class="tp-caption lft"  					 data-x="411" 					 data-y="140" 					 data-speed="1200" 					 data-start="5100" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic6.png" alt="Image 8"></div>												<div class="tp-caption lft"  					 data-x="634" 					 data-y="321" 					 data-speed="2000" 					 data-start="5400" 					 data-easing="easeOutBounce"  ><a href='http://bit.ly/WWP7tP' class='button large'>Get Hipster.</a></div>												</li>								</ul>									<div class="tp-bannertimer"></div>					</div>				</div>														<script type="text/javascript">				var tpj=jQuery;																var revapi1;								tpj(document).ready(function() {								if (tpj.fn.cssOriginal != undefined)					tpj.fn.css = tpj.fn.cssOriginal;								if(tpj('#rev_slider_1_1').revolution == undefined)					revslider_showDoubleJqueryError('#rev_slider_1_1');				else				   revapi1 = tpj('#rev_slider_1_1').show().revolution(					{						delay:5600,						startwidth:940,						startheight:401,						hideThumbs:200,												thumbWidth:100,						thumbHeight:50,						thumbAmount:5,												navigationType:"none",						navigationArrows:"nexttobullets",						navigationStyle:"round",												touchenabled:"on",						onHoverStop:"on",												navOffsetHorizontal:0,						navOffsetVertical:20,												shadow:1,						fullWidth:"off",						stopLoop:"off",						stopAfterLoops:-1,						stopAtSlide:-1,						shuffle:"off",												hideSliderAtLimit:0,						hideCaptionAtLimit:0,						hideAllCaptionAtLilmit:0					});								});	//ready							</script>										<!-- END REVOLUTION SLIDER -->				
<h3 style="clear: both; padding-top: 80px; margin-bottom: 10px; padding-left: 10px;">Demo with shadow type 2 and bullet navigation.</h3>
								<!-- START REVOLUTION SLIDER 2.2.1 -->											<style type='text/css'>				#rev_slider_2_2, #rev_slider_2_2_wrapper { width:940px; height:401px;}									   @media only screen and (min-width: 3000px)  {			 		  #rev_slider_2_2, #rev_slider_2_2_wrapper { width:940px; height:401px;}				   }												   @media only screen and (min-width: 0px) and (max-width: 2999px) {			 		  #rev_slider_2_2, #rev_slider_2_2_wrapper { width:590px; height:251px;}				   }						</style>												<div id="rev_slider_2_2_wrapper" class="rev_slider_wrapper" style="margin:0px auto;background-color:#F5F6FA;padding:0px;margin-top:0px;margin-bottom:0px;">					<div id="rev_slider_2_2" class="rev_slider" style="display:none;">																<ul>								<li data-transition="papercut" data-slotamount="7" data-masterspeed="300" data-delay="4800" >						<img src="http://webdesignandsuch.com/wp-content/uploads/diner.jpg" alt="diner" >																		<div class="tp-caption lfb"  					 data-x="66" 					 data-y="13" 					 data-speed="650" 					 data-start="800" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/monkey.png" alt="Image 1"></div>												<div class="tp-caption big_white_league randomrotate"  					 data-x="454" 					 data-y="153" 					 data-speed="500" 					 data-start="1100" 					 data-easing="easeOutExpo"  >Welcome to Hipster!</div>												<div class="tp-caption hipster_red lfr"  					 data-x="454" 					 data-y="205" 					 data-speed="400" 					 data-start="1600" 					 data-easing="easeOutExpo"  >Responsive Awesomeness!</div>												<div class="tp-caption medium_text randomrotate"  					 data-x="730" 					 data-y="371" 					 data-speed="1000" 					 data-start="2200" 					 data-easing="easeInCirc"  >care for a tour?</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-delay="6200" >						<img src="http://webdesignandsuch.com/wp-content/uploads/slide21.jpg" alt="slide21" >																		<div class="tp-caption hipster_blue_league randomrotate"  					 data-x="74" 					 data-y="69" 					 data-speed="300" 					 data-start="1200" 					 data-easing="easeOutExpo"  >Loaded with Features</div>												<div class="tp-caption medium_black sfl"  					 data-x="75" 					 data-y="121" 					 data-speed="300" 					 data-start="2000" 					 data-easing="easeOutExpo"  >WOW Slider</div>												<div class="tp-caption medium_black sfl"  					 data-x="75" 					 data-y="152" 					 data-speed="300" 					 data-start="2300" 					 data-easing="easeOutExpo"  >Revolution Slider</div>												<div class="tp-caption medium_text sfl"  					 data-x="76" 					 data-y="190" 					 data-speed="300" 					 data-start="2600" 					 data-easing="easeOutExpo"  >Instagram Feed</div>												<div class="tp-caption medium_text sfl"  					 data-x="75" 					 data-y="261" 					 data-speed="300" 					 data-start="3200" 					 data-easing="easeOutExpo"  >Staff & Portfolio Layouts</div>												<div class="tp-caption medium_text sfl"  					 data-x="76" 					 data-y="225" 					 data-speed="300" 					 data-start="2900" 					 data-easing="easeOutExpo"  >Twitter Feed</div>												<div class="tp-caption fade"  					 data-x="645" 					 data-y="80" 					 data-speed="600" 					 data-start="700" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/lady1.png" alt="lady"></div>												<div class="tp-caption medium_text sfl"  					 data-x="75" 					 data-y="293" 					 data-speed="300" 					 data-start="3500" 					 data-easing="easeOutExpo"  >Responsive Fancybox</div>												<div class="tp-caption medium_hipster_blue sfl"  					 data-x="75" 					 data-y="328" 					 data-speed="300" 					 data-start="3800" 					 data-easing="easeOutExpo"  >Translation Ready .. Preview Data .. Google Fonts..</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="6500" data-delay="6000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/slide4.jpg" alt="slide4" >																		<div class="tp-caption lfl"  					 data-x="70" 					 data-y="49" 					 data-speed="1800" 					 data-start="700" 					 data-easing="easeOutElastic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/laptop.png" alt="Image 1"></div>												<div class="tp-caption big_white_league randomrotate"  					 data-x="619" 					 data-y="144" 					 data-speed="400" 					 data-start="900" 					 data-easing="easeOutExpo"  >Fully Responsive</div>												<div class="tp-caption medium_grey randomrotate"  					 data-x="619" 					 data-y="194" 					 data-speed="600" 					 data-start="1800" 					 data-easing="easeOutExpo"  >From Desktop</div>												<div class="tp-caption fade"  					 data-x="329" 					 data-y="28" 					 data-speed="900" 					 data-start="2600" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/mag.png" alt="Image 4"></div>												<div class="tp-caption medium_grey randomrotate"  					 data-x="621" 					 data-y="221" 					 data-speed="600" 					 data-start="3800" 					 data-easing="easeOutExpo"  >To Mobile</div>												<div class="tp-caption lfl"  					 data-x="9" 					 data-y="232" 					 data-speed="600" 					 data-start="4500" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/phone2.png" alt="Image 6"></div>												</li>									<li data-transition="slotzoom-horizontal" data-slotamount="7" data-masterspeed="300" data-delay="6000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/film.jpg" alt="film" >																		<div class="tp-caption medium_grey_league randomrotate"  					 data-x="344" 					 data-y="96" 					 data-speed="300" 					 data-start="2000" 					 data-easing="easeOutBounce"  >nice slider</div>												<div class="tp-caption very_big_white lft"  					 data-x="306" 					 data-y="149" 					 data-speed="600" 					 data-start="2800" 					 data-easing="easeOutBounce"  >But what about video??</div>												<div class="tp-caption randomrotate"  					 data-x="65" 					 data-y="14" 					 data-speed="600" 					 data-start="1000" 					 data-easing="easeInOutCirc"  ><img src="http://webdesignandsuch.com/wp-content/uploads/girl.png" alt="Image 1"></div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-delay="7200" >						<img src="http://webdesignandsuch.com/wp-content/uploads/filmbackgroundblue.jpg" alt="filmbackgroundblue" >																		<div class="tp-caption fade"  					 data-x="96" 					 data-y="66" 					 data-speed="300" 					 data-start="500" 					 data-easing="easeOutExpo"  ><iframe src='http://player.vimeo.com/video/33480080?title=0&amp;byline=0&amp;portrait=0' width='500' height='281' style='width:500px;height:281px;'></iframe></div>												<div class="tp-caption big_black lfl"  					 data-x="609" 					 data-y="200" 					 data-speed="500" 					 data-start="1100" 					 data-easing="easeOutCubic"  >Yup..</div>												<div class="tp-caption big_white lfr"  					 data-x="609" 					 data-y="242" 					 data-speed="500" 					 data-start="1600" 					 data-easing="easeOutCubic"  >Even</div>												<div class="tp-caption big_white lfl"  					 data-x="609" 					 data-y="285" 					 data-speed="500" 					 data-start="2100" 					 data-easing="easeOutCubic"  >Video :)</div>												<div class="tp-caption fade"  					 data-x="862" 					 data-y="12" 					 data-speed="800" 					 data-start="3000" 					 data-easing="easeOutCubic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/youtube.png" alt="Image 5"></div>												<div class="tp-caption fade"  					 data-x="848" 					 data-y="318" 					 data-speed="800" 					 data-start="4000" 					 data-easing="easeOutCubic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/vimeo.png" alt="Image 6"></div>												<div class="tp-caption small_text fade"  					 data-x="605" 					 data-y="326" 					 data-speed="800" 					 data-start="5000" 					 data-easing="easeOutExpo"  >(full screen video on next slide)</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" >						<img src="http://webdesignandsuch.com/wp-content/uploads/filmbackgroundblue.jpg" alt="filmbackgroundblue" >										<div class="tp-caption fade fullscreenvideo" data-autoplay="false" data-x="0" data-y="0" data-speed="500" data-start="10" data-easing="easeOutBack"><iframe src="http://player.vimeo.com/video/23199805?title=0&amp;byline=0&amp;portrait=0;api=1" width="100%" height="100%"></iframe></div>									</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-delay="12000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/grungebackground.jpg" alt="grungebackground" >																		<div class="tp-caption randomrotate"  					 data-x="87" 					 data-y="6" 					 data-speed="800" 					 data-start="1800" 					 data-easing="easeInCirc"  ><img src="http://webdesignandsuch.com/wp-content/uploads/camgirl.png" alt="Image 1"></div>												<div class="tp-caption very_large_text sfl"  					 data-x="298" 					 data-y="61" 					 data-speed="600" 					 data-start="3000" 					 data-easing="easeOutExpo"  >Get Creative.</div>												<div class="tp-caption lft"  					 data-x="302" 					 data-y="281" 					 data-speed="1200" 					 data-start="3600" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic1.png" alt="Image 3"></div>												<div class="tp-caption lft"  					 data-x="417" 					 data-y="287" 					 data-speed="1200" 					 data-start="3900" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic2.png" alt="Image 4"></div>												<div class="tp-caption lft"  					 data-x="328" 					 data-y="224" 					 data-speed="1200" 					 data-start="4200" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic3.png" alt="Image 5"></div>												<div class="tp-caption lft"  					 data-x="435" 					 data-y="201" 					 data-speed="1200" 					 data-start="4500" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic4.png" alt="Image 6"></div>												<div class="tp-caption lft"  					 data-x="299" 					 data-y="155" 					 data-speed="1200" 					 data-start="4800" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic5.png" alt="Image 7"></div>												<div class="tp-caption lft"  					 data-x="411" 					 data-y="140" 					 data-speed="1200" 					 data-start="5100" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic6.png" alt="Image 8"></div>												<div class="tp-caption lft"  					 data-x="634" 					 data-y="321" 					 data-speed="2000" 					 data-start="5400" 					 data-easing="easeOutBounce"  ><a href='http://bit.ly/WWP7tP' class='button large'>Get Hipster.</a></div>												</li>								</ul>									<div class="tp-bannertimer"></div>					</div>				</div>														<script type="text/javascript">				var tpj=jQuery;																var revapi2;								tpj(document).ready(function() {								if (tpj.fn.cssOriginal != undefined)					tpj.fn.css = tpj.fn.cssOriginal;								if(tpj('#rev_slider_2_2').revolution == undefined)					revslider_showDoubleJqueryError('#rev_slider_2_2');				else				   revapi2 = tpj('#rev_slider_2_2').show().revolution(					{						delay:5600,						startwidth:940,						startheight:401,						hideThumbs:200,												thumbWidth:100,						thumbHeight:50,						thumbAmount:5,												navigationType:"bullet",						navigationArrows:"nexttobullets",						navigationStyle:"round-old",												touchenabled:"on",						onHoverStop:"on",												navOffsetHorizontal:0,						navOffsetVertical:20,												shadow:2,						fullWidth:"off",						stopLoop:"off",						stopAfterLoops:-1,						stopAtSlide:-1,						shuffle:"off",												hideSliderAtLimit:0,						hideCaptionAtLimit:0,						hideAllCaptionAtLilmit:0					});								});	//ready							</script>										<!-- END REVOLUTION SLIDER -->				
<h3 style="clear: both; padding-top: 80px; margin-bottom: 10px; padding-left: 10px;">Demo with shadow type 3 and thumbnail navigation.</h3>
								<!-- START REVOLUTION SLIDER 2.2.1 -->											<style type='text/css'>				#rev_slider_3_3, #rev_slider_3_3_wrapper { width:940px; height:401px;}									   @media only screen and (min-width: 3000px)  {			 		  #rev_slider_3_3, #rev_slider_3_3_wrapper { width:940px; height:401px;}				   }												   @media only screen and (min-width: 0px) and (max-width: 2999px) {			 		  #rev_slider_3_3, #rev_slider_3_3_wrapper { width:590px; height:251px;}				   }						</style>												<div id="rev_slider_3_3_wrapper" class="rev_slider_wrapper" style="margin:0px auto;background-color:#F5F6FA;padding:0px;margin-top:0px;margin-bottom:0px;">					<div id="rev_slider_3_3" class="rev_slider" style="display:none;">																<ul>								<li data-transition="papercut" data-slotamount="7" data-masterspeed="300" data-thumb="http://webdesignandsuch.com/wp-content/uploads/thumb12.jpg" data-delay="4800" >						<img src="http://webdesignandsuch.com/wp-content/uploads/diner.jpg" alt="diner" >																		<div class="tp-caption lfb"  					 data-x="66" 					 data-y="13" 					 data-speed="650" 					 data-start="800" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/monkey.png" alt="Image 1"></div>												<div class="tp-caption big_white_league randomrotate"  					 data-x="454" 					 data-y="153" 					 data-speed="500" 					 data-start="1100" 					 data-easing="easeOutExpo"  >Welcome to Hipster!</div>												<div class="tp-caption hipster_red lfr"  					 data-x="454" 					 data-y="205" 					 data-speed="400" 					 data-start="1600" 					 data-easing="easeOutExpo"  >Responsive Awesomeness!</div>												<div class="tp-caption medium_text randomrotate"  					 data-x="730" 					 data-y="371" 					 data-speed="1000" 					 data-start="2200" 					 data-easing="easeInCirc"  >care for a tour?</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-thumb="http://webdesignandsuch.com/wp-content/uploads/thumb22.jpg" data-delay="6200" >						<img src="http://webdesignandsuch.com/wp-content/uploads/slide21.jpg" alt="slide21" >																		<div class="tp-caption hipster_blue_league randomrotate"  					 data-x="74" 					 data-y="69" 					 data-speed="300" 					 data-start="1200" 					 data-easing="easeOutExpo"  >Loaded with Features</div>												<div class="tp-caption medium_black sfl"  					 data-x="75" 					 data-y="121" 					 data-speed="300" 					 data-start="2000" 					 data-easing="easeOutExpo"  >WOW Slider</div>												<div class="tp-caption medium_black sfl"  					 data-x="75" 					 data-y="152" 					 data-speed="300" 					 data-start="2300" 					 data-easing="easeOutExpo"  >Revolution Slider</div>												<div class="tp-caption medium_text sfl"  					 data-x="76" 					 data-y="190" 					 data-speed="300" 					 data-start="2600" 					 data-easing="easeOutExpo"  >Instagram Feed</div>												<div class="tp-caption medium_text sfl"  					 data-x="75" 					 data-y="261" 					 data-speed="300" 					 data-start="3200" 					 data-easing="easeOutExpo"  >Staff & Portfolio Layouts</div>												<div class="tp-caption medium_text sfl"  					 data-x="76" 					 data-y="225" 					 data-speed="300" 					 data-start="2900" 					 data-easing="easeOutExpo"  >Twitter Feed</div>												<div class="tp-caption fade"  					 data-x="645" 					 data-y="80" 					 data-speed="600" 					 data-start="700" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/lady1.png" alt="lady"></div>												<div class="tp-caption medium_text sfl"  					 data-x="75" 					 data-y="293" 					 data-speed="300" 					 data-start="3500" 					 data-easing="easeOutExpo"  >Responsive Fancybox</div>												<div class="tp-caption medium_hipster_blue sfl"  					 data-x="75" 					 data-y="328" 					 data-speed="300" 					 data-start="3800" 					 data-easing="easeOutExpo"  >Translation Ready .. Preview Data .. Google Fonts..</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="6500" data-thumb="http://webdesignandsuch.com/wp-content/uploads/thumb31.jpg" data-delay="6000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/slide4.jpg" alt="slide4" >																		<div class="tp-caption lfl"  					 data-x="70" 					 data-y="49" 					 data-speed="1800" 					 data-start="700" 					 data-easing="easeOutElastic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/laptop.png" alt="Image 1"></div>												<div class="tp-caption big_white_league randomrotate"  					 data-x="619" 					 data-y="144" 					 data-speed="400" 					 data-start="900" 					 data-easing="easeOutExpo"  >Fully Responsive</div>												<div class="tp-caption medium_grey randomrotate"  					 data-x="619" 					 data-y="194" 					 data-speed="600" 					 data-start="1800" 					 data-easing="easeOutExpo"  >From Desktop</div>												<div class="tp-caption fade"  					 data-x="329" 					 data-y="28" 					 data-speed="900" 					 data-start="2600" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/mag.png" alt="Image 4"></div>												<div class="tp-caption medium_grey randomrotate"  					 data-x="621" 					 data-y="221" 					 data-speed="600" 					 data-start="3800" 					 data-easing="easeOutExpo"  >To Mobile</div>												<div class="tp-caption lfl"  					 data-x="9" 					 data-y="232" 					 data-speed="600" 					 data-start="4500" 					 data-easing="easeOutExpo"  ><img src="http://webdesignandsuch.com/wp-content/uploads/phone2.png" alt="Image 6"></div>												</li>									<li data-transition="slotzoom-horizontal" data-slotamount="7" data-masterspeed="300" data-thumb="http://webdesignandsuch.com/wp-content/uploads/thumb4.jpg" data-delay="6000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/film.jpg" alt="film" >																		<div class="tp-caption medium_grey_league randomrotate"  					 data-x="344" 					 data-y="96" 					 data-speed="300" 					 data-start="2000" 					 data-easing="easeOutBounce"  >nice slider</div>												<div class="tp-caption very_big_white lft"  					 data-x="306" 					 data-y="149" 					 data-speed="600" 					 data-start="2800" 					 data-easing="easeOutBounce"  >But what about video??</div>												<div class="tp-caption randomrotate"  					 data-x="65" 					 data-y="14" 					 data-speed="600" 					 data-start="1000" 					 data-easing="easeInOutCirc"  ><img src="http://webdesignandsuch.com/wp-content/uploads/girl.png" alt="Image 1"></div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-thumb="http://webdesignandsuch.com/wp-content/uploads/thumb51.jpg" data-delay="7200" >						<img src="http://webdesignandsuch.com/wp-content/uploads/filmbackgroundblue.jpg" alt="filmbackgroundblue" >																		<div class="tp-caption fade"  					 data-x="96" 					 data-y="66" 					 data-speed="300" 					 data-start="500" 					 data-easing="easeOutExpo"  ><iframe src='http://player.vimeo.com/video/33480080?title=0&amp;byline=0&amp;portrait=0' width='500' height='281' style='width:500px;height:281px;'></iframe></div>												<div class="tp-caption big_black lfl"  					 data-x="609" 					 data-y="200" 					 data-speed="500" 					 data-start="1100" 					 data-easing="easeOutCubic"  >Yup..</div>												<div class="tp-caption big_white lfr"  					 data-x="609" 					 data-y="242" 					 data-speed="500" 					 data-start="1600" 					 data-easing="easeOutCubic"  >Even</div>												<div class="tp-caption big_white lfl"  					 data-x="609" 					 data-y="285" 					 data-speed="500" 					 data-start="2100" 					 data-easing="easeOutCubic"  >Video :)</div>												<div class="tp-caption fade"  					 data-x="862" 					 data-y="12" 					 data-speed="800" 					 data-start="3000" 					 data-easing="easeOutCubic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/youtube.png" alt="Image 5"></div>												<div class="tp-caption fade"  					 data-x="848" 					 data-y="318" 					 data-speed="800" 					 data-start="4000" 					 data-easing="easeOutCubic"  ><img src="http://webdesignandsuch.com/wp-content/uploads/vimeo.png" alt="Image 6"></div>												<div class="tp-caption small_text fade"  					 data-x="605" 					 data-y="326" 					 data-speed="800" 					 data-start="5000" 					 data-easing="easeOutExpo"  >(full screen video on next slide)</div>												</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-thumb="http://webdesignandsuch.com/wp-content/uploads/thumb61.jpg" >						<img src="http://webdesignandsuch.com/wp-content/uploads/filmbackgroundblue.jpg" alt="filmbackgroundblue" >										<div class="tp-caption fade fullscreenvideo" data-autoplay="true" data-x="0" data-y="0" data-speed="500" data-start="10" data-easing="easeOutBack"><iframe src="http://player.vimeo.com/video/23199805?title=0&amp;byline=0&amp;portrait=0;api=1" width="100%" height="100%"></iframe></div>									</li>									<li data-transition="random" data-slotamount="7" data-masterspeed="300" data-thumb="http://webdesignandsuch.com/wp-content/uploads/thumb71.jpg" data-delay="12000" >						<img src="http://webdesignandsuch.com/wp-content/uploads/grungebackground.jpg" alt="grungebackground" >																		<div class="tp-caption randomrotate"  					 data-x="87" 					 data-y="6" 					 data-speed="800" 					 data-start="1800" 					 data-easing="easeInCirc"  ><img src="http://webdesignandsuch.com/wp-content/uploads/camgirl.png" alt="Image 1"></div>												<div class="tp-caption very_large_text sfl"  					 data-x="298" 					 data-y="61" 					 data-speed="600" 					 data-start="3000" 					 data-easing="easeOutExpo"  >Get Creative.</div>												<div class="tp-caption lft"  					 data-x="302" 					 data-y="281" 					 data-speed="1200" 					 data-start="3600" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic1.png" alt="Image 3"></div>												<div class="tp-caption lft"  					 data-x="417" 					 data-y="287" 					 data-speed="1200" 					 data-start="3900" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic2.png" alt="Image 4"></div>												<div class="tp-caption lft"  					 data-x="328" 					 data-y="224" 					 data-speed="1200" 					 data-start="4200" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic3.png" alt="Image 5"></div>												<div class="tp-caption lft"  					 data-x="435" 					 data-y="201" 					 data-speed="1200" 					 data-start="4500" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic4.png" alt="Image 6"></div>												<div class="tp-caption lft"  					 data-x="299" 					 data-y="155" 					 data-speed="1200" 					 data-start="4800" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic5.png" alt="Image 7"></div>												<div class="tp-caption lft"  					 data-x="411" 					 data-y="140" 					 data-speed="1200" 					 data-start="5100" 					 data-easing="easeOutBounce"  ><img src="http://webdesignandsuch.com/wp-content/uploads/pic6.png" alt="Image 8"></div>												<div class="tp-caption lft"  					 data-x="634" 					 data-y="321" 					 data-speed="2000" 					 data-start="5400" 					 data-easing="easeOutBounce"  ><a href='http://bit.ly/WWP7tP' class='button large'>Get Hipster.</a></div>												</li>								</ul>									<div class="tp-bannertimer"></div>					</div>				</div>														<script type="text/javascript">				var tpj=jQuery;																var revapi3;								tpj(document).ready(function() {								if (tpj.fn.cssOriginal != undefined)					tpj.fn.css = tpj.fn.cssOriginal;								if(tpj('#rev_slider_3_3').revolution == undefined)					revslider_showDoubleJqueryError('#rev_slider_3_3');				else				   revapi3 = tpj('#rev_slider_3_3').show().revolution(					{						delay:5600,						startwidth:940,						startheight:401,						hideThumbs:200,												thumbWidth:75,						thumbHeight:38,						thumbAmount:5,												navigationType:"thumb",						navigationArrows:"nexttobullets",						navigationStyle:"round",												touchenabled:"on",						onHoverStop:"on",												navOffsetHorizontal:0,						navOffsetVertical:20,												shadow:3,						fullWidth:"off",						stopLoop:"off",						stopAfterLoops:-1,						stopAtSlide:-1,						shuffle:"off",												hideSliderAtLimit:0,						hideCaptionAtLimit:0,						hideAllCaptionAtLilmit:0					});								});	//ready							</script>										<!-- END REVOLUTION SLIDER -->				
<h2 style="clear: both; padding-top: 50px;">The Revolution Slider Instructions</h2>
<p><strong>How to install The Revolution Slider plugin</strong></p>
<ul>
<li>Go to the Plugins section in the WordPress menu</li>
<li>Click on the &#8220;Add New&#8221; button</li>
<li>Click on &#8220;Upload&#8221;</li>
<li>Click on &#8220;Choose File&#8221; (choose the revslider.zip which you downloaded from <a href="http://goo.gl/vEjKP?ref=beantowndesign" target="_blank">CodeCanyon</a>), then click the &#8220;Install Now&#8221; button</li>
<li>A new page will load; click on &#8220;Activate Plugin&#8221;</li>
<li>A new section named &#8220;Revolution Slider&#8221; will appear in the WordPress menu to the left</li>
</ul>
<p><strong>How to use The Revolution Slider</strong><br />
The basic steps of using The Revolution Slider are as follows:</p>
<ul>
<li>Create a new slider</li>
<li>Add slides (by uploading the background image for each slide)</li>
<li>Customize each slide (add layers with text, images, videos)</li>
<li>Put the slider on a page by pasting the shortcode into the page editor</li>
</ul>
<p>For detailed instructions on using The Revolution Slider open the file READ_ME.html included with the plugin. This is the documentation from the plugin developer, Theme Punch. There is a helpful video below from the plugin developer.</p>
<p><iframe width="500" height="281" src="http://www.youtube.com/embed/cVleysEPHM4?feature=oembed" frameborder="0" allowfullscreen></iframe></p>
<p><strong>Hipster Theme / Revolution Slider</strong></p>
<p>If you are using the slider with my <a href="http://bit.ly/WWP7tP" target="_blank">Hipster theme</a> you will want to use the settings below so it resizes properly (this is for a full width slider like in the <a href="http://hipsterwprev.beantowndesign.com/" target="_blank">demo</a>). The Hipster theme was built on the popular Skeleton responsive framework, so these setting will most likely work if you are building it into a different theme built on the same framework. There are a few specific settings that you should use when using the Revolution Slider with Hipster. After you create you slider, set the following numbers in the left column..</p>
<p><img class="alignnone size-full wp-image-4364" alt="jquery responsive revolution slider" src="http://webdesignandsuch.com/wp-content/uploads/rev.jpg" width="590" height="378" /></p>
<p>In the right column make sure to set the following:</p>
<p><img class="alignnone size-full wp-image-4365" alt="revolution sldier" src="http://webdesignandsuch.com/wp-content/uploads/rev2.jpg" width="329" height="226" /></p>
<p>After you have those settings you are ready to go. Create your slides and get creative! Use the cheat sheet below:</p>
<p><img class="alignnone size-full wp-image-4366" alt="responsive jquery slider" src="http://webdesignandsuch.com/wp-content/uploads/rev3.jpg" width="590" height="889" /></p>
<p>I&#8217;m sure you&#8217;ll be as impressed as I am with how easy setting up your own slider with The Revolution Slider is, you&#8217;re really only restricted by your creativity.. <em>have fun!</em></p>
<p><strong>Resources:</strong><br />
<a href="http://goo.gl/vEjKP?ref=beantowndesign" target="_blank">The Revolution Slider</a><br />
<a href="http://goo.gl/Ws7o4" target="_blank">Images from PhotoDune</a><br />
<a href="http://bit.ly/WWP7tP" target="_blank">&#8216;Hipster&#8217; WordPress Theme</a></p>
<p><a href="http://bit.ly/WWP7tP" target="_blank"><img class="alignnone size-full wp-image-4403" alt="hipster" src="http://webdesignandsuch.com/wp-content/uploads/hipster1.jpg" width="590" height="300" /></a></p>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/208QYr1Rn_Y" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/jquery-revolution-slider-steve-jobs-would-be-proud/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/jquery-revolution-slider-steve-jobs-would-be-proud/</feedburner:origLink></item>
		<item>
		<title>Use Custom Field as Page Title if it Exists WordPress</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/0OBUh8TQtkM/</link>
		<comments>http://webdesignandsuch.com/use-custom-field-as-page-title-if-it-exists-wordpress/#comments</comments>
		<pubDate>Mon, 04 Feb 2013 15:00:10 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4242</guid>
		<description><![CDATA[Here is a simple way to display the value of a custom field with the slug "heading" if it exists, if the custom field is empty the page title will be displayed.]]></description>
				<content:encoded><![CDATA[<p>Here is a simple way to display the value of a custom field with the slug &#8220;heading&#8221; if it exists, if the custom field is empty the page title will be displayed. This is a simple way to give people the option to tweak the page title displayed on the page without changing the name of the page.</p>
<pre class="brush: php; title: ; notranslate">&lt;h1&gt;&lt;?php if( get_post_meta($post-&gt;ID, 'heading', true) ) {
meta('heading');
}
else {
the_title();
}
?&gt;&lt;/h1&gt;</pre>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/0OBUh8TQtkM" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/use-custom-field-as-page-title-if-it-exists-wordpress/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/use-custom-field-as-page-title-if-it-exists-wordpress/</feedburner:origLink></item>
		<item>
		<title>4 Free Magnifying Glass Loupe Photoshop PSD Files</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/kLql2Lel060/</link>
		<comments>http://webdesignandsuch.com/4-free-magnifying-glass-loupe-photoshop-psd-files-for-layouts/#comments</comments>
		<pubDate>Sat, 02 Feb 2013 19:02:21 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[Photoshop]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[Slider]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4248</guid>
		<description><![CDATA[A collection of 4 free magnifying glass / loupe photoshop psd files for your next layout. A few even use smart layers to do the magnification for you!]]></description>
				<content:encoded><![CDATA[<p>If you&#8217;re trying to draw attention to a certain part of a layout having a nice magnifying glass or loop is a great way to zoom in. Common with product layouts and theme developers, like the example below.<br />
<a href="http://goo.gl/hwgCU" target="_blank"><img class="alignnone size-full wp-image-4254" alt="hipster retro wordpress theme" src="http://webdesignandsuch.com/wp-content/uploads/hipster-loupe.png" width="590" height="370" /></a></p>
<p>Here are 4 nice looking free magnifying glass / loupe photoshop psd files for your next layout. A few even use smart layers to do the magnification for you!</p>
<h2>1. <a href="http://blog.ninetofive.me/psd-freebies/magnifying-glass/" target="_blank">Magnifying Glass Thingy</a></h2>
<p><a href="http://blog.ninetofive.me/psd-freebies/magnifying-glass/" target="_blank"> <img class="alignnone size-full wp-image-4253" alt="magnify" src="http://webdesignandsuch.com/wp-content/uploads/magnify.png" width="588" height="294" /></a></p>
<h2>2. <a href="http://www.premiumpixels.com/freebies/loupe-screenshot-magnifying-thingy/" target="_blank">Loupe: Screenshot Magnifying Thingy</a></h2>
<p><a href="http://www.premiumpixels.com/freebies/loupe-screenshot-magnifying-thingy/" target="_blank"><img class="alignnone size-full wp-image-4252" alt="premium-pixels-loupe-psd" src="http://webdesignandsuch.com/wp-content/uploads/premium-pixels-loupe-psd.jpg" width="589" height="280" /></a></p>
<h2>3. <a href="http://thetismedia.webdesignvictoriabc.com/free-magnifying-glass-psd" target="_blank">Free Magnifying Glass Psd</a></h2>
<p><a href="http://thetismedia.webdesignvictoriabc.com/free-magnifying-glass-psd" target="_blank"><img class="alignnone size-full wp-image-4251" alt="magnify me psd" src="http://webdesignandsuch.com/wp-content/uploads/magnify-me-psd.jpg" width="582" height="260" /></a></p>
<h2>4. <a href="http://www.pixeden.com/psd-web-elements/magnifying-loupe-psd" target="_blank">Magnifying Loupe Psd </a></h2>
<p><a href="http://www.pixeden.com/psd-web-elements/magnifying-loupe-psd" target="_blank"><img class="alignnone size-full wp-image-4250" alt="free loupe psd" src="http://webdesignandsuch.com/wp-content/uploads/free-loupe-psd.jpg" width="586" height="311" /></a></p>
<h2>5. <a href="http://goo.gl/66nDe" target="_blank">Magnifying Loupe </a></h2>
<p><em>*this one cost $3</em><br />
<a href="http://goo.gl/66nDe" target="_blank"><img class="alignnone size-full wp-image-4264" alt="loupe" src="http://webdesignandsuch.com/wp-content/uploads/loupe.jpg" width="590" height="328" /></a></p>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/kLql2Lel060" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/4-free-magnifying-glass-loupe-photoshop-psd-files-for-layouts/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/4-free-magnifying-glass-loupe-photoshop-psd-files-for-layouts/</feedburner:origLink></item>
		<item>
		<title>12 jQuery Notification Bar Options like the Hello Bar</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/DqSaCe6GZoI/</link>
		<comments>http://webdesignandsuch.com/12-jquery-notification-bar-options-like-the-hello-bar/#comments</comments>
		<pubDate>Thu, 31 Jan 2013 15:00:08 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[Resources]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=3393</guid>
		<description><![CDATA[The Hello Bar was one of the original notification bar options, but now there are a variety of others, lets take a look!]]></description>
				<content:encoded><![CDATA[<p>A Notification bar is a simple way to grab some extra attention on your website. The Hello Bar was one of the originals, but now there are a variety of options, some premium and some free, lets take a look!</p>
<h2>1. <a href="http://goo.gl/B6K9I" target="_blank">Foobar WordPress Plugin</a></h2>
<p>The Foobar is agreat WordPress notification bar option, with tons of options in the admin.<br />
<a href="http://goo.gl/B6K9I" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/foobar-wordpress.png" alt="foobar wordpress" width="590" height="300" class="alignnone size-full wp-image-4214" /></a></p>
<h2>2. <a href="http://goo.gl/DrT2v" target="_blank">attentionGrabber: WordPress Notification Bar</a></h2>
<p>Another WordPress notification bar option.<br />
<a href="http://goo.gl/DrT2v" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/attentiongrabber.png" alt="attentiongrabber" width="590" height="300" class="alignnone size-full wp-image-4213" /></a></p>
<h2>3. <a href="http://goo.gl/5EGxQ" target="_blank">EZ Notification Bar </a></h2>
<p><a href="http://goo.gl/5EGxQ" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/ezngbig.jpg" alt="ezngbig" width="590" height="300" class="alignnone size-full wp-image-4212" /></a></p>
<h2>4. <a href="http://goo.gl/MwjeP" target="_blank">jQuery Message Bar</a></h2>
<p><a href="http://goo.gl/MwjeP" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/jquery-bar.jpg" alt="jquery-bar" width="590" height="300" class="alignnone size-full wp-image-4211" /></a></p>
<h2>5. <a href="http://www.toddmotto.com/jbar-plugin-the-jquery-call-to-action-bar" target="_blank">jBar</a></h2>
<p><a href="http://www.toddmotto.com/jbar-plugin-the-jquery-call-to-action-bar" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/jbar.jpg" alt="jbar" width="590" height="300" class="alignnone size-full wp-image-4210" /></a></p>
<h2>6. <a href="http://www.hellobar.com/" target="_blank">Hello Bar</a></h2>
<p>The original notification bar. Great stats, way overpriced.<br />
<a href="http://www.hellobar.com/" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/hellobar.png" alt="hellobar" width="564" height="286" class="alignnone size-full wp-image-4209" /></a></p>
<h2>7. <a href="http://www.hellobar.com/solo/" target="_blank">Hello Bar Solo</a></h2>
<p>The result of the Hellobar being overpriced, they created a &#8216;one time purchase&#8217; bar for developers.<br />
<a href="http://www.hellobar.com/solo/" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/hellobar-solo.png" alt="hellobar solo" width="596" height="177" class="alignnone size-full wp-image-4208" /></a></p>
<h2>8. <a href="http://leo.dolcepixels.com/archive/jquery/plugins/jquery.howdydo-bar/index.html" target="_blank">Howdy-do Bar</a></h2>
<p>One BIG ole bar.<br />
<a href="http://leo.dolcepixels.com/archive/jquery/plugins/jquery.howdydo-bar/index.html" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/howdy-bar.png" alt="howdy-bar" width="506" height="241" class="alignnone size-full wp-image-4207" /></a></p>
<h2>9. <a href="http://www.viperchill.com/viperbar/" target="_blank">ViperBar</a></h2>
<p><a href="http://www.viperchill.com/viperbar/" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/viperbar.jpg" alt="viperbar" width="590" height="90" class="alignnone size-full wp-image-4206" /></a></p>
<h2>10. <a href="http://wordpress.org/extend/plugins/easy-heads-up-bar/screenshots/" target="_blank">Easy Heads Up Bar</a></h2>
<p>Quick, easy, and free.<br />
<a href="http://wordpress.org/extend/plugins/easy-heads-up-bar/screenshots/" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/headsup.png" alt="headsup" width="551" height="349" class="alignnone size-full wp-image-4205" /></a></p>
<h2>11. <a href="http://wordpress.org/extend/plugins/quick-notice/" target="_blank">Quick Notice Bar</a></h2>
<p><a href="http://wordpress.org/extend/plugins/quick-notice/" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/quick.jpg" alt="quick" width="590" height="191" class="alignnone size-full wp-image-4204" /></a></p>
<h2>12. <a href="http://www.notifysnack.com/" target="_blank">NotifySnack</a></h2>
<p>Just stumbled across this option, nice site, not sure about the bars..<br />
<a href="http://www.notifysnack.com/" target="_blank"><img src="http://webdesignandsuch.com/wp-content/uploads/notifysnack.jpg" alt="notifysnack" width="500" height="272" class="alignnone size-full wp-image-4216" /></a></p>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/DqSaCe6GZoI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/12-jquery-notification-bar-options-like-the-hello-bar/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/12-jquery-notification-bar-options-like-the-hello-bar/</feedburner:origLink></item>
		<item>
		<title>An Introduction to WordPress Plugins</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/HDvVldTD1DI/</link>
		<comments>http://webdesignandsuch.com/an-introduction-to-wordpress-plugins/#comments</comments>
		<pubDate>Wed, 30 Jan 2013 13:00:46 +0000</pubDate>
		<dc:creator>Susan</dc:creator>
				<category><![CDATA[WordPress]]></category>
		<category><![CDATA[blogVault]]></category>
		<category><![CDATA[introduction]]></category>
		<category><![CDATA[Plugin]]></category>
		<category><![CDATA[what is]]></category>
		<category><![CDATA[WordPress Backup]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4096</guid>
		<description><![CDATA[WordPress Plugin 101 By Susan Lean is in vogue now, especially on the internet. Blame the addiction on Google &#8211; this addiction to accessing information in less than a blink [...]]]></description>
				<content:encoded><![CDATA[<h3>WordPress Plugin 101</h3>
<p>By Susan</p>
<h4><em>Lean is in vogue now, especially on the internet.</em></h4>
<p><strong>Blame the addiction on Google</strong> &#8211; this addiction to accessing information in less than a blink of an eye, literally less than 400 milliseconds. The smart people at WordPress foresaw our growing impatience with slow loading sites, and so designed the core WordPress platform to be lean and minimalistic, while offering maximum flexibility.</p>
<p>A basic WordPress site is a functioning site that should load quite fast on the internet. You can add content, pages and pictures. But what if you want to add some additional functionality, such as linking your Twitter and Facebook profile to your site? Or feature a list of your top blog posts on the homepage? On the face of it, this seems impossible to execute on a basic WordPress site. But a look under the hood and you will find that you can make your WordPress site do almost anything you want it to, using WordPress Plugins.  </p>
<p>WordPress Plugins are small applications that are created by independent developers, to expand the functionality of WordPress. Plugins augment existing WordPress functionality, and literally, plug into the site very easily. For example, there is a plugin that will help you optimize your site for search engines. There is another one that will help you manage spam, or one that enables you to add multiple contact forms to your site, or one that enables your site to be easily viewed on a mobile device, another one that enables visitors to easily share content from your site, or a shopping cart plugin. There are three plugins that are prepackaged with every WordPress installation.</p>
<h2><a href="http://wordpress.org/extend/plugins/akismet/" target="_blank">Akismet</a></h2>
<p> &#8211; checks comments to see if they are spam.<br />
<img src="http://webdesignandsuch.com/wp-content/uploads/askimet.jpg" alt="askimet" width="772" height="250" class="alignnone size-full wp-image-4192" /></p>
<h2><a href="http://wordpress.org/extend/plugins/hello-dolly/" target="_blank">Hello Dolly</a></h2>
<p> &#8211; This is the world&#8217;s first official WordPress Plugin. It doesn’t do anything fancy, just displays a random lyric from the Louis Armstrong’s song in the upper right corner of the Admin page.<img src="http://webdesignandsuch.com/wp-content/uploads/hello-dolly-plugin.jpg" alt="hello-dolly-plugin" width="772" height="250" class="alignnone size-full wp-image-4190" /></p>
<h2><a href="http://wordpress.org/extend/plugins/jetpack/" target="_blank">JetPack</a></h2>
<p> &#8211; supercharges hosted WordPress sites with useful features like site statistics, social media comments, subscriptions spelling and grammar tools and much more.<br />
<img src="http://webdesignandsuch.com/wp-content/uploads/jetpack.jpg" alt="jetpack plugin" width="772" height="250" class="alignnone size-full wp-image-4191" /></p>
<p>These plugins, along with thousands of other useful ones are listed in the official <a href="http://wordpress.org/extend/plugins/" target="_blank">WordPress Plugin Directory</a>. The Directory is vast and contains over 21,000 plugins. So before you reach for the phone to call that developer to create custom functionality for your site, take a look at the Plugin Directory, as you will most probably find what you need there.</p>
<p>Here are some helpful videos that describe the concept of plugins  &#8211; <a href="http://youtu.be/4WCuRhdT5-4" target="_blank">http://youtu.be/4WCuRhdT5-4</a> or <a href="http://youtu.be/4T-WRaTEDdE" target="_blank">http://youtu.be/4T-WRaTEDdE</a></p>
<p>Susan is with <a href="http://blogvault.net/" target="_blank">blogVault</a>, a Premium WordPress Backup Service</p>
<p>Check out <a href="http://goo.gl/kHRXr" target="_blank">CodeCanyon</a> for a variety of premium WordPress plugins!</p>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/HDvVldTD1DI" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/an-introduction-to-wordpress-plugins/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/an-introduction-to-wordpress-plugins/</feedburner:origLink></item>
		<item>
		<title>Add HTML Text Support to the Alien WP Responsive Slider WordPress plugin</title>
		<link>http://feedproxy.google.com/~r/webdesignandsuch/~3/sAJaxVD1Alw/</link>
		<comments>http://webdesignandsuch.com/add-html-text-support-to-alien-wp-responsive-slider-wordpress-plugin/#comments</comments>
		<pubDate>Tue, 29 Jan 2013 15:18:27 +0000</pubDate>
		<dc:creator>mike ilz</dc:creator>
				<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">http://webdesignandsuch.com/?p=4183</guid>
		<description><![CDATA[The responsive slider WordPress plugin called &#8220;responsive slider&#8221; by alienwp.com which is free and available at the WordPress plugin site http://wordpress.org/extend/plugins/responsive-slider/ is a great easy to setup plugin. The one [...]]]></description>
				<content:encoded><![CDATA[<p>The responsive slider WordPress plugin called &#8220;responsive slider&#8221; by alienwp.com which is free and available at the WordPress plugin site <a href="http://wordpress.org/extend/plugins/responsive-slider/" target="_blank">http://wordpress.org/extend/plugins/responsive-slider/</a> is a great easy to setup plugin. The one thing it&#8217;s missing is the ability to add a text blurb over the slides. Here is a quick way to add that functioanlity to the plugin. </p>
<p>Open the file responsive-slider.php included with the download. Replace it with the following code:</p>
<pre class="brush: php; title: ; notranslate">&lt;?php
/**
 * Plugin Name: Responsive Slider
 * Plugin URI: http://alienwp.com/plugins/responsive-slider
 * Description: A responsive content slider for integrating into themes via a simple shortcode.
 * Version: 0.1.8
 * Author: AlienWP
 * Author URI: http://alienwp.com
 *
 * The Responsive Slider plugin allows users to create slides that consist of linked (to any url) images and titles.
 * The slider would then take those slides and present them as a jQuery-powered slideshow - at a chosen location within a theme, page, or post.
 *
 * @copyright 2012
 * @version 0.1.8
 * @author AlienWP
 * @link http://alienwp.com/plugins/responsive-slider
 * @license http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
 *
 * @package Responsive Slider
 */

/* Setup the plugin. */
add_action( 'plugins_loaded', 'responsive_slider_setup' );

/* Register plugin activation hook. */
register_activation_hook( __FILE__, 'responsive_slider_activation' );
	
/* Register plugin activation hook. */
register_deactivation_hook( __FILE__, 'responsive_slider_deactivation' );

/* Register plugin activation hook. */
register_uninstall_hook( __FILE__, 'responsive_slider_uninstall' );

/**
 * Setup function.
 *
 */
function responsive_slider_setup() {

	/* Load translations on the backend. */
	if ( is_admin() )
		load_plugin_textdomain( 'responsive-slider', false, 'responsive-slider/languages' );	

	/* Get the plugin directory URI. */
	define( 'RESPONSIVE_SLIDER_URI', trailingslashit( plugin_dir_url( __FILE__ ) ) );
	
	/* Register the custom post types. */
	add_action( 'init', 'responsive_slider_register_cpt' );

	/* Register the shortcodes. */
	add_action( 'init', 'responsive_slider_register_shortcode' );

	/* Enqueue the stylesheet. */
	add_action( 'template_redirect', 'responsive_slider_enqueue_stylesheets' );
	
	/* Enqueue the admin stylesheet. */
	add_action( 'admin_enqueue_scripts', 'responsive_slider_enqueue_admin_stylesheets' );

	/* Enqueue the JavaScript. */
	add_action( 'template_redirect', 'responsive_slider_enqueue_scripts' );
	
	/* Custom post type icon. */
	add_action( 'admin_head', 'responsive_slider_cpt_icon' );		
	
	/* Add image sizes */
	add_action( 'init', 'responsive_slider_image_sizes' );
	
	/* Add meta box for slides. */
	add_action( 'add_meta_boxes', 'responsive_slider_create_slide_metaboxes' );
	
	/* Save meta box data. */
	add_action( 'save_post', 'responsive_slider_save_meta', 1, 2 );
	
	/* Edit post editor meta boxes. */
	add_action('do_meta_boxes', 'responsive_slider_edit_metaboxes');
	
	/* Add 'Settings' submenu to 'Slides'.*/
	add_action('admin_menu', 'responsive_slider_settings');
	
	/* Register and define the slider settings. */
	add_action( 'admin_init', 'responsive_slider_settings_init' );
	
	/* Edit slide columns in 'all_items' view.  */
	add_filter( 'manage_edit-slides_columns', 'responsive_slider_columns' );
	
	/* Add slide-specific columns to the 'all_items' view. */
	add_action( 'manage_posts_custom_column', 'responsive_slider_add_columns' );
	
	/* Order the slides by the 'order' attribute in the 'all_items' column view. */
	add_filter( 'pre_get_posts', 'responsive_slider_column_order' );	
}

/**
 * Do things on plugin activation.
 *
 * @since 0.1
 */
function responsive_slider_activation() {
	
	/* Register the custom post type. */
    responsive_slider_register_cpt();
	
	/* Flush permalinks. */
    flush_rewrite_rules();
	
	/* Set default slider settings. */
	responsive_slider_default_settings();
}

/**
 * Flush permalinks on plugin deactivation.
 *
 * @since 0.1
 */
function responsive_slider_deactivation() {
    flush_rewrite_rules();
}

/**
 * Delete slider settings on plugin uninstall.
 *
 * @since 0.1
 */
function responsive_slider_uninstall() {
	delete_option( 'responsive_slider_options' );	
}

/**
 * Register the 'Slides' custom post type.
 *
 * @since 0.1
 */
function responsive_slider_register_cpt() {
	
	$labels = array(
		'name'                 =&gt; __( 'Slides', 'responsive-slider' ),
		'singular_name'        =&gt; __( 'Slide', 'responsive-slider' ),
		'all_items'            =&gt; __( 'All Slides', 'responsive-slider' ),
		'add_new'              =&gt; __( 'Add New Slide', 'responsive-slider' ),
		'add_new_item'         =&gt; __( 'Add New Slide', 'responsive-slider' ),
		'edit_item'            =&gt; __( 'Edit Slide', 'responsive-slider' ),
		'new_item'             =&gt; __( 'New Slide', 'responsive-slider' ),
		'view_item'            =&gt; __( 'View Slide', 'responsive-slider' ),
		'search_items'         =&gt; __( 'Search Slides', 'responsive-slider' ),
		'not_found'            =&gt; __( 'No Slide found', 'responsive-slider' ),
		'not_found_in_trash'   =&gt; __( 'No Slide found in Trash', 'responsive-slider' ), 
		'parent_item_colon'    =&gt; ''
	);
	
	$args = array(
		'labels'               =&gt; $labels,
		'public'               =&gt; true,
		'publicly_queryable'   =&gt; true,
		'_builtin'             =&gt; false,
		'show_ui'              =&gt; true, 
		'query_var'            =&gt; true,
		'rewrite'              =&gt; array( &quot;slug&quot; =&gt; &quot;slides&quot; ),
		'capability_type'      =&gt; 'post',
		'hierarchical'         =&gt; false,
		'menu_position'        =&gt; 20,
		'supports'             =&gt; array( 'title', 'editor', 'thumbnail', 'page-attributes' ),
		'taxonomies'           =&gt; array(),
		'has_archive'          =&gt; true,
		'show_in_nav_menus'    =&gt; false
	);
	
	register_post_type( 'slides', $args );
}

/**
 * Enqueue the stylesheet.
 *
 * @since 0.1
 */
function responsive_slider_enqueue_stylesheets() {
	wp_enqueue_style( 'responsive-slider', RESPONSIVE_SLIDER_URI . 'css/responsive-slider.css', false, 0.1, 'all' );
}

/**
 * Enqueue the admin stylesheet.
 *
 * @since 0.1
 */
function responsive_slider_enqueue_admin_stylesheets() {
	
	global $post_type;
	
	if ( ( isset( $post_type ) &amp;&amp; $post_type == 'slides' ) || ( isset( $_GET['post_type'] ) &amp;&amp; $_GET['post_type'] == 'slides' ) ) {
		wp_enqueue_style( 'responsive-slider_admin', RESPONSIVE_SLIDER_URI . 'css/responsive-slider-admin.css', false, 0.1, 'all' );
	}
}

/**
 * Enqueue the JavaScript.
 *
 * @since 0.1
 */
function responsive_slider_enqueue_scripts() {
	
	/* Enqueue script. */
	wp_enqueue_script( 'responsive-slider_flex-slider', RESPONSIVE_SLIDER_URI . 'responsive-slider.js', array( 'jquery' ), 0.1, true );

	/* Get slider settings. */
	$options = get_option( 'responsive_slider_options' );

	/* Prepare variables for JavaScript. */
	wp_localize_script( 'responsive-slider_flex-slider', 'slider', array(
		'effect'    =&gt; $options['slide_effect'],
		'delay'     =&gt; $options['slide_delay'],
		'duration'  =&gt; $options['slide_duration'],
		'start'     =&gt; $options['slide_start']		
	) );
}

/**
 * Custom post type icon.
 *
 * @since 0.1
 */
function responsive_slider_cpt_icon() {
	?&gt;
	&lt;style type=&quot;text/css&quot; media=&quot;screen&quot;&gt;
		#menu-posts-slides .wp-menu-image {
			background: url(&lt;?php echo RESPONSIVE_SLIDER_URI . 'images/slides-icon.png'; ?&gt;) no-repeat 6px -17px !important;
		}
		#menu-posts-slides:hover .wp-menu-image {
			background-position: 6px 7px!important;
		}	
	&lt;/style&gt;
&lt;?php }

/**
 * Output the slider.
 *
 * @since 0.1
 */
function responsive_slider() {

	$slides = new WP_Query( array( 'post_type' =&gt; 'slides', 'order' =&gt; 'ASC', 'orderby' =&gt; 'menu_order' ) );

	$slider = '';
	
	if ( $slides-&gt;have_posts() ) :
		
		$slider = '&lt;div class=&quot;responsive-slider flexslider&quot;&gt;';
		
			$slider .= '&lt;ul class=&quot;slides&quot;&gt;';
				
			while ( $slides-&gt;have_posts() ) : $slides-&gt;the_post();
			
				$slider .= '&lt;li&gt;';
				   
					$slider .= '&lt;div id=&quot;slide-' . get_the_ID() . '&quot; class=&quot;slide&quot;&gt;';
						
						global $post;
						
							if ( has_post_thumbnail() ) {

								if ( get_post_meta( $post-&gt;ID, &quot;_slide_link_url&quot;, true ) ) 
									$slider .= '&lt;a href=&quot;' . get_post_meta( $post-&gt;ID, &quot;_slide_link_url&quot;, true ) . '&quot; title=&quot;' .  the_title_attribute ( array( 'echo' =&gt; 0 ) ) . '&quot; &gt;';

									$slider .= get_the_post_thumbnail( $post-&gt;ID, 'slide-thumbnail', array( 'class' =&gt; 'slide-thumbnail' ) );

								if ( get_post_meta( $post-&gt;ID, &quot;_slide_link_url&quot;, true ) ) 
									$slider .= '&lt;/a&gt;';

							}
						
						$slider .= '&lt;h2 class=&quot;slide-title&quot;&gt;&lt;a href=&quot;' . get_post_meta( $post-&gt;ID, &quot;_slide_link_url&quot;, true ) . '&quot; title=&quot;' . the_title_attribute ( array( 'echo' =&gt; 0 ) ) . '&quot; &gt;' . get_the_title() . '&lt;/a&gt;&lt;/h2&gt;';
						
						$slider .= '&lt;div class=&quot;excerpt&quot;&gt;'. get_the_content() . '&lt;/div&gt;';
					
					$slider .= '&lt;/div&gt;&lt;!-- #slide-x --&gt;';
				
				$slider .= '&lt;/li&gt;';
				
			endwhile;
			
			$slider .= '&lt;/ul&gt;';
			
		$slider .= '&lt;/div&gt;&lt;!-- #featured-content --&gt;';
	
	endif;

	wp_reset_query();

	return $slider;
}

/**
 * Register the slider shortcode.
 *
 * @since 0.1
 */
function responsive_slider_register_shortcode() {
	add_shortcode( 'responsive_slider', 'responsive_slider' );
}

/**
 *  Add image sizes
 *
 * @since 0.1
 */
function responsive_slider_image_sizes() {
	$options = get_option( 'responsive_slider_options' );
	add_image_size( 'slide-thumbnail', $options['slide_width'], $options['slide_height'], true );	
}

/**
 * Add meta box for slides.
 *
 * @since 0.1
 */
function responsive_slider_create_slide_metaboxes() {
    add_meta_box( 'responsive_slider_metabox_1', __( 'Slide Link', 'responsive-slider' ), 'responsive_slider_metabox_1', 'slides', 'normal', 'default' );
}

/**
 * Output the meta box #1.
 *
 * @since 0.1
 */             
function responsive_slider_metabox_1() {
	
	global $post;	
             
	/* Retrieve the metadata values if they already exist. */
	$slide_link_url = get_post_meta( $post-&gt;ID, '_slide_link_url', true ); ?&gt;
	
	&lt;p&gt;URL: &lt;input type=&quot;text&quot; style=&quot;width: 90%;&quot; name=&quot;slide_link_url&quot; value=&quot;&lt;?php echo esc_attr( $slide_link_url ); ?&gt;&quot; /&gt;&lt;/p&gt;
	&lt;span class=&quot;description&quot;&gt;&lt;?php echo _e( 'The URL this slide should link to.', 'responsive-slider' ); ?&gt;&lt;/span&gt;
	
&lt;?php }

/**
 * Save meta box data.
 *
 * @since 0.1
 */
function responsive_slider_save_meta( $post_id, $post ) {
	
	if ( isset( $_POST['slide_link_url'] ) ) {
		update_post_meta( $post_id, '_slide_link_url', strip_tags( $_POST['slide_link_url'] ) );
	}	
}

/**
 * Edit post editor meta boxes.
 *
 * @since 0.1
 */
function responsive_slider_edit_metaboxes() {
	
	/* Remove metaboxes */
    remove_meta_box( 'postimagediv', 'slides', 'side' );
	remove_meta_box( 'pageparentdiv', 'slides', 'side' );
	remove_meta_box( 'hybrid-core-post-template', 'slides', 'side' );
	remove_meta_box( 'theme-layouts-post-meta-box', 'slides', 'side' );
	remove_meta_box( 'post-stylesheets', 'slides', 'side' );
	
	/* Add the previously removed meta boxes - with modified properties */
    add_meta_box('postimagediv', __('Slide Image', 'responsive-slider' ), 'post_thumbnail_meta_box', 'slides', 'side', 'low');
	add_meta_box('pageparentdiv', __('Slide Order', 'responsive-slider' ), 'page_attributes_meta_box', 'slides', 'side', 'low');
}

/**
 * Add 'Settings' submenu to 'Slides'.
 *
 * @since 0.1
 */
function responsive_slider_settings() {
	add_submenu_page( 'edit.php?post_type=slides', __( 'Slider Settings', 'responsive-slider' ), __( 'Settings', 'responsive-slider' ), 'manage_options', 'responsive-slider-settings', 'responsive_slider_settings_page' );
}

/**
 * Create the Slider Settings page.
 *
 * @since 0.1
 */
function responsive_slider_settings_page() { ?&gt;

	&lt;div class=&quot;wrap&quot;&gt;
		
		&lt;?php screen_icon( 'plugins' ); ?&gt;
		&lt;h2&gt;&lt;?php _e( 'Responsive Slider Settings', 'responsive-slider' ); ?&gt;&lt;/h2&gt;
		
		&lt;form method=&quot;post&quot; action=&quot;options.php&quot;&gt;
			&lt;?php settings_fields( 'responsive_slider_options' ); ?&gt;
			&lt;?php do_settings_sections( 'responsive-slider-settings' ); ?&gt;
			&lt;br /&gt;&lt;p&gt;&lt;input type=&quot;submit&quot; name=&quot;Submit&quot; value=&quot;&lt;?php _e( 'Update Settings', 'responsive-slider' ); ?&gt;&quot; class=&quot;button-primary&quot; /&gt;&lt;/p&gt;
			&lt;br /&gt;&lt;p class=&quot;description&quot;&gt;&lt;?php _e( 'Note: Whenever you change the Width and Height settings, it is a good idea to re-upload the Featured Images of your Slides. This would get them cropped to the new size.', 'responsive-slider' ); ?&gt;&lt;/p&gt;
		&lt;/form&gt;
		
	&lt;/div&gt;
	
&lt;?php }

/**
 * Register and define the slider settings.
 *
 * @since 0.1
 */
function responsive_slider_settings_init() {
	
	/* Register the slider settings. */
	register_setting( 'responsive_slider_options', 'responsive_slider_options', 'responsive_slider_validate_options' );
	
	/* Add settings section. */
	add_settings_section( 'responsive_slider_options_main', __( ' ', 'responsive-slider' ), 'responsive_slider_section_text', 'responsive-slider-settings' );
	
	/* Add settings fields. */
	add_settings_field( 'slide_width', __( 'Width:', 'responsive-slider' ), 'slide_width', 'responsive-slider-settings', 'responsive_slider_options_main' );
	add_settings_field( 'slide_height', __( 'Height:', 'responsive-slider' ), 'slide_height', 'responsive-slider-settings', 'responsive_slider_options_main' );
	add_settings_field( 'slide_effect', __( 'Transition Effect:', 'responsive-slider' ), 'slide_effect', 'responsive-slider-settings', 'responsive_slider_options_main' );
	add_settings_field( 'slide_delay', __( 'Delay:', 'responsive-slider' ), 'slide_delay', 'responsive-slider-settings', 'responsive_slider_options_main' );
	add_settings_field( 'slide_duration', __( 'Animation Duration:', 'responsive-slider' ), 'slide_duration', 'responsive-slider-settings', 'responsive_slider_options_main' );
	add_settings_field( 'slide_start', __( 'Start Automatically:', 'responsive-slider' ), 'slide_start', 'responsive-slider-settings', 'responsive_slider_options_main' );		
}
	
/* Output the section header text. */
function responsive_slider_section_text() {
	echo '&lt;p class=&quot;description&quot;&gt;' . __( 'Make sure to set the desired slide width and height BEFORE creating your slides. Ideally, this would be the maximum size the slider container expands to.', 'responsive-slider' ) . '&lt;/p&gt;';
}

/**
 * Display and fill the settings fields.
 *
 * @since 0.1
 */
function slide_width() {
	
	/* Get the option value from the database. */
	$options = get_option( 'responsive_slider_options' );
	$slide_width = $options['slide_width'];
	
	/* Echo the field. */ ?&gt;
	&lt;input type=&quot;text&quot; id=&quot;slide_width&quot; name=&quot;responsive_slider_options[slide_width]&quot; value=&quot;&lt;?php echo $slide_width; ?&gt;&quot; /&gt; &lt;span class=&quot;description&quot;&gt;&lt;?php _e( 'px', 'responsive-slider' ); ?&gt;&lt;/span&gt;
	
&lt;?php }

function slide_height() {
	
	/* Get the option value from the database. */
	$options = get_option( 'responsive_slider_options' );
	$slide_height = $options['slide_height'];
	
	/* Echo the field. */ ?&gt;
	&lt;input type=&quot;text&quot; id=&quot;slide_height&quot; name=&quot;responsive_slider_options[slide_height]&quot; value=&quot;&lt;?php echo $slide_height; ?&gt;&quot; /&gt; &lt;span class=&quot;description&quot;&gt;&lt;?php _e( 'px', 'responsive-slider' ); ?&gt;&lt;/span&gt;
	
&lt;?php }

function slide_effect() {
	
	/* Get the option value from the database. */
	$options = get_option( 'responsive_slider_options' );
	$slide_effect = $options['slide_effect'];
	
	/* Echo the field. */
	echo &quot;&lt;select id='slide_effect' name='responsive_slider_options[slide_effect]'&gt;&quot;;
	echo '&lt;option value=&quot;fade&quot; ' . selected( $slide_effect, 'fade', false ) . ' &gt;' . __( 'fade', 'responsive-slider' ) . '&lt;/option&gt;';
	echo '&lt;option value=&quot;slide&quot; ' . selected( $slide_effect, 'slide', false ) . ' &gt;' . __( 'slide', 'responsive-slider' ) . '&lt;/option&gt;';
	echo '&lt;/select&gt;';	
}

function slide_delay() {
	
	/* Get the option value from the database. */
	$options = get_option( 'responsive_slider_options' );
	$slide_delay = $options['slide_delay'];
	
	/* Echo the field. */ ?&gt;
	&lt;input type=&quot;text&quot; id=&quot;slide_delay&quot; name=&quot;responsive_slider_options[slide_delay]&quot; value=&quot;&lt;?php echo $slide_delay; ?&gt;&quot; /&gt; &lt;span class=&quot;description&quot;&gt;&lt;?php _e( 'milliseconds', 'responsive-slider' ); ?&gt;&lt;/span&gt;
	
&lt;?php }

function slide_duration() {
	
	/* Get the option value from the database. */
	$options = get_option( 'responsive_slider_options' );
	$slide_duration = $options['slide_duration'];
	
	/* Echo the field. */ ?&gt;
	&lt;input type=&quot;text&quot; id=&quot;slide_duration&quot; name=&quot;responsive_slider_options[slide_duration]&quot; value=&quot;&lt;?php echo $slide_duration; ?&gt;&quot; /&gt; &lt;span class=&quot;description&quot;&gt;&lt;?php _e( 'milliseconds', 'responsive-slider' ); ?&gt;&lt;/span&gt;
	
&lt;?php }

function slide_start() {
	
	/* Get the option value from the database. */
	$options = get_option( 'responsive_slider_options' );
	$slide_start = $options['slide_start'];
	
	/* Echo the field. */
	echo &quot;&lt;input type='checkbox' id='slide_start' name='responsive_slider_options[slide_start]' value='1' &quot; . checked( $slide_start, 1, false ) . &quot; /&gt;&quot;;	
}

/**
 * Validate and/or sanitize user input.
 *
 * @since 0.1
 */
function responsive_slider_validate_options( $input ) {
	
	$options = get_option( 'responsive_slider_options' );
	
	$options['slide_width'] = wp_filter_nohtml_kses( intval( $input['slide_width'] ) );
	$options['slide_height'] = wp_filter_nohtml_kses( intval( $input['slide_height'] ) );
	$options['slide_effect'] = wp_filter_nohtml_kses( $input['slide_effect'] );
	$options['slide_delay'] = wp_filter_nohtml_kses( intval( $input['slide_delay'] ) );
	$options['slide_duration'] = wp_filter_nohtml_kses( intval( $input['slide_duration'] ) );
	$options['slide_start'] = isset( $input['slide_start'] ) ? 1 : 0;	
	
	return $options;
}

/**
 * Default slider settings.
 *
 * @since 0.1
 */
function responsive_slider_default_settings() {

	/* Retrieve exisitng options, if any. */
	$ex_options = get_option( 'responsive_slider_options' );
	
	/* Check if options are set. Add default values if not. */ 
	if ( !is_array( $ex_options ) || $ex_options['slide_duration'] == '' ) {

		$default_options = array(	
			'slide_width'     =&gt; '940',
			'slide_height'    =&gt; '400',
			'slide_effect'    =&gt; 'fade',
			'slide_delay'     =&gt; '7000',
			'slide_duration'  =&gt; '600',
			'slide_start'     =&gt; 1		
		);	
		
		/* Set the default options. */
		update_option( 'responsive_slider_options', $default_options );
	}	
}

/**
 * Edit slide columns in 'all_items' view.
 *
 * @since 0.1
 */
function responsive_slider_columns( $columns ) {

	$columns = array(
		'cb'       =&gt; '&lt;input type=&quot;checkbox&quot; /&gt;',
		'image'    =&gt; __( 'Image', 'responsive-slider' ),
		'title'    =&gt; __( 'Title', 'responsive-slider' ),
		'order'    =&gt; __( 'Order', 'responsive-slider' ),
		'link'     =&gt; __( 'Link', 'responsive-slider' ),
		'date'     =&gt; __( 'Date', 'responsive-slider' )
	);

	return $columns;
}

/**
 * Add slide-specific columns to the 'all_items' view.
 *
 * @since 0.1
 */
function responsive_slider_add_columns( $column ) {

	global $post;
	
	/* Get the post edit link for the post. */
	$edit_link = get_edit_post_link( $post-&gt;ID );

	/* Add column 'Image'. */
	if ( $column == 'image' )		
		echo '&lt;a href=&quot;' . $edit_link . '&quot; title=&quot;' . $post-&gt;post_title . '&quot;&gt;' . get_the_post_thumbnail( $post-&gt;ID, array( 60, 60 ), array( 'title' =&gt; trim( strip_tags(  $post-&gt;post_title ) ) ) ) . '&lt;/a&gt;';
	
	/* Add column 'Order'. */	
	if ( $column == 'order' )		
		echo '&lt;a href=&quot;' . $edit_link . '&quot;&gt;' . $post-&gt;menu_order . '&lt;/a&gt;';
	
	/* Add column 'Link'. */
	if ( $column == 'link' )		
		echo '&lt;a href=&quot;' . get_post_meta( $post-&gt;ID, &quot;_slide_link_url&quot;, true ) . '&quot; target=&quot;_blank&quot; &gt;' . get_post_meta( $post-&gt;ID, &quot;_slide_link_url&quot;, true ) . '&lt;/a&gt;';		
}

/**
 * Order the slides by the 'order' attribute in the 'all_items' column view.
 *
 * @since 0.1.2
 */
function responsive_slider_column_order($wp_query) {
	
	if( is_admin() ) {
		
		$post_type = $wp_query-&gt;query['post_type'];
		
		if( $post_type == 'slides' ) {
			$wp_query-&gt;set( 'orderby', 'menu_order' );
			$wp_query-&gt;set( 'order', 'ASC' );
		}
	}	
}

?&gt;</pre>
<p>That will add a new editor box to the custom post type for the slides. The text will be below the image slides. To move the text on top of the slides, use some css such as the following:</p>
<pre class="brush: css; title: ; notranslate">div.excerpt {position:absolute; top:50px; left:40px; width:450px; }</pre>
<img src="http://feeds.feedburner.com/~r/webdesignandsuch/~4/sAJaxVD1Alw" height="1" width="1"/>]]></content:encoded>
			<wfw:commentRss>http://webdesignandsuch.com/add-html-text-support-to-alien-wp-responsive-slider-wordpress-plugin/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		<feedburner:origLink>http://webdesignandsuch.com/add-html-text-support-to-alien-wp-responsive-slider-wordpress-plugin/</feedburner:origLink></item>
	</channel>
</rss>
