<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	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/"
	>

<channel>
	<title>ThemeID</title>
	<atom:link href="http://themeid.com/feed/" rel="self" type="application/rss+xml" />
	<link>http://themeid.com</link>
	<description>Responsive WordPress Themes</description>
	<lastBuildDate>Thu, 16 May 2013 04:30:47 +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>
		<item>
		<title>Responsive Theme Now on WordPress.com</title>
		<link>http://themeid.com/responsive-theme-now-on-wordpress-com/</link>
		<comments>http://themeid.com/responsive-theme-now-on-wordpress-com/#comments</comments>
		<pubDate>Fri, 01 Mar 2013 01:10:42 +0000</pubDate>
		<dc:creator>trentlapinski</dc:creator>
				<category><![CDATA[Themes]]></category>
		<category><![CDATA[responsive]]></category>
		<category><![CDATA[responsive support]]></category>
		<category><![CDATA[responsive theme]]></category>
		<category><![CDATA[Responsive theme wordpress.com]]></category>
		<category><![CDATA[Responsive WordPress.com]]></category>
		<category><![CDATA[WordPress.com]]></category>

		<guid isPermaLink="false">https://themeid.com/?p=3586</guid>
		<description><![CDATA[WordPress.com today announced that Responsive is now available for free on WordPress.com. Designed by Emil Uzelac, Responsive is clean, feature-rich, and you guessed it… completely responsive! With a Home page template that allows you to concentrate on specific content in a more traditional website<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/responsive-theme-now-on-wordpress-com/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<p><a title="WordPress.com" href="http://wordpress.com" target="_blank">WordPress.com</a> today announced that <a title="Responsive WordPress.com" href="http://en.blog.wordpress.com/2013/02/28/new-theme-responsive/" target="_blank">Responsive is now available for free</a> on WordPress.com.</p>
<blockquote><p>Designed by Emil Uzelac, Responsive is clean, feature-rich, and you guessed it… completely responsive! With a Home page template that allows you to concentrate on specific content in a more traditional website layout, all while looking great across any device, this theme is well-suited to anyone hoping to start their website on WordPress.com.</p>
<p>Customizable to your heart’s content with seven widget areas, four custom menu areas, and seven page templates, make Responsive <em>respond</em> to just the level of functionality and desired layout you need. Read more about Responsive on the <a href="http://theme.wordpress.com/themes/responsive/">Theme Showcase</a> or start customizing your own blog in <em>Appearance → Themes</em>.</p></blockquote>
<p><a href="http://theme.wordpress.com/themes/responsive/" target="_blank">Use Responsive on WordPress.com</a>.</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/responsive-theme-now-on-wordpress-com/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>CyberChimps Inc Acquires ThemeID and The ‘Responsive’ WordPress Theme As It Celebrates 500,000 Downloads</title>
		<link>http://themeid.com/cyberchimps-acquires-themeid-and-responsive-wordpress-theme/</link>
		<comments>http://themeid.com/cyberchimps-acquires-themeid-and-responsive-wordpress-theme/#comments</comments>
		<pubDate>Tue, 26 Feb 2013 20:39:33 +0000</pubDate>
		<dc:creator>trentlapinski</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[cyberchimps]]></category>
		<category><![CDATA[cyberchimps acquires]]></category>
		<category><![CDATA[cyberchimps acquires themeid]]></category>
		<category><![CDATA[cyberchimps bought]]></category>
		<category><![CDATA[cyberchimps buys themeid]]></category>
		<category><![CDATA[cyberchimps owns]]></category>
		<category><![CDATA[cyberchimps owns responsive]]></category>
		<category><![CDATA[cyberchimps owns themeid]]></category>
		<category><![CDATA[cyberchimps responsive]]></category>
		<category><![CDATA[cyberchimps responsive theme]]></category>
		<category><![CDATA[cyberchimps themeid]]></category>
		<category><![CDATA[responsive]]></category>
		<category><![CDATA[responsive theme]]></category>
		<category><![CDATA[themeid]]></category>
		<category><![CDATA[WordPress]]></category>

		<guid isPermaLink="false">https://themeid.com/?p=3513</guid>
		<description><![CDATA[SAN FRANCISCO-February 26, 2013- CyberChimps Inc today reached an agreement with ThemeID, to acquire ThemeID.com, and their WordPress Theme named ‘Responsive’ which today received over 500,000 downloads on WordPress.org.  “When I first created ‘Responsive’ I never imagined it would receive<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/cyberchimps-acquires-themeid-and-responsive-wordpress-theme/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<p><a title="CyberChimps ThemeID" href="http://cyberchimps.com"><img class="size-full wp-image-3514 aligncenter" alt="chimpthemeid" src="https://themeid.com/wp-content/uploads/2013/02/chimpthemeid.png" width="154" height="173" /></a></p>
<p>SAN FRANCISCO-February 26, 2013- <a title="CyberChimps" href="http://cyberchimps.com">CyberChimps Inc</a> today reached an agreement with <a title="ThemeID" href="http://themeid.com">ThemeID</a>, to acquire <a title="ThemeID CyberChimps" href="http://themeid.com">ThemeID.com</a>, and their WordPress Theme named ‘Responsive’ which today received over <a href="http://wordpress.org/extend/themes/responsive/stats/">500,000 downloads</a> on <a title="WordPress" href="http://wordpress.org/extend/themes/responsive">WordPress.org</a>.</p>
<blockquote><p> “When I first created ‘Responsive’ I never imagined it would receive half a million downloads in just under a year,” said Emil Uzelac, founder of ThemeID. “It has been an amazing experience, but it has grown so quickly that it has become difficult to maintain alone. I wanted to make sure that ‘Responsive’ and its users continue to be supported, I am very excited to see what the team at CyberChimps will be able to do with what I’ve created.”</p></blockquote>
<p>Responsive will continue to be available for free on <a title="WordPress" href="http://wordpress.org/extend/themes/responsive">WordPress.org</a>, and CyberChimps will simply be taking over development, as well as customer support.</p>
<blockquote><p>“At CyberChimps we pride ourselves on building open source responsive WordPress themes that just work,” said Trent Lapinski, CEO of CyberChimps Inc. “ThemeID’s theme elegantly named ‘Responsive’ fits perfectly into our philosophy of what a responsive WordPress theme should be, and we are excited to welcome ‘Responsive’ and ThemeID into the CyberChimps family.”</p></blockquote>
<p>As a special welcome to the CyberChimps family, we are offering a $5 off coupon code for any of CyberChimps Responsive WordPress Themes, simply enter coupon code: <strong>themeid5</strong> upon check out in the <a href="http://cyberchimps.com/store/">CyberChimps Store</a> (offer is good through the end of April, 2013).</p>
<p>We will be transitioning ThemeID over to CyberChimps so please bear with us as we move servers over the next few days.</p>
<p><b>Benefits of the deal</b></p>
<ul>
<li>CyberChimps will continue innovating and developing the Responsive on WordPress.org.</li>
<li>Responsive will remain free and open source (released under the GPL).</li>
<li>Responsive is now available on Github (<a href="https://github.com/cyberchimps/responsive" target="_blank">https://github.com/cyberchimps/responsive</a>).</li>
<li>Responsive 1.9 (<a href="http://themeid.com/whats-new-in-responsive/" target="_blank">http://themeid.com/whats-new-in-responsive/</a>) is actively being developed (<a href="https://github.com/cyberchimps/responsive/tree/1.9" target="_blank">https://github.com/cyberchimps/responsive/tree/1.9</a>), and will be released soon.</li>
<li>CyberChimps will be developing and releasing a Pro version of ‘Responsive’ in March to paying customers powered by Twitter Bootstrap and CyberChimps’ responsive theme options panel.</li>
<li>We will be moving support over to CyberChimps Support Forums, and bringing on ThemeID staff to help assist in the transition.</li>
<li>Pre-existing ThemeID members will continue to get access to support for free.</li>
</ul>
<p><strong>About CyberChimps</strong></p>
<p><a href="http://cyberchimps.com">CyberChimps Inc</a> is a WordPress Theme Shop that develops responsive touch friendly drag and drop WordPress themes you can trust, and is based out of San Francisco, California. The company was founded in 2010 by Trent Lapinski, and is quickly becoming one of the fastest growing WordPress Theme developers on the Internet.</p>
<p>For news and updates please follow CyberChimps on <a href="http://twitter.com/cyberchimps">Twitter</a>, and Like us on <a href="http://www.facebook.com/cyberchimps">Facebook</a>.</p>
<p><a href="http://cyberchimps.com/" target="_blank">http://cyberchimps.com</a></p>
<p><strong>About ThemeID</strong></p>
<p>ThemeID was founded by Emil Uzelac, and has been dedicated to servicing the WordPress community and creating powerful yet easy to use WordPress themes since 2010.</p>
<p><a href="http://themeid.com/" target="_blank">http://themeid.com</a></p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/cyberchimps-acquires-themeid-and-responsive-wordpress-theme/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Complete Breakdown of Responsive Videos</title>
		<link>http://themeid.com/complete-breakdown-of-responsive-videos/</link>
		<comments>http://themeid.com/complete-breakdown-of-responsive-videos/#comments</comments>
		<pubDate>Sun, 10 Feb 2013 00:48:35 +0000</pubDate>
		<dc:creator>Ulrich Pogson</dc:creator>
				<category><![CDATA[How to]]></category>

		<guid isPermaLink="false">https://themeid.com/?p=3369</guid>
		<description><![CDATA[There had been a few posts on the forum asking about adding responsive videos. At the time I was unable to give a good answer. Now I have taken time to do a bit of research and I able to<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/complete-breakdown-of-responsive-videos/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<p>There had been a few posts on the <a title="ThemeID Forum" href="http://themeid.com/help/">forum</a> asking about adding responsive videos. At the time I was unable to give a good answer. Now I have taken time to do a bit of research and I able to give a number of responsive video solutions. The solutions are in the order of difficulty, starting with the easiest solution. These are the players that I am going to be covering today.</p>
<ul>
<li><a href="#youtube">YouTube</a></li>
<li><a href="#sublime">Sublime Video</a></li>
<li><a href="#wistia">Wistia</a></li>
<li><a href="#html5">Simple HTML5 Video</a></li>
<li><a href="#html5-flash">Simple HTML5 Video with flash fallback</a></li>
<li><a href="#mediaelement">MediaElement.js</a></li>
<li><a href="#videojs">Video.js</a></li>
<li><a href="#flowplayer">Flowplayer</a></li>
<li><a href="#jwplayer">JW Player</a></li>
<li><a href="#fitvids">Important info on FitVids.js</a></li>
<li><a href="#troubleshooting">Troubleshooting</a></li>
</ul>
<div class="info-box information"><strong>Note</strong> &#8211; This post is written for the Responsive theme for WordPress but it does not mean it cannot be used for any other themes or site types. <a title="FitVids.js" href="http://fitvidsjs.com/" target="_blank">FitVids.js</a> is integrated in Responsive so you will not need to add it when using Responsive. For all the rest of you please see the <a href="#fitvids">part on FitVids.js</a>.</div>
<h2><a title="YouTube" href="http://www.youtube.com" target="_blank" name="youtube">YouTube</a></h2>
<ul>
<li>Very easy to set up</li>
<li>Needs <a title="FitVids.JS - A lightweight, easy-to-use jQuery plugin for fluid width video embeds." href="http://fitvidsjs.com/" target="_blank">FitVids.js</a> so that it is responsive</li>
<li>The video is hosted on YouTube</li>
<li>Works easily on multiple devices and browsers</li>
</ul>
<p>The easiest solution is to use YouTube. It works on multiple devices. In some countries YouTube plays an advertisement before the video. If  you upload your own video this should not be the case. At the end of the video you get a grid with other videos. If you don&#8217;t want those then when embedding YouTube make sure you uncheck the &#8220;Show suggested videos when the video finishes&#8221;.</p>
<div class="wp-caption alignnone" style="width: 664px"><img alt="" src="http://pix.am/u8nE.png" width="654" height="827" /><p class="wp-caption-text">YouTube share settings</p></div>
<p><a class="button blue" title="YouTube" href="http://video.grappler.tk/youtube/" target="_blank">Youtube Demo</a></p>
<p>The rest of the solutions are for those who do not want to use the YouTube player and wish to host their own video.</p>
<h2><a title="SublimeVideo" href="http://sublimevideo.net/" target="_blank" name="sublime">Sublime Video</a></h2>
<ul>
<li>Easy to set up with the code generator</li>
<li>Need to add JavaScript code</li>
<li>No need for FitVids.js</li>
<li>Basic HTML5 code with flash fallback for IE8</li>
<li>Works with self hosted videos and YouTube videos</li>
</ul>
<p>Sublime offers a solution for your own hosted videos and also YouTube videos. Chose your option and then add the link to your media or for the YouTube videos add the video id.</p>
<div class="wp-caption alignnone" style="width: 847px"><img alt="" src="http://pix.am/ri3v.png" width="837" height="651" /><p class="wp-caption-text">Sublime Video Source</p></div>
<p>In the video setting the &#8220;Fit&#8221; option is very important.</p>
<div class="wp-caption alignnone" style="width: 855px"><img alt="" src="http://pix.am/EFUb.png" width="845" height="430" /><p class="wp-caption-text">Video Settings</p></div>
<p>At the end you can click on the &#8220;Get the Code&#8221; button at the bottom. You will then get a code like this.</p><pre class="crayon-plain-tag">&lt;video id="video1" class="sublime" poster="http://media.sublimevideo.net/vpa/ms_800.jpg" width="640" height="360" data-autoresize="fit" data-uid="a55c1534" data-name="Midnight Sun" preload="none"&gt;
	&lt;source src="http://media.sublimevideo.net/vpa/ms_360p.mp4" /&gt;
	&lt;source src="http://media.sublimevideo.net/vpa/ms_720p.mp4" data-quality="hd" /&gt;
	&lt;source src="http://media.sublimevideo.net/vpa/ms_360p.webm" /&gt;
	&lt;source src="http://media.sublimevideo.net/vpa/ms_720p.webm" data-quality="hd" /&gt;
&lt;/video&gt;</pre><p>The next step is to <a title="How to load JavaScript &amp; Stylsheets" href="http://themeid.com/docs/how-to-load-javascript-stylsheets/">add the JavaScript</a>. Every site has its own file.</p><pre class="crayon-plain-tag">&lt;script type="text/javascript" src="//cdn.sublimevideo.net/js/emx0sm0y-beta.js"&gt;&lt;/script&gt;</pre><p><a class="button blue" title="Sublime YouTube" href="http://video.grappler.tk/sublime-youtube/" target="_blank">Sublime Demo (YouTube video)</a> <a class="button blue" title="Sublime" href="http://video.grappler.tk/sublime/" target="_blank">Sublime Demo (hosted video)</a></p>
<h2><a title="Wistia" href="http://wistia.com/" target="_blank" name="wistia">Wistia</a></h2>
<ul>
<li>Very Simple &#8211; only one file to upload</li>
<li>the code is an iframe</li>
<li>Hosted on the Wistia servers</li>
<li>built in Video analytic</li>
<li>Free version (3 videos / 5 GB bandwidth / branded player)</li>
<li>Paid version begins at $25/mo</li>
<li>has additional featured e.g. social sharing, call to action, require email to play and a few more which you can find here.</li>
</ul>
<h3>Solution 1</h3>
<p></p><pre class="crayon-plain-tag">&lt;iframe src="http://fast.wistia.net/embed/iframe/3bfl0abrog?controlsVisibleOnLoad=true&amp;version=v1&amp;videoHeight=360&amp;videoWidth=640&amp;volumeControl=true" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" width="640" height="360"&gt;&lt;/iframe&gt;</pre><p><a class="button blue" title="Wistia" href="http://video.grappler.tk/wistia/">Wistia Demo</a></p>
<h3><span style="font-size: 1.17em">Solution 2</span></h3>
<p>There is a solution where Wistia supports  responsive videos with their own code. So FitVids.js is not needed. To be able to achive this you need to chose the API option.</p>
<div class="wp-caption alignnone" style="width: 485px"><img alt="" src="http://pix.am/ra68.png" width="475" height="525" /><p class="wp-caption-text">Select API Option</p></div>
<p>Then you need to add videoFoam: true to the same place where the videoWidth is.</p>
<p>Example code</p><pre class="crayon-plain-tag">&lt;div id="wistia_3bfl0abrog" class="wistia_embed" style="width:640px;height:360px;" data-video-width="640" data-video-height="360"&gt;&amp;nbsp;&lt;/div&gt;
&lt;script charset="ISO-8859-1" src="https://fast.wistia.com/static/concat/E-v1%2CpostRoll-v1.js"&gt;&lt;/script&gt;
&lt;script&gt;
wistiaEmbed = Wistia.embed("3bfl0abrog", {
  version: "v1",
  videoWidth: 640,
  videoHeight: 360,
  volumeControl: true,
  controlsVisibleOnLoad: true,
  videoFoam: true,
  plugin: {
    "postRoll-v1": {
      text: "Thank you for watching",
      link: "#",
      style: {
        backgroundColor: "#616161",
        color: "#ffffff",
        fontSize: "36px",
        fontFamily: "Gill Sans, Helvetica, Arial, sans-serif"
      }
    }
  }
});
&lt;/script&gt;</pre><p><a class="button blue" title="Wistia own Demo" href="http://wistia.github.com/demobin/video-foam/" target="_blank">Wistia own Demo</a> <a class="button blue" title="Wistia own responsive solution" href="http://video.grappler.tk/wistia-own-responsive-solution/" target="_blank">Wistia my Demo</a></p>
<h2><a title="HTML5 Video with flash fallback" name="html5"></a>Simple HTML5 Video</h2>
<ul>
<li>Need to create markup</li>
<li>simple set up</li>
<li><span style="line-height: 13px">videos hosted on own site</span></li>
<li>different players on every browser</li>
<li>IE 8 and lower are not supported</li>
</ul>
<p>The video tag is a new standard to display videos. I have added more information then you might need. To understand it best I have split this section into two parts.</p>
<ul>
<li><a title="HTML5 Code" href="#html5-code">HTML5 Markup &#8211; HTML5 Video &amp; Source Tags</a></li>
<li><a title="Videos Files" href="#video-files">Video Files &#8211; mp4, webm &amp; ogg</a></li>
</ul>
<h3><a title="HTML5 Code" name="html5-code"></a>HTML5 Markup</h3>
<p>Here is a simple code example</p><pre class="crayon-plain-tag">&lt;video src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" width="320" height="240" controls="controls" preload="none"&gt;&lt;/video&gt;</pre><p>So that the videos will work on multiple browser we will need multiple formats.</p>
<p>Here is a simple code example. I have also added a possibility to load a lower resolution video for smaller devices.</p><pre class="crayon-plain-tag">&lt;video width="320" height="240" controls preload="metadata"&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4"  type="video/mp4"/&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv"  type="video/ogg"/&gt;
&lt;/video&gt;</pre><p>The video Tag has the following attributes. Some of them are easy to understand.</p>
<ul>
<li>global attributes &#8211; standard atributes like class and id</li>
<li>autoplay</li>
<li><a title=" HTML5 preload spec" href="http://www.w3.org/TR/html5/embedded-content-0.html#attr-media-preload" target="_blank">preload</a> - none, metadata, auto</li>
<li>controls</li>
<li>loop</li>
<li><a title="HTML5 poster spec" href="http://www.w3.org/TR/html5/embedded-content-0.html#attr-video-poster" target="_blank">poster</a> &#8211; poster=&#8221;/image.jpg&#8221;</li>
<li>height</li>
<li>width</li>
<li><a title="HTML5 mediagroup spec" href="http://www.w3.org/TR/html5/embedded-content-0.html#attr-media-mediagroup" target="_blank">mediagroup</a> &#8211; control two media elements(videos) through the first element(video)</li>
<li>muted</li>
<li><a title="HTML5 src spec" href="http://www.w3.org/TR/html5/embedded-content-0.html#attr-media-src" target="_blank">src</a> &#8211; video link</li>
</ul>
<p><a title="W3 Video tag" href="http://www.w3.org/TR/html-markup/video.html" target="_blank">W3 Video Tag Reference</a></p>
<p>Here are the source attributes.</p>
<ul>
<li>global attributes</li>
<li>src</li>
<li>type</li>
<li>media</li>
</ul>
<p><a title="W3 source tag" href="http://www.w3.org/TR/html-markup/source.html" target="_blank">W3 Source Tag Reference</a></p>
<p>So to have a responsive HTML5 video you need to have this CSS.</p><pre class="crayon-plain-tag">video {
	width: 100%;
	max-width: 100%;
	height: auto;
}</pre><p>You can use a <a title="HTML5 markup builder" href="http://videojs.com/tag-builder/" target="_blank">service provided by video.js</a> to create HTML5 video markup.</p>
<h3><a title="Video Files" name="video-files"></a>Video Files</h3>
<p>There are three main video files.</p>
<table>
<tbody>
<tr>
<th><strong>Format</strong></th>
<th><strong>Video Encoding</strong></th>
<th><strong>MIME-type</strong></th>
</tr>
<tr>
<td><strong>MP4</strong></td>
<td>H264</td>
<td>video/mp4</td>
</tr>
<tr>
<td><strong>WebM</strong></td>
<td>VP8</td>
<td>video/webm</td>
</tr>
<tr>
<td><strong>Ogg</strong></td>
<td>Theora</td>
<td>video/ogg</td>
</tr>
</tbody>
</table>
<p>Not every browser supports all formats that is why we include all of them in the html. The easist way to get your video in the different formats is to use <a title="Miro Converter" href="http://www.mirovideoconverter.com/">Miro converter</a></p>
<div class="info-box information"><strong>Heads up!</strong> I had some problems playing the webm format in Firefox that was converted by Miro.<br />
Miro Support said:&nbsp;</p>
<blockquote><p>To get around this  download an updated version of ffmpeg from here: <a href="http://ffmpeg.zeranoe.com/builds/">http://ffmpeg.zeranoe.com/builds/</a></p>
<p>Take the ffmpeg.exe file from the updated build &#8211; and dropped it into C:\Program Files\Participatory Culture Foundation\Miro Video Converter\ffmpeg -  replacing the existing ffmpeg.exe file and then convert without issue using MVC.</p>
<p>We will have to make a new release to update ffmpeg &#8211; but in the meantime you can use the workaround and you should be all set.</p></blockquote>
</div>
<ul>
<li>Mozilla Firefox – WebM, Ogg</li>
<li>Google Chrome – MP4, WebM, Ogg</li>
<li>Opera – WebM, Ogg</li>
<li>Safari – MP4</li>
<li>Internet Explorer 9+ – MP4</li>
<li>Internet Explorer 6-8 – No HTML5, Flash Only!</li>
</ul>
<p>To test it your self <a class="button blue" title="Video Format Test" href="http://video.grappler.tk/video-test/">Video Format Test</a></p>
<p>WordPress does not support webm at the moment and for that reason you will need to add the following code to your themes functions.php. If you are running a multisite you will need to check the list of allowed files.</p><pre class="crayon-plain-tag">add_filter( 'upload_mimes', 'custom_mimes' );
	function custom_mimes( $mimes ){
		$mimes['webm'] = 'video/webm';
	return $mimes;
}</pre><p>If you want any further reading then <a href="http://diveintohtml5.info/video.html" target="_blank">read this</a></p>
<p><a class="button blue" title="HTML5 Video" href="http://video.grappler.tk/video-demos/html5-video/" target="_blank">HTML5 multiple format Demo</a></p>
<h2><a title="HTML5 Video with flash fallback" name="html5-flash"></a>Simple HTML5 Video with flash fallback</h2>
<ul>
<li>The same points as for HTML video except with IE8 and lower support</li>
</ul>
<p>This is how the code would look like with FlowPlayer being used as the backup.</p><pre class="crayon-plain-tag">&lt;!-- "Video For Everybody" http://camendesign.com/code/video_for_everybody --&gt;
&lt;video controls="controls" poster="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" width="960" height="540"&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4" /&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm" /&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg" /&gt;
	&lt;object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" width="960" height="540"&gt;
		&lt;param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" /&gt;
		&lt;param name="allowFullScreen" value="true" /&gt;
		&lt;param name="wmode" value="transparent" /&gt;
		&lt;param name="flashVars" value="config={'playlist':['http%3A%2F%2Ftesting.grappler.tk%2Ffiles%2F2013%2F01%2Ftrailer_1080p.jpg',{'url':'http%3A%2F%2Ftesting.grappler.tk%2Ffiles%2F2013%2F01%2Ftrailer_1080p.mp4','autoPlay':false}]}" /&gt;
		&lt;img alt="Big Buck Bunny" src="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" width="960" height="540" title="No video playback capabilities, please download the video below" /&gt;
	&lt;/object&gt;
&lt;/video&gt;</pre><p>To save time you could use the <a title="Video for Everybody generator" href="http://sandbox.thewikies.com/vfe-generator/" target="_blank">Video for Everybody generator</a> by Jonathan Neal to generate the code snippet according to your options. (FlashFox player seems to only resize if the browser is refreshed but does not change size dynamically,)</p>
<p><a title="Video for Everybody" href="http://camendesign.com/code/video_for_everybody" target="_blank">A complete explanation</a> can be found at Kroc Camen&#8217;s site, the originator of this technique.</p>
<p><a class="button blue" title="HTML5 Video with Flash fallback" href="http://video.grappler.tk/video-demos/html5-video-with-flash-fallback/" target="_blank">HTML5 with flash fallback Demo</a></p>
<h2><a title="MediaElement.js" href="http://mediaelementjs.com/" target="_blank" name="mediaelement">MediaElement.js</a></h2>
<ul>
<li>Standard Player</li>
<li>out of the box responsive</li>
<li>Supports HTML5 Video</li>
<li>Automatically supports IE8 and lower</li>
<li>Working WordPress plugin</li>
<li>Does not need FitVids.js</li>
</ul>
<p>How to get it running on your site.</p>
<ol>
<li>First you need to <a title="MediaElement.js Github" href="http://github.com/johndyer/mediaelement/" target="_blank">download</a> the files.</li>
<li>Open the zip file and then extract the build folder</li>
<li>Move that build folder to your child theme. You can rename the folder if you want</li>
<li><a title="How to load JavaScript &amp; Stylsheets" href="http://themeid.com/docs/how-to-load-javascript-stylsheets/" target="_blank">Load</a> mediaelement-and-player.min.js and mediaelementplayer.min.css</li>
<li>Load this javascript to activate the MediaElements player<br />
<pre class="crayon-plain-tag">// activate mediaelementplayer
jQuery('video,audio').mediaelementplayer(/* Options */);</pre>
</li>
<li>Then you can include the HTML video code.<br />
<pre class="crayon-plain-tag">&lt;video width="320" height="240" controls preload="metadata"&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4"  type="video/mp4"/&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/&gt;
	&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv"  type="video/ogg"/&gt;
&lt;/video&gt;</pre>
</li>
</ol>
<p><a class="button blue" title="MediaElement.js" href="http://video.grappler.tk/video-demos/mediaelement-js/" target="_blank">MediaElement Demo</a></p>
<h3><a title="MediaElement.js WordPress plugin" href="http://wordpress.org/extend/plugins/media-element-html5-video-and-audio-player/" target="_blank">MediaElement.js WordPress plugin</a></h3>
<p>This is very simple. Install the plugin and then add this shortcode to the post or page. Just change the links to your video.</p><pre class="crayon-plain-tag">[video 
	poster="http://mediaelement.grappler.tk/files/2013/02/trailer_1080p.jpg" 
	mp4="http://mediaelement.grappler.tk/files/2013/02/trailer_1080p.mp4" 
	webm="http://mediaelement.grappler.tk/files/2013/02/trailer_1080p.webm" 
	ogg="http://mediaelement.grappler.tk/files/2013/02/trailer_1080p.ogv" 
	width="100%" 
	height="100%"
]</pre><p><a class="button blue" title="MediaElement WordPress Plugin Demo" href="http://mediaelement.grappler.tk/" target="_blank">MediaElement WordPress Plugin Demo</a></p>
<h2><a title="Flowplayer" href="http://www.longtailvideo.com/jw-player/" target="_blank" name="flowplayer">Flowplayer</a></h2>
<ul>
<li>No need of FitVids.js</li>
<li>Easy to use</li>
<li>Customisable players</li>
</ul>
<p>Simply add this HTML to page or post.</p><pre class="crayon-plain-tag">&lt;script src="http://releases.flowplayer.org/5.3.2/flowplayer.min.js"&gt;&lt;/script&gt;
&lt;link rel="stylesheet" type="text/css" href="http://releases.flowplayer.org/5.3.2/skin/minimalist.css" /&gt;
&lt;div class="flowplayer play-button" data-ratio="0.5625"&gt;
	&lt;video controls="controls" preload="metadata" data-embed="false"&gt;
		&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4"/&gt;
		&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/&gt;
		&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg"/&gt;
	&lt;/video&gt;
&lt;/div&gt;</pre><p><a class="button blue" title="Flowplayer" href="http://video.grappler.tk/video-demos/flowplayer/" target="_blank">Flowplayer Demo</a></p>
<p><a title="Design player" href="http://flowplayer.org/designer/" target="_blank">Design your own player</a>, <a title="Flowplayer Video attributes" href="http://flowplayer.org/docs/index.html#video-attributes" target="_blank">Video attributes</a>, <a title="Flowplayer modifier classes" href="http://flowplayer.org/docs/skinning.html#modifier-classes" target="_blank">Additional options</a></p>
<div class="info-box information"><strong>Note! </strong>The <a title="Flowplayer WordPress plugin" href="http://wordpress.org/extend/plugins/flowplayer5/" target="_blank">FlowPlayer WordPress plugin</a> is not working perfectly yet. I have <a title="Contact Flowplayer support" href="http://wordpress.org/support/topic/unresponsive-in-firefox?replies=2" target="_blank">contacted the support</a>.</div>
<h2><a title="video.js" href="http://videojs.com/" target="_blank" name="videojs">Video.js</a></h2>
<ul>
<li><span style="line-height: 13px">Flash Fallback</span></li>
<li>WordPress Plugin</li>
<li>Needs FitVids.js</li>
</ul>
<ol>
<li>Load the JavaScript and Stylesheet</li>
<li>Add the markup e.g.<br />
<pre class="crayon-plain-tag">&lt;link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet"&gt;
&lt;script src="http://vjs.zencdn.net/c/video.js"&gt;&lt;/script&gt;
&lt;div class="video-js-wrapper"&gt;
	&lt;video id="video-js-1" class="video-js vjs-default-skin" controls width="960" height="540" poster="http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg" preload="auto" data-setup="{}"&gt;
		&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" type="video/mp4"/&gt;
		&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.webm" type="video/webm"/&gt;
		&lt;source src="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" type="video/ogg"/&gt;
	&lt;/video&gt;
&lt;/div&gt;</pre>
</li>
<li>Add extra css<br />
<pre class="crayon-plain-tag">.fluid-width-video-wrapper .video-js {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%!important;
	height: 100%!important;
}</pre>
</li>
<li>Activate FitVids.js for Video.js<br />
<pre class="crayon-plain-tag">// FitVids
jQuery(document).ready(function(){
// Target your #container, #wrapper etc.
	jQuery("#wrapper").fitVids({ customSelector: "div[class^='video-js-wrapper']"});
});</pre>
</li>
</ol>
<p><a class="button blue" title="Video js" href="http://video.grappler.tk/video-demos/video-js/" target="_blank">Video.js Demo</a></p>
<p><a title="Video.js Options Docs" href="https://github.com/zencoder/video-js/blob/master/docs/options.md" target="_blank">Options Documentation</a></p>
<h3><a title="Video.js WordPress plugin" href="http://wordpress.org/extend/plugins/videojs-html5-video-player-for-wordpress/" target="_blank">Video.js WordPress plugin</a></h3>
<p>The plugin does make it a bit easier to host the files. So install the plugin then add this code. Just change the video links and size.</p><pre class="crayon-plain-tag">&lt;div class="video-js-wrapper" width="960" height="540"&gt;
[video poster="http://mediaelement.grappler.tk/files/2013/02/trailer_1080p.jpg" mp4="http://videojs.grappler.tk/files/2013/02/trailer_1080p.m4v" webm="http://videojs.grappler.tk/files/2013/02/trailer_1080p.webm" ogg="http://videojs.grappler.tk/files/2013/02/trailer_1080p.ogv" width="960" height="540"]
&lt;/div&gt;</pre><p><a class="button blue title=" href="http://videojs.grappler.tk/" target="_blank">Videos.js WordPress Plugin Demo</a></p>
<h2><a title="JWPlayer" href="http://flowplayer.org/" target="_blank" name="jwplayer">JWPlayer</a></h2>
<ul>
<li>Popular</li>
<li>Not responsive out of the box</li>
<li>Extra work for every video</li>
</ul>
<h3>Standard embed with responsive CSS Solution</h3>
<p>I have found another way of making JWPlayer responsive. This should be a bit easier.</p>
<ol>
<li>Add this code to the page or post<br />
<pre class="crayon-plain-tag">&lt;script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"&gt;&lt;/script&gt;
&lt;div id='player_1'&gt;&lt;/div&gt;
&lt;script type='text/javascript'&gt;
  jwplayer('player_1').setup({
    file: "https://grapplerulrich.s3.amazonaws.com/html5video/trailer_1080p.mp4",
    width: "100%",
    height: "100%",
    stretching: "fill",
    flashplayer:"http://player.longtailvideo.com/player.swf"
  });
&lt;/script&gt;</pre>
</li>
<li>Change the div id so that is different for every video. Make sure it matches the code in the JavaScript.</li>
<li>Add this css<br />
<pre class="crayon-plain-tag">#player_1_wrapper {
	width: 100%;
	position: relative;
	padding: 0;
	padding-bottom: 56.25%;
}

#player_1_wrapper object {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}</pre><br />
You will need to add this css for every video.</li>
<li>So that the video keeps its proportion you will need to change the padding-bottom percentage. This is calculated video height/width*100. E.g. 540/960*100 =56.25%.</li>
</ol>
<p><a class="button blue" title="JW Player wo/ iframe" href="http://video.grappler.tk/jw-player-wo-iframe/" target="_blank">JW Player wo/ iframe Demo</a></p>
<h3>iframe Solution</h3>
<p>The solution that I have for JW Player is a hack that Ethan from Longtailvideo sent me. Here is how to do it.</p>
<ol>
<li><span style="line-height: 13px"><a title="Download JWPlayer" href="http://www.longtailvideo.com/jw-player/download/" target="_blank">Download</a> the files</span></li>
<li>Copy jwplayer folder to your child theme using a ftp client</li>
<li>Create a html file in the child theme</li>
<li>Paste this code in<br />
<pre class="crayon-plain-tag">&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
	&lt;head&gt;
		&lt;title&gt;
			JWPlayer Reponsive Video
		&lt;/title&gt;
		&lt;script type="text/javascript" src="http://player.longtailvideo.com/jwplayer.js"&gt;
		&lt;/script&gt;
		&lt;style type="text/css"&gt;
			html, body {
				height: 100%;
				width: 100%;
				padding: 0;
				margin: 0;
			}
			#player {
				height: 100%;
				width: 100%; 
				padding: 0;
			}
		&lt;/style&gt;
	&lt;/head&gt;
	&lt;body&gt;
	&lt;div id="player"&gt;
	&lt;/div&gt;
		&lt;script type="text/javascript"&gt;
			jwplayer("player").setup({
				file: "http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4",
				image: "http://testing.grappler.tk/files/2013/01/trailer_1080p.jpg",
				height: "100%",
				width: "100%",
				stretching: "exactfit",
				flashplayer:"http://player.longtailvideo.com/player.swf"
			});
		&lt;/script&gt;
	&lt;/body&gt;
&lt;/html&gt;</pre>
</li>
<li>Change four links &#8211; Change the location of jwplayer.js, jwplayer.flash.swf, the video link and either update the image link or remove it.</li>
<li>Then add an iframe with the link pointing to the newly created html file.<br />
<pre class="crayon-plain-tag">&lt;iframe width="940px" height="540px" src="http://grappler.tk/wp-content/themes/responsive-testing/jwplayer-iframe.html" frameborder="0" allowfullscreen=""&gt;&lt;/iframe&gt;</pre>
</li>
<li>Then we have to make sure that FitVids.js will work with this iframe. More on this here.</li>
</ol>
<p><a class="button blue" title="JW Player – page in iframe" href="http://video.grappler.tk/video-demos/jw-player-page-in-iframe/" target="_blank">JWPlayer iframe Demo</a></p>
<p><a title="JWPlayer Docs" href="http://www.longtailvideo.com/support/jw-player/28839/embedding-the-player" target="_blank">JWPlayer Documentation</a></p>
<div class="info-box information"><strong>Note!</strong> The JWPlayer WordPress plugin has been recently updated to use JWPlayer 6 and so I will be inlcuding that too soon.</div>
<h2><a title="FitVids.js" href="http://fitvidsjs.com/" target="_blank" name="fitvids">FitVids.js</a></h2>
<p>Here are a couple of important things to know about FitVids.js.</p>
<p>The current version of <a title="FitVIds.js Conflict" href="https://github.com/davatron5000/FitVids.js/pull/90" target="_blank">FitVids.js conflicts</a> with Video.js and MediaElement.js. That is why I would recommend using my version. It can be found on <a title="Custom FitVids.js" href="https://github.com/grappler/FitVids.js" target="_blank">GitHub</a>.</p>
<p>So that the video doesn&#8217;t distort script calculates the aspect ration. This is calculated by dividing the height by the width in the html code. That is why it is important the width and height is correct.</p>
<p>When adding iframes from other sources then it is necessary to add selectors. So that I can add an iframe from this site I would use this JavaScript. It is also important to check if www is used or not.</p><pre class="crayon-plain-tag">jQuery(document).ready(function(){
// Target your #container, #wrapper etc.
	jQuery("#wrapper").fitVids({ customSelector: "iframe[src^='http://grappler.tk']"});
	jQuery("#wrapper").fitVids({ customSelector: "iframe[src^='http://www.grappler.tk']"});
	jQuery("#wrapper").fitVids({ customSelector: "iframe[src^='http://fast.wistia.net']"});
});</pre><p>&nbsp;</p>
<h2><a title="troubleshooting" name="troubleshooting"></a>Troubleshooting</h2>
<p>Here are two links to help with troubleshooting the video setup</p>
<p><a href="http://html5doctor.com/multimedia-troubleshooting/" target="_blank">Multimedia Troubleshooting</a>, <a href="http://www.longtailvideo.com/support/jw-player/28840/troubleshooting-your-setup/" target="_blank">longtailvideo.com</a></p>
<div class="info-box information"><strong>Note!</strong> Please let me know if you would like me add another player. It might take some time. Please let me know if I should include any points that are important(Pro, Cons, Info) to the different players.</div>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/complete-breakdown-of-responsive-videos/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
<enclosure url="http://media.sublimevideo.net/vpa/ms_360p.mp4" length="7380676" type="video/mp4" />
<enclosure url="http://media.sublimevideo.net/vpa/ms_720p.mp4" length="21067861" type="video/mp4" />
<enclosure url="http://media.sublimevideo.net/vpa/ms_360p.webm" length="7598002" type="application/wordperfect" />
<enclosure url="http://media.sublimevideo.net/vpa/ms_720p.webm" length="22717438" type="application/wordperfect" />
<enclosure url="http://testing.grappler.tk/files/2013/01/trailer_1080p.mp4" length="0" type="video/mp4" />
<enclosure url="http://testing.grappler.tk/files/2013/01/trailer_1080p.ogv" length="0" type="video/ogg" />
<enclosure url="http://mediaelement.grappler.tk/files/2013/02/trailer_1080p.mp4" length="3164361" type="video/mp4" />
<enclosure url="http://mediaelement.grappler.tk/files/2013/02/trailer_1080p.ogv" length="10851305" type="video/ogg" />
<enclosure url="http://videojs.grappler.tk/files/2013/02/trailer_1080p.m4v" length="11418426" type="video/mp4" />
<enclosure url="http://videojs.grappler.tk/files/2013/02/trailer_1080p.ogv" length="10851305" type="video/ogg" />
		</item>
		<item>
		<title>Enhance your Responsive Theme with Google Fonts</title>
		<link>http://themeid.com/enhance-your-responsive-theme-with-google-fonts/</link>
		<comments>http://themeid.com/enhance-your-responsive-theme-with-google-fonts/#comments</comments>
		<pubDate>Fri, 25 Jan 2013 02:28:41 +0000</pubDate>
		<dc:creator>christine</dc:creator>
				<category><![CDATA[Themes]]></category>

		<guid isPermaLink="false">https://themeid.com/?p=3247</guid>
		<description><![CDATA[One to the best thing about working with Responsive is that it comes with loads of options, yet is very simple to enhance. The fact that Emil has chosen to keep to arial as the base fonts makes the CSS<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/enhance-your-responsive-theme-with-google-fonts/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<p>One to the best thing about working with Responsive is that it comes with loads of options, yet is very simple to enhance. The fact that Emil has chosen to keep to arial as the base fonts makes the CSS super easy to enhance.</p>
<p>When modifying your Responsive theme, you will of course start by making a child theme! <a href="http://themeid.com/forum/user/2/">Emil</a>, being the support guru that he is, provided a link in his style.css with <a href="http://themeid.com/help/discussion/505/child-theme-example">details on how to get started</a> and a child theme example!</p>
<p>If you&#8217;re interested in creating your child theme, go ahead <a href="http://themeid.com/public/responsive-child-theme.zip">download the child theme example</a> and open it up with your favourite text editor.</p>
<p>In the style.css of the child theme, you&#8217;ll see some comments at the top which you can edit if you wish, but I wouldn&#8217;t bother (the information in there is very useful). On line 37, you&#8217;ll find another comment stating &#8220;Start from here&#8221;. This is where you can start adding your own style.</p>
<p>One of the easiest way to enhance your site is by changing fonts. And now that Google offers a large series of web fonts to choose from, we can achieve lots of different looks. Let&#8217;s say that we wanted to change our headings.</p>
<p>In the Responsive theme (the parent), you&#8217;ll find this following css on line 1113:</p>
<p></p><pre class="crayon-plain-tag">h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-weight: 700;
line-height: 1.0em;
word-wrap: break-word;
}</pre><p></p>
<p>Thus in your child theme, all we need to do is add a new font-family. Let&#8217;s head over to <a href="http://www.google.com/webfonts">Google&#8217;s list of fonts</a> and let&#8217;s choose one. Say we fancy <a href="http://www.google.com/webfonts/specimen/Libre+Baskerville">Libre Baskerville</a>, to use this font, you first need to <a href="http://www.google.com/webfonts#UsePlace:use/Collection:Libre+Baskerville">add the font to your collection</a> and click the Word Use in the bottom right hand corner.</p>
<p>Once selected, you&#8217;ll see that the blue screen at the bottom doesn&#8217;t move, and now you can scroll through the steps in the white part of the page. The first steps requires us to select the weight of our font. Let&#8217;s select the Bold and normal options.</p>
<p>The second is the character set. I usually leave my settings to default.</p>
<p>Third, is the method we will use to embed our fonts. Since we are making a child theme and we only want to make slight changes to our heading, we&#8217;ll click the @import tab and then copy the info and paste it in our child theme like so:</p><pre class="crayon-plain-tag">@import url(http://fonts.googleapis.com/css?family=Libre+Baskerville:400,700);</pre><p>Now back to our Google page, you&#8217;ll see that in step 4, the css needed is given to us. We&#8217;ll apply this to our style.css like so:</p><pre class="crayon-plain-tag">h1, h2, h3, h4, h5, h6, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
font-family: 'Libre Baskerville', serif;
}</pre><p>And that&#8217;s it. You&#8217;re done. The most difficult part of this will probably be choosing the font. There are so many to choose from. Here&#8217;s a <a href="http://hellohappy.org/beautiful-web-type/">beautiful example showcasing some of the best Google fonts</a>. Hopefully this will inspire you.</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/enhance-your-responsive-theme-with-google-fonts/feed/</wfw:commentRss>
		<slash:comments>16</slash:comments>
		</item>
		<item>
		<title>What&#8217;s New in Responsive?</title>
		<link>http://themeid.com/whats-new-in-responsive/</link>
		<comments>http://themeid.com/whats-new-in-responsive/#comments</comments>
		<pubDate>Tue, 15 Jan 2013 05:13:19 +0000</pubDate>
		<dc:creator>Emil Uzelac</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Responsive Updates]]></category>

		<guid isPermaLink="false">https://themeid.com/?p=3130</guid>
		<description><![CDATA[What to look for in the next* Responsive Release Even the smallest improvements are making me happy and there is nothing more awarding to see how many people actually use something you created. Correct, Improve and Release You know that<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/whats-new-in-responsive/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<h2>What to look for in the next* Responsive Release</h2>
<p>Even the smallest improvements are making me happy and there is nothing more awarding to see how many people actually use something you created.</p>
<h3>Correct, Improve and Release</h3>
<p>You know that old saying &#8220;this is good, but it could be better&#8221; and I cannot agree more, not just for Responsive, that should apply for anything with few lines of code.</p>
<p>Good, but not good enough, great, but not too great where things get over-complicated, over-bloated or just something that no longer serves the original purpose.</p>
<p>Recently I talked to my buddy <a href="https://twitter.com/chip_bennett">Chip Bennett</a> and realized that it is time to go over the Theme again, make it better and also to include some new awesome features.</p>
<div class="info-box information">This release is not available yet. Post is heads-up only!</div>
<h3 id="theme-options">Theme Options</h3>
<p>We now have new section where user can select default layouts</p>
<div id="attachment_3137" class="wp-caption aligncenter" style="width: 589px"><img class="size-full wp-image-3137" alt="Responsive Layouts" src="https://themeid.com/wp-content/uploads/2013/01/responsive-layouts.png" width="579" height="283" /><p class="wp-caption-text">Responsive Layouts</p></div>
<h3 id="post-layouts">Per-Post Basis Layouts</h3>
<p>Layouts that were previously included in Responsive Page Templates are now available for individual posts as well.</p>
<div id="attachment_3139" class="wp-caption aligncenter" style="width: 309px"><img class="size-full wp-image-3139 " alt="Per-Post / Per-Page Basis Layouts" src="https://themeid.com/wp-content/uploads/2013/01/per-pp-layout.png" width="299" height="177" /><p class="wp-caption-text">Per-Post / Per-Page Basis Layouts</p></div>
<p>For Responsive Child Theme, the layouts are completely filterable, making it easy to add any other layouts that you need.</p>
<h3 id="front-page">Proper Front-Page Handling</h3>
<p>In the next Responsive update, a couple of template files will be changing. A new template file, front-page.php, has been included. This template file renders Responsive&#8217;s custom site front page. The home.php template file will now render the blog posts index.</p>
<p>This change ensures that Responsive properly adheres to the <a href="http://codex.wordpress.org/Template_Hierarchy">WordPress template hierarchy</a>. Also, this change means that Responsive now has out-of-the-box support for the default WordPress reading settings configuration: blog posts displayed on the site front page.</p>
<p>The Blog and Blog &#8211; Excerpt custom page templates are still there, but now you won&#8217;t <em>have</em> to use them just to display your blog posts.</p>
<p>Instead, you can go to <em><a href="http://codex.wordpress.org/Settings_Reading_Screen">Settings</a> &gt; <a href="http://codex.wordpress.org/Settings_Reading_Screen#Reading_Settings">Reading</a></em>, and use the normal WordPress settings to configure static pages to display your site front page and blog posts index.</p>
<p>For those of you who have a child Theme with a customized home.php file, please take note:</p>
<div class="info-box notice">you will need to rename your child Theme&#8217;s home.php as front-page.php</div>
<p>That&#8217;s it! And in fact, you can make that change right now, and your site will continue to work properly.</p>
<p>For everyone else: you won&#8217;t have to change anything for your site front page.<br />
If you&#8217;re using the current home.php as your site front page, you won&#8217;t notice any changes. If you&#8217;re using a custom page template as your site front page, Responsive will continue to use it.</p>
<h3 id="theme-options-improvements">Theme Options Improvements</h3>
<p>The first change, you&#8217;ll only really notice when you first install Responsive; but in the next version, Responsive will use option defaults unless/until you configure settings. But for those of you using Responsive child Themes, the second change will be far more useful: Responsive&#8217;s option defaults will be completely filterable.</p>
<h3 id="template-part">Template-Part Files</h3>
<p>The next version of Responsive will be even easier to customize, thanks to quite a bit of DRY code, such as the loop header, post meta data, and loop navigation, being cleaned up, made consistent across multiple template files, and abstracted out into template-part files.</p>
<h3 id="theme-hooks">Theme Hook Alliance</h3>
<p>Responsive already had several hooks but now we have a full <a href="https://github.com/zamoose/themehookalliance">Theme Hook Alliance</a> integration as well.</p>
<p>Taking this opportunity to say thanks to Chip for helping me with Responsive.</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/whats-new-in-responsive/feed/</wfw:commentRss>
		<slash:comments>38</slash:comments>
		</item>
		<item>
		<title>Responsive Opt-Out plugin</title>
		<link>http://themeid.com/responsive-opt-out-plugin/</link>
		<comments>http://themeid.com/responsive-opt-out-plugin/#comments</comments>
		<pubDate>Mon, 14 Jan 2013 05:32:16 +0000</pubDate>
		<dc:creator>Ulrich Pogson</dc:creator>
				<category><![CDATA[Plugins]]></category>

		<guid isPermaLink="false">https://themeid.com/?p=3049</guid>
		<description><![CDATA[Responsive Opt-Out allows visitors of your site to switch between the flexible and fixed width layout. This simple setup creates a body class called &#8220;responsive&#8221; and &#8220;fixed-width&#8221; both are added to the body class of your Theme. These two classes<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/responsive-opt-out-plugin/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<p>Responsive Opt-Out allows visitors of your site to switch between the flexible and fixed width layout.</p>
<p>This simple setup creates a body class called &#8220;responsive&#8221; and &#8220;fixed-width&#8221; both are added to the body class of your Theme. These two classes are used to define whether or not visitor wants a &#8220;responsive&#8221; environment.</p>
<p>Here is a demo site that I have created using Responsive:</p>
<p><a class="button blue" href="http://opt-out-v3.grappler.tk/">Demo</a></p>
<p>This the code you use for the switch buttons.</p><pre class="crayon-plain-tag">&lt;a href="#" onclick="return FixedWidth();" class="fixed-width-link"&gt;Fixed Width&lt;/a&gt;
&lt;a href="#" onclick="return Responsive()" class="responsive-link"&gt;Reponsive&lt;/a&gt;</pre><p>This CSS would display the right button in the right view.</p><pre class="crayon-plain-tag">.responsive .fixed-width-link {
	display: block!important;
}
.responsive .responsive-link {
	display: none!important;
}
.fixed-width .fixed-width-link {
	display: none!important;
}
.fixed-width .responsive-link {
	display: block!important;
}</pre><p>Here I was working in a child theme so was unable to edit the parent media queries but was still able to get a good result resting the css in the media queries.</p>
<p>The basic fixed width CSS needed for Responsive would be:</p><pre class="crayon-plain-tag">/* =Fixed Width
-------------------------------------------------------- */
.fixed-width #container,
.fixed-width #footer {
	width: 960px!important;
}

.fixed-width .grid, 
.fixed-width .grid-right,
.fixed-width .menu ul, 
.fixed-width .menu li, 
.fixed-width .footer-menu li, 
.fixed-width .sub-header-menu li {
	float: left!important;
}

.fixed-width .top-menu {
	float: right!important;
}

.fixed-width #logo {
	float: left!important;
}

.fixed-width .tinynav {
	display: none!important;
}

.fixed-width .sb-holder {
	display: none!important;
}

.fixed-width .menu {
	display: block!important;
}

.fixed-width #featured p {
	font-size: 18px!important;
	line-height: 27px!important;
}

.fixed-width .featured-title {
	font-size: 60px!important;
}

.fixed-width .featured-subtitle {
	font-size: 2.25em!important;
}

.fixed-width .call-to-action a.button {
	font-size: 24px!important;
	padding: 15px 35px!important;
}

.top-widget {
	float: right!important;
}

.fixed-width .top-widget area,
.fixed-width .top-widget select,
.fixed-width .top-widget textarea,
.fixed-width .top-widget input[type="text"], 
.fixed-width .top-widget input[type="password"] {
	width: auto!important;
}

.fixed-width .widget-title,
.fixed-width .widget-title-home h3 {
	font-size: 24px!important;
	height: 23px!important;
	line-height: 23px!important;
	text-align: left!important;
}

.fixed-width .main-nav #responsive_current_menu_item {
	display: none!important;
}

.fixed-width .main-nav .menu {
	top: 0;
}

.fixed-width .main-nav .menu a {
	font-weight: 700!important;
}

.fixed-width .main-nav .menu li a {
	color: #fff;
	border: none;
}

.fixed-width .main-nav .menu li.current_page_item,
.fixed-width .menu .current_page_item a,
.fixed-width .menu .current-menu-item a,
.fixed-width .main-nav .menu li {
	background-color: transparent;
}

.js .fixed-width .main-nav .menu li a:hover,
.js .fixed-width .main-nav .menu li li a:hover {
	background-color: #808080;
	background-image: -webkit-gradient(linear,left top,left bottom,from(#808080),to(#363636));
	background-image: -webkit-linear-gradient(top,#808080,#363636);
	background-image: -moz-linear-gradient(top,#808080,#363636);
	background-image: -ms-linear-gradient(top,#808080,#363636);
	background-image: -o-linear-gradient(top,#808080,#363636);
	background-image: linear-gradient(top,#808080,#363636);
	color: #fff;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#808080,endColorstr=#363636);
}</pre><p><a class="button blue" title="Download plugin" href="http://wordpress.org/extend/plugins/responsive-opt-out/">Download</a></p>
<p>You can also find the plugin on <a href="https://github.com/grappler/responsive-opt-out">github.</a></p>
<h3>Extra</h3>
<p>I would be interested to see how many visitor use the button. You can track the number of click of the buttons with the use of Google analytic events. The results can be viewed in the Google Analytic dashboard. The html for these buttons will look like this.</p><pre class="crayon-plain-tag">&lt;a href="#" onclick="_gaq.push(['_trackEvent', 'Click', 'Responsive Opt-Out', 'Fixed Width']); return FixedWidth();" class="fixed-width-link"&gt;Fixed Width&lt;/a&gt;

&lt;a href="#" onclick="_gaq.push(['_trackEvent', 'Click', 'Responsive Opt-Out', 'Responsive']); return Responsive()" class="responsive-link"&gt;Reponsive&lt;/a&gt;</pre><p>&nbsp;</p>
<p>Thank you Andrew for supporting this plugin.</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/responsive-opt-out-plugin/feed/</wfw:commentRss>
		<slash:comments>15</slash:comments>
		</item>
		<item>
		<title>FREE PSD Logo Templates</title>
		<link>http://themeid.com/free-psd-logo-templates/</link>
		<comments>http://themeid.com/free-psd-logo-templates/#comments</comments>
		<pubDate>Fri, 04 Jan 2013 07:19:52 +0000</pubDate>
		<dc:creator>Emil Uzelac</dc:creator>
				<category><![CDATA[Free Stuff]]></category>
		<category><![CDATA[Free PSD Logos]]></category>

		<guid isPermaLink="false">https://themeid.com/?p=2990</guid>
		<description><![CDATA[Set of 10 GPL Photoshop Logos It is that time again when ThemeID awards you with some free stuff. 10 logo templates for your company or personal site, the choice is yours. Number of Logos: 10 File Type: PSD (Photoshop)<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/free-psd-logo-templates/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<h2>Set of 10 GPL Photoshop Logos</h2>
<p>It is that time again when ThemeID awards you with some free stuff.</p>
<p>10 logo templates for your company or personal site, the choice is yours.</p>
<ul>
<li><strong>Number of Logos:</strong> 10</li>
<li><strong>File Type:</strong> PSD (Photoshop)</li>
<li><strong>Resolution:</strong> 300dpi</li>
<li><strong>Print-Ready:</strong> Yes</li>
<li><strong>Fonts Used:</strong><a href="http://www.google.com/webfonts" rel="nofollow">Google Web Fonts</a></li>
<li><strong>Layered:</strong> Yes</li>
<li><strong>License:</strong> <a title="License" href="https://themeid.com/license/" rel="nofollow">GPL v3</a></li>
</ul>
<div id="attachment_3012" class="wp-caption aligncenter" style="width: 630px"><img class="size-full wp-image-3012" alt="100% GPL v3" src="https://themeid.com/wp-content/uploads/2013/01/gpl-logos.png" width="620" height="820" /><p class="wp-caption-text">100% GPL v3</p></div>
<div class="large center">	<p class="remove-p">

		Free
		<a href="/feed/?add-to-cart=3014&#038;_n=b97c8a04a0" class="button" rel="nofollow">Add to cart</a>
	</p></div>
<p>All new downloads are now powered by Jigoshop eCommerce Plugin and Add to cart is a registration page that leads to a <strong>FREE</strong> download link.</p>
<p>Enjoy,<br />
Emil</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/free-psd-logo-templates/feed/</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
		<item>
		<title>Year in Review: Responsive</title>
		<link>http://themeid.com/year-in-review-responsive/</link>
		<comments>http://themeid.com/year-in-review-responsive/#comments</comments>
		<pubDate>Mon, 31 Dec 2012 07:45:43 +0000</pubDate>
		<dc:creator>Emil Uzelac</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Year in Review]]></category>

		<guid isPermaLink="false">http://themeid.com/?p=2896</guid>
		<description><![CDATA[One day before 2013 and it&#8217;s time to look back at 2012 I would like to take this opportunity to say thanks to all involved with Responsive Theme, especially Ulrich Pogson who has been helping with Theme localizations, languages improvements<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/year-in-review-responsive/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<h2>One day before 2013 and it&#8217;s time to look back at 2012</h2>
<p>I would like to take this opportunity to say thanks to all involved with Responsive Theme, especially Ulrich Pogson who has been helping with Theme localizations, languages improvements and for being on ThemeID forum daily.</p>
<p>Thank you for supporting Responsive with your donations, your 86 reviews and for giving 4.7 out of 5 stars and for being patient in our forum and around many improvements and changes we had since March.</p>
<p>Thanks also goes to WPMU and <a href="http://untame.net/">Sarah Gooding</a>, for being the first to feature Responsive Theme, but also to all others after that as well.</p>
<hr />
<p><strong>03/16/2012</strong> — Responsive was released. 10 days later, Theme was already downloaded <a title="Responsive WordPress Theme reaches over 10,000 downloads in 10 days" href="http://themeid.com/responsive-wordpress-theme-reaches-over-10000-in-10-days/">10,000</a> times.</p>
<hr />
<p><strong>04/26/2012</strong> — Responsive reached <a title="Responsive Theme 50,000 Downloads" href="http://themeid.com/responsive-theme-50000-downloads/">50,000</a> downloads.</p>
<hr />
<p><strong>05/21/2012</strong> — With the help from Ulrich Pogson we started getting some serious <a title="Responsive Theme Localization" href="http://themeid.com/responsive-theme-localization/">translations</a>.</p>
<hr />
<p><strong>06/02/2012</strong> — Theme surpassed <a title="Responsive Downloaded 100,000 Times!" href="http://themeid.com/responsive-downloaded-100000-times/">100,000</a> downloads and it was featured on <a href="http://wpmu.org/how-responsive-became-the-most-popular-free-wordpress-theme-in-just-3-months/">WPMU</a> under the title &#8220;How Responsive Became the Most Popular Free WordPress Theme in Just 3 Months&#8221;</p>
<hr />
<p><strong>07/20/2012</strong> — Translated into 22 languages and WPML Multilingual Ready</p>
<hr />
<p><strong>08/15/2012</strong> — Responsive reaches <a title="Responsive Theme Reaches 200,000 Downloads" href="http://themeid.com/responsive-theme-reaches-200000-downloads/">200,000</a> downloads.</p>
<hr />
<p><strong>09/11/2012</strong> — Retina (HiDPI) Display Support.</p>
<hr />
<p><strong>12/09/2012</strong> — Responsive becomes a parent of the first commercial child Theme called <a title="Canonical Theme" href="http://themeid.com/canonical-child-theme/">Canonical</a></p>
<hr />
<p><strong>12/23/2012</strong> — Translated into <a title="Say Hello World in 40 Languages" href="http://themeid.com/say-hello-world-in-40-languages/">40</a> languages.</p>
<hr />
<p><strong>12/26/2012</strong> — Responsive Theme Hits <a title="Responsive Theme Hits 400,000 Downloads" href="http://themeid.com/responsive-theme-hits-400000-downloads/">400,000</a> Downloads.</p>
<hr />
<p>Also, I would like to mention Spencer Forman the &#8220;Evil Genius&#8221; from LabSecrets for promoting the Theme and for making great video tutorials and Ivan Miletic our newest Support Volunteer. Thanks guys!</p>
<p>I&#8217;ve created Responsive and gave every second of my spare time each day, not just to assist with the setup, but also to help individuals, businesses and non-profit organizations to re-design their sites. </p>
<p>However <strong>you&#8217;re the one</strong> that made my Theme the most popular in past 9 months and <strong>without your help</strong> Theme would not be where it is now.</p>
<p>Happy New Year!<br />
Emil Uzelac</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/year-in-review-responsive/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Responsive Theme Hits 400,000 Downloads</title>
		<link>http://themeid.com/responsive-theme-hits-400000-downloads/</link>
		<comments>http://themeid.com/responsive-theme-hits-400000-downloads/#comments</comments>
		<pubDate>Thu, 27 Dec 2012 02:05:19 +0000</pubDate>
		<dc:creator>Emil Uzelac</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Responsive Downloads]]></category>

		<guid isPermaLink="false">http://themeid.com/?p=2863</guid>
		<description><![CDATA[Tonight I am happy to announce that Responsive Theme was downloaded 400,000 times in 9 months and numbers are definitely much larger from what I have expected. Responsive Theme Since 03/16/2012: 400,000 Downloads 40 Languages Community of 4300 Members and<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/responsive-theme-hits-400000-downloads/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<p>Tonight I am happy to announce that Responsive Theme was downloaded <a href="http://wordpress.org/extend/themes/responsive/stats/" rel="nofollow">400,000</a> times in 9 months and numbers are definitely much larger from what I have expected.</p>
<h3>Responsive Theme Since 03/16/2012:</h3>
<ul>
<li>400,000 Downloads</li>
<li>40 Languages</li>
<li>Community of 4300 Members and 25,000 posts</li>
</ul>
<p>I personally cannot be happier with this achievement.</p>
<p>Thank you and Happy Holidays!</p>
<p>Emil</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/responsive-theme-hits-400000-downloads/feed/</wfw:commentRss>
		<slash:comments>4</slash:comments>
		</item>
		<item>
		<title>Say Hello World in 40 Languages</title>
		<link>http://themeid.com/say-hello-world-in-40-languages/</link>
		<comments>http://themeid.com/say-hello-world-in-40-languages/#comments</comments>
		<pubDate>Mon, 24 Dec 2012 03:22:51 +0000</pubDate>
		<dc:creator>Emil Uzelac</dc:creator>
				<category><![CDATA[News]]></category>
		<category><![CDATA[Languages]]></category>
		<category><![CDATA[Theme Localization]]></category>

		<guid isPermaLink="false">http://themeid.com/?p=2843</guid>
		<description><![CDATA[ThemeID makes it easy for Responsive users around the world We are overly excited to announce that Responsive Theme is now translated into 40 languages. Arabic Bulgarian Catalan Chinese, China Chinese, Taiwan Croatian Czech Danish Dutch Estonian Finish French German<span class="ellipsis">&#8230;</span><div class="read-more"><a href="http://themeid.com/say-hello-world-in-40-languages/">Read more &#8250;</a></div><!-- end of .read-more -->]]></description>
				<content:encoded><![CDATA[<h2>ThemeID makes it easy for Responsive users around the world</h2>
<p>We are overly excited to announce that Responsive Theme is now translated into 40 languages.</p>
<div class="grid col-460">
<ul>
<li>Arabic</li>
<li>Bulgarian</li>
<li>Catalan</li>
<li>Chinese, China</li>
<li>Chinese, Taiwan</li>
<li>Croatian</li>
<li>Czech</li>
<li>Danish</li>
<li>Dutch</li>
<li>Estonian</li>
<li>Finish</li>
<li>French</li>
<li>German</li>
<li>German Formal</li>
<li>Greek</li>
<li>Korean</li>
<li>Hebrew</li>
<li>Hindi</li>
<li>Hungarian</li>
<li>Icelandic</li>
</ul>
</div>
<div class="grid col-460 fit">
<ul>
<li>Indonesian</li>
<li>Italian</li>
<li>Japanese</li>
<li>Latvian</li>
<li>Lithuanian</li>
<li>Malay</li>
<li>Norwegian Bokmål</li>
<li>Persian</li>
<li>Polish</li>
<li>Portuguese, Brazil</li>
<li>Portuguese, Portugal</li>
<li>Serbian</li>
<li>Romanian</li>
<li>Russian</li>
<li>Slovak</li>
<li>Slovenian</li>
<li>Spanish</li>
<li>Swedish</li>
<li>Turkish</li>
<li>Welsh</li>
</ul>
</div>
<h3>Since 03/16/2012</h3>
<p>Almost 400,000 downloads, 4.7 out of 5 stars rating on WordPress.org. Followed by over 4,200 forum members and about 25,000 posts.</p>
]]></content:encoded>
			<wfw:commentRss>http://themeid.com/say-hello-world-in-40-languages/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>
