http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sun, 19 May 2013 16:51:38 +0000 http://themeshaper.com/forums/topic/alternate-stylesheet-for-ipad#post-25130 Tue, 31 Jan 2012 13:47:42 +0000 zorro 25130@http://themeshaper.com/forums/ <p>So, what happens if someone is using, say, a macbook pro or an old laptop with &gt;1024px? </p> http://themeshaper.com/forums/topic/alternate-stylesheet-for-ipad#post-22474 Fri, 29 Jul 2011 15:44:03 +0000 chris_s 22474@http://themeshaper.com/forums/ <p>I feel like such an idiot. I don't know why I didn't even think about media queries. I think that could work just the same for this instance. Thanks guys. I'm definitely going to take a look at the tutorial as well. It's always helpful to have these in your arsenal. </p> http://themeshaper.com/forums/topic/alternate-stylesheet-for-ipad#post-22473 Fri, 29 Jul 2011 14:57:09 +0000 helgatheviking 22473@http://themeshaper.com/forums/ <pre><code>$isiPad = (bool) strpos($_SERVER[&#39;HTTP_USER_AGENT&#39;],&#39;iPad&#39;);</code></pre> <p>should give a true or false<br /> from: <a href="http://davidwalsh.name/detect-ipad" rel="nofollow">http://davidwalsh.name/detect-ipad</a></p> <p>and if you want to use that INSTEAD of the regular style.css then this tut might be helpful:</p> <p><a href="http://programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/" rel="nofollow">http://programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/</a> </p> http://themeshaper.com/forums/topic/alternate-stylesheet-for-ipad#post-22471 Fri, 29 Jul 2011 05:18:55 +0000 middlesister 22471@http://themeshaper.com/forums/ <p>Have you tried using media queries instead?<br /> <a href="http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries" rel="nofollow">http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries</a></p> <p>Since code is not so long, you can add your css declarations directly in your style.css and not worry about loading an extra stylesheet</p> <pre><code>/* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { body.page { background: #6d80b5; } body.page #ipad-back { display: none; } #ipad-back { background: url(images/menu-btn.png) no-repeat scroll 0 0 transparent; height: 45px; width: 134px; float: right; margin-bottom: 25px; } #ipad-back a { display: inline-block; color: #fff; font-weight: bold; position: relative; top: 10px; left: 25px; } }</code></pre> <p>Otherwise, you can load a separate ipad stylesheet with<br /> <pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;ipad.css&quot; media=&quot;only screen and (min-device-width : 768px) and (max-device-width : 1024px)&quot;&gt;</code></pre> <p>No need to do a preg match in that case. </p> http://themeshaper.com/forums/topic/alternate-stylesheet-for-ipad#post-22465 Thu, 28 Jul 2011 19:23:27 +0000 chris_s 22465@http://themeshaper.com/forums/ <p>Well this worked for this one. Thanks for helping to clear that up! I'm fairly up to speed with CSS but maybe there's a more logical way to do this. When the iPad loads the page, it first loads a repeating bg image, which is in my main style.css, then loads the ipad.css file. So there's a flash that takes effect before the body.page bg loads from the ipad.css file. Do you think there's a more efficient way to do the CSS for this instance? Should I be loading the ipad.css differently? </p> http://themeshaper.com/forums/topic/alternate-stylesheet-for-ipad#post-22464 Thu, 28 Jul 2011 18:52:52 +0000 middlesister 22464@http://themeshaper.com/forums/ <p>Maybe it's the same thing here as in the other thread: use get_stylesheet_directory_uri instead of get_template_directory_uri. The former refers to your child theme, while the latter refers to the thematic parent theme. </p> http://themeshaper.com/forums/topic/alternate-stylesheet-for-ipad#post-22457 Thu, 28 Jul 2011 15:59:20 +0000 chris_s 22457@http://themeshaper.com/forums/ <p>I'm have a lot of fun with this one! So I have the following code and it's not working. Should I be using a Thematic hook instead? Where am i going wrong with this? It does work with an absolute URL address, but I obviously do not want that in the event things change down the line.</p> <pre><code>function ipad_css() { if( preg_match(&#39;/ipad/i&#39;,$_SERVER[&#39;HTTP_USER_AGENT&#39;])) {?&gt; &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;&lt;?php echo get_template_directory_uri(); ?&gt;/ipad.css&quot; media=&quot;screen&quot; /&gt; &lt;?php } } add_action(&#39;wp_print_styles&#39;,&#39;ipad_css&#39;);</code></pre> <p>In the event it matters, this is what is in my ipad.css stylesheet.<br /> <pre><code>@import url(&#39;../style.css&#39;); body.page { background: #6d80b5; } body.page #ipad-back { display: none; } #ipad-back { background: url(images/menu-btn.png) no-repeat scroll 0 0 transparent; height: 45px; width: 134px; float: right; margin-bottom: 25px; } #ipad-back a { display: inline-block; color: #fff; font-weight: bold; position: relative; top: 10px; left: 25px; }</code></pre>