ThemeShaper Forums

Help In Shaping WordPress Themes

Register or log in:

Username:
Password:

Remember me

ThemeShaper Forums » Thematic

1. 

   chris_s
   Member

   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.

   function ipad_css() {
   if( preg_match('/ipad/i',$_SERVER['HTTP_USER_AGENT'])) {?>
       <link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/ipad.css" media="screen" />
   	<?php }
   }
   add_action('wp_print_styles','ipad_css');

   In the event it matters, this is what is in my ipad.css stylesheet.
   

   @import url('../style.css');
   
   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;
   }

   Posted 1 year ago #
2. 

   middlesister
   Member

   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.

   Posted 1 year ago #
3. 

   chris_s
   Member

   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?

   Posted 1 year ago #
4. 

   middlesister
   Member

   Have you tried using media queries instead?
   http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

   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

   /* 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;
   	}
   }

   Otherwise, you can load a separate ipad stylesheet with
   

   <link rel="stylesheet" href="ipad.css" media="only screen and (min-device-width : 768px) and (max-device-width : 1024px)">

   No need to do a preg match in that case.

   Posted 1 year ago #
5. 

   helgatheviking
   Moderator

   $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');

   should give a true or false
   from: http://davidwalsh.name/detect-ipad

   and if you want to use that INSTEAD of the regular style.css then this tut might be helpful:

   http://programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/

   Posted 1 year ago #
6. 

   chris_s
   Member

   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.

   Posted 1 year ago #
7. 

   zorro
   Member

   So, what happens if someone is using, say, a macbook pro or an old laptop with >1024px?

   Posted 1 year ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.