Theme Color Support for Mobile Devices

[Keith Rozett]

Hi everyone,

I'd like to announce that ProBoards now supports theme color customization for your mobile users!

Here's how it works: if a user visits your forum on a mobile device, the color scheme from their chosen theme will be applied. Background images, fonts, sizes, and template changes will not be applied, however. Only the colors. This works as long as the user is using an updated mobile-compatible theme. If you have updated your default theme, it even works for guests who visit your forum, or users who never changed their theme.

How do you make your theme mobile-compatible? It's easy.

When you save a theme using the Colors & Theme Creator or the Advanced Styles & CSS page (either Visual Editor or Style Sheet view), it will automatically make your theme mobile-compatible. All themes that are created or saved from this point forward will be mobile-compatible. In addition, any theme that you install from our Theme Library will be mobile-compatible, so you don't have to do anything. If you install a theme file that you downloaded from somewhere else, it may not be mobile-compatible (it depends on when it was last saved). But if you re-save it, it will become mobile-compatible if it wasn't already.

So to summarize: if you would like mobile users to get the benefit of your custom themes, all you have to do is re-save all of your themes. You don't even need to make changes - just hit the Save Theme button!

[Thomasss]

Glad to hear!!

[Shrike]

What exactly doe "mobile-compatible" do? I don't see any changes to the CSS when I update a theme.

Also, is there a query string (like ?notemplates=1) to allow us to quickly switch to the mobile view? Showing the mobile link in the template doesn't work for me (and isn't a sensible way of doing it). Not everyone would know how to change their browser user agent either.

Edit: Also, it'd be handy for when I'm using an obscure device like a 3DS because it gets the desktop view simply because it doesn't say Android/iOS/phone.

[Thomasss]

Apr 28, 2013 8:52:21 GMT -8 Shrike said:

What exactly doe "mobile-compatible" do? I don't see any changes to the CSS when I update a theme.

Also, is there a query string (like ?notemplates=1) to allow us to quickly switch to the mobile view? Showing the mobile link in the template doesn't work for me (and isn't a sensible way of doing it). Not everyone would know how to change their browser user agent either.

Mobile Compatible means that the theme is able to appear on a mobile phone. Computers and phones are different when it comes to the coding capability. So CSS would not show on the mobile part. Like Keith Rozett said, it only has the colors of the theme. 

[Shrike]

Apr 28, 2013 8:59:43 GMT -8 Thomasss said:

Apr 28, 2013 8:52:21 GMT -8 Shrike said:

What exactly doe "mobile-compatible" do? I don't see any changes to the CSS when I update a theme.

Also, is there a query string (like ?notemplates=1) to allow us to quickly switch to the mobile view? Showing the mobile link in the template doesn't work for me (and isn't a sensible way of doing it). Not everyone would know how to change their browser user agent either.

Mobile Compatible means that the theme is able to appear on a mobile phone. Computers and phones are different when it comes to the coding capability. So CSS would not show on the mobile part. Like Keith Rozett said, it only has the colors of the theme. 

Thanks, but I got that part I was wondering what the technical change it made was, even if the CSS doesn't change. And for reference, the CSS does show on the mobile view.

[Keith Rozett]

Apr 28, 2013 8:52:21 GMT -8 Shrike said:

What exactly doe "mobile-compatible" do? I don't see any changes to the CSS when I update a theme.

The CSS does change, but we feed a different CSS file to mobile agents - that's the one you are seeing in Chrome's dev tools. The mobile CSS file is generated automatically by us, and we fill in various values from your color scheme. So there is CSS customization going on, it's just not something forum admins can directly edit.

Also, is there a query string (like ?notemplates=1) to allow us to quickly switch to the mobile view? Showing the mobile link in the template doesn't work for me (and isn't a sensible way of doing it). Not everyone would know how to change their browser user agent either.

I don't know if this is something the average user would want to do - the mobile version lacks some features of the desktop version, to accommodate the smaller screen. Is there a particular use case that you had in mind?

Edit: Also, it'd be handy for when I'm using an obscure device like a 3DS because it gets the desktop view simply because it doesn't say Android/iOS/phone.

The 3DS is getting added to our list of detected mobile devices, at some point in the not-too-distant future.

[Shrike]

Apr 29, 2013 8:24:06 GMT -8 Keith Rozett said:

Apr 28, 2013 8:52:21 GMT -8 Shrike said:

What exactly doe "mobile-compatible" do? I don't see any changes to the CSS when I update a theme.

The CSS does change, but we feed a different CSS file to mobile agents - that's the one you are seeing in Chrome's dev tools. The mobile CSS file is generated automatically by us, and we fill in various values from your color scheme. So there is CSS customization going on, it's just not something forum admins can directly edit.

I realised after posting that seeing no changes to the CSS was what I wanted to confirm, and I confirmed it for myself by doing so

Also, is there a query string (like ?notemplates=1) to allow us to quickly switch to the mobile view? Showing the mobile link in the template doesn't work for me (and isn't a sensible way of doing it). Not everyone would know how to change their browser user agent either.

I don't know if this is something the average user would want to do - the mobile version lacks some features of the desktop version, to accommodate the smaller screen. Is there a particular use case that you had in mind?[/quote]

Mainly for seeing what it would look like, including styles in posts (unless those are supported in mobile view). I was going to post more, but come to the conclusion that if someone'd want to have the ability by default, they'd probably know how to do it anyway.

Edit: Also, it'd be handy for when I'm using an obscure device like a 3DS because it gets the desktop view simply because it doesn't say Android/iOS/phone.

The 3DS is getting added to our list of detected mobile devices, at some point in the not-too-distant future. [/quote]

I'm glad to hear the 3DS is getting added. My actual mobile phone gets served the desktop view if I use the built-in browser (I normally use Opera Mini [well, maybe once a year]), but there's only so far you can try detecting a mobile device before it gets silly.

[lillyandrew]

Feeling happy to see it! COOL!