My friend and colleague Bill from Grumpy Engineering  helped me with this one:

I added this to the php block at the head of my template:

$isIPad = preg_match('/ipad/i', trim($_SERVER['HTTP_USER_AGENT']));
if ($isIPad) $device="ipad";
else $device="not-ipad";

and then could use

class=“<(question mark)php echo $device;  ?>”   on the body element of the index.php file.

(Of course I also added a line to the template with that variable for testing  that would display the results and not force me to examine the code to see if it was working.)

In my stylesheet I could then write rules specifically for the ipad:

.ipad  element-needing-custom-styles  {property: value;}

I was doing this to solve a problem with how the quicktime player displayed on the ipad (fallback for no flash when using Allvideos)

I increased the height of the player container to 72 px in the plugin parameters,  then set the theses styles:

/* adjust allVideos audio player */

.avPlayerWrapper {text-align:left; width:230px; clear:none; }
        .avPlayerWrapper .avPlayerContainer {margin:0;}

.avAudio .avPlayerContainer {height:24px; overflow:hidden; }
        .avAudio .avPlayerBlock {position:relative; top:-48px;}

#ipad .avAudio .avPlayerContainer {height:72px;}
         #ipad .avAudio .avPlayerBlock {position:relative; top:0;}

The results made mp3 players that were ugly, but functional.

The much better solution was to use WidgetKit’s Media Player from YooThemes.com, but I’m still glad to know how to target the ipad specifically should I ever need to.

I needed to create a print-only header  that would include the full url of the current page, so that we could be sure that users would print the full url of the page (and not depend on browser settings)

Continue Reading

Using conditional statements you can control whether your template creates a div and module position for a left or right sidebar depending on whether a module exists for any given page.   But this does not cause the content to stretch to fill that available space when no sidebar modules are present.

It IS possible to use conditional statements in the opening php block of your template to set values of variables which are then used in the template to create divs with different classes depending on the modules present.

For this example I’m using a liquid design with a left column width of 20%, and a right column width of 30%.   Left and center columns are floated left, right column is floated right. Two background images are used to create the faux columns. The content area will be either 50%, 70%, 80% or 100% depending on the presence of modules for the left or right columns.

I add these 4 lines to the opening php block:
if($this->countModules(‘left + right’) > 0) $layout=”50″;
if($this->countModules(‘right’) <= 0) $layout=”80″;
if($this->countModules(‘left’) <= 0) $layout=”70″;
if($this->countModules(‘left + right’) <= 0) $layout=”100″;

and in my html I reference that variable wherever needed like this: