ThemeShaper Forums » Thematic

[closed]

Alternate stylesheet for iPad

(7 posts)
  • Started 2 years ago by chris_s
  • Latest reply from zorro
  • This topic is resolved
  1. 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 2 years 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 2 years ago #
  3. 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 2 years 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 2 years ago #
  5. $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 2 years ago #
  6. 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 2 years ago #
  7. zorro
    Member

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

    Posted 2 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.