Browser Specific CSS

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

Support PageLines Development A majority of funds from Store purchases go to the developer of the extension.
Note PageLines Framework version 2 or better is required to use this extension.

Click To Add A Review ↓

Submit your review
Name: *
Email: *
Website:
Review Title:
Rating:	1 2 3 4 5
Review:

* Required Field Check this box to confirm you are human.

Hmmmm, it's free, but how do I work it

Dec 21, 2011 by joshua

Price is right...but I am wondering how it all works. Maybe I should know how to do this, but a little documentation wold be nice.

I noticed that this plug-in was originally something Simon P posten on a forum as a fix for someone, but there is no real explanatio nas to how it actually works. Again...maybe I should know, but I am just not that smart.

http://bapjc.org

Response: Joshua, thanks for the review. The plugin actually adds new classes to the main body tag in the html of your page, so if your viewing the page on a PC in chrome, it adds desktop chrome to the tags, if your on an iphone it adds iphone, it supports all major browsers and mobile/tablets. This makes it possible to target these browsers in your custom css.

Support for store products is hosted on the PageLines Forums. The comments below are for Pre-Sales questions only.

Product Support

18 comments

Newest | Oldest

mpdStudios

GREAT PLUG-IN! Must admit though some documentation would be helpful – but it works! Case in point, had some issues with Explorer 10. The HTML tag listed in the body class shows "desktop ie ie10" near the end of the code. I put .ie { } in my css. Didn't work. I put .ie .ie10 { } in my css. Didn't work. This DID work:

.desktop.ie div.background.center {margin-top: -30px;}

Note there are no spaces between "desktop" or the periods or "ie". This effects all Explorer browsers unless you specify with the addition ".ieX" (X being the browser number you're targeting).

I'm assuming that the type of browser must be noted in order for the plugin to take hold. Whatever the case – it works. I'm only posting this in hopes that someone else finds it helpful.

Peace.

Dannyh moderator

@mpdStudios We have documentation for the Browser Specific CSS plugin, which includes a few examples on how to use the plugin.

http://support.pagelines.me/docs/plugins/browser-specific-css/

mpdStudios

@Dannyh Thanks. If I may suggest that the DIRECT LINKS to the Product Support page be placed on the pages displaying the products for download. It would make things a lot more user-friendly when searching for info in a hurry.

martin Pagelines moderator

@mpdStudios Than you for your suggestion which has been passed on to the person responsible for this. Great idea by the way.

andrewjdmartin

I needed the plugin to also detect the (desktop) operating system. For example, sometimes you only want to target Chrome on Windows or Firefox on Mac. So I added a few new functions to it so it adds body classes of "windows", "mac", and "linux". If you would like me to send you the modified plugin for you to consider adding it to the official release, let me know.

James (Pagelines) moderator

@andrewjdmartin Hi Andrew, thanks for posting. You're welcome to send in your amended plugin and we'll pass it over to the developer team to take a look. Email it to the main hello@pagelines.com address :-)

JelleBrouwer

Hi,

Great plugin. However, it is not working on Buddypress Pages. Could this be added? Would be really nice to style the member profiles for mobile devices.

Gayatriom

hi. But how do I use this if I'm trying to fix css for the iphone while on my mac?

wworks

how does this compare to the CSS Browser Selector javascript. it also allows you to create custom CSS per browser just by adding a .browsername in the CSS. Sounds simple to use but adds a .js file to your site.

thoughts?

Dannyh moderator

@wworks From your description it sounds very similar to our plugin.

benyschonfeld

Now that Pagelines uses LESS, is this plugin still necessary? Thx

Dannyh moderator

@benyschonfeld Yes, as it allows you to target specific devices such as ipad, iphone and browsers.

benyschonfeld

@Dannyh @benyschonfeld Where can I find documentation about the specific classes I can use with this plugin???

JacobHeflin

Can you give us an example to go off of?

highergroundstudio

@JacobHeflin Lets say you are on your laptop and on chrome, it will add desktop and chrome to your body class like so: class="home blog logged-in admin-bar custom responsive pagelines-template-theme posts full_width desktop chrome".

wworks

@highergroundstudio Wow that's a long class name!

wworks

@Dannyh Thanks! I thought I was funny. sorry.

Dannyh moderator

@wworks They're different classes, not one. :D

the PageLines Store

Browser Specific CSS

Hmmmm, it's free, but how do I work it

Standard License

PageLines