Jump to content


Photo
- - - - -

Handheld CSS only possible?


  • Please log in to reply
7 replies to this topic

#1 elia.malmsten@gmail.com

elia.malmsten@gmail.com

    Newbie

  • Members
  • 1 posts

Posted 30 March 2012 - 01:21 PM

Hi! I love the new handheld view. But I was wondering if it is possible to apply specific css for handheld devices?

#2 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 30 March 2012 - 02:18 PM

it is, but only with javascript... if you program your css correctly, you shouldnt need it. That is what responsive design is all about. Instead of width: u use max-width: and so on...

#3 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 30 March 2012 - 02:22 PM

You can also check out the Browser Specific CSS plugin available in the PL Store. It allows you to write custom CSS on a per-browser basis.

#4 gyoery

gyoery

    Advocate

  • Members

  • 252 posts
  • Country: Country Flag

Posted 31 March 2012 - 12:09 AM

actually it should even be possible without javascript... its just a few lines in your header script aeria: It doesnt actually check what system but only the screen size.

#5 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 31 March 2012 - 09:34 PM

The best method, as recommended by Simple Mama, is the Browser Specific CSS plugin available at our store. Thanks @gyoery for your unput and effort but in this case, the plugin is much more specific to handle different types of mobile devices based on their specific OS. That's why we built it and made it available to everyone. ;-)

#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17919 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 01 April 2012 - 01:03 PM

Hi,

I will see if we can get this added to our documentation but...

Add browser specific classes to the main body tags for all major browsers and devices.

This plugin will add a custom body tag depending on what browser/device is viewing the page.

Normal body tag might look like this:
 <body class="home blog logged-in admin-bar custom responsive pagelines posts full_width ">

With the plugin enabled and viewing in chrome it looks like this:
 <body class="home blog logged-in admin-bar custom responsive pagelines posts full_width desktop chrome">

These added classes can be used for advanced css to target specific selectors per browser/device.

Full list of classes:

 .handheld
	.mobile
	.desktop
	.ios
	.tablet
	.iphone
	.ipad
	.ipod
	.android
	.blackberry
	.opera-mobile
	.palm
	.symbian
	.windows-mobile
	.lg
	.motorola
	.nokia
	.samsung
	.samsung-galaxy-tab
	.sony-ericsson
	.nintendo
	.desktop
	.lynx
	.firefox
	.opera
	.safari
	.chrome
	.ie

If Internet explorer is detected the version will also be added like ie7.

Disclamer: This plugin does NOT add css and fix pages for specific browsers, it only adds body classes to help you.

#7 WebWerx

WebWerx

    Advocate

  • Members
  • 546 posts
  • LocationCanada
  • Framework Version:2.2
  • Country: Country Flag

Posted 10 July 2012 - 04:01 PM

Hey @Danny: Did this stuff every get added to the docs? Any more tits around the forums related to tweaking this stuff?

#8 Jenny

Jenny

    Advocate

  • Unicorn Store Dev

  • 2924 posts
  • LocationWV
  • Country: Country Flag

Posted 10 July 2012 - 04:16 PM

http://www.pagelines...ficcss:MainPage