We hope you enjoy your visit.

You're currently viewing our forum as a guest. This means you are limited to certain areas of the board and there are some features you can't use. If you join our community, you'll be able to access member-only sections, and use many member-only features such as customizing your profile, sending personal messages, and voting in polls. Registration is simple, fast, and completely free.


Join our community!


If you're already a member please log in to your account to access all of our features:

Username:   Password:
Add Reply
  • Pages:
  • 1
  • 3
  • 4
Mobile Themes
Topic Started: Sep 16 2011, 09:43 PM (11,399 Views)
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
A lot of administrators are now adding mobile themes to their board for mobile use. The usage of the internet has become more and more popular for mobile devices, so it's a good thing to consider. You can learn all about mobile-specific CSS in this article. Creating a separate theme for mobile devices is your best solution, because if you're trying to apply separate CSS for every theme via the Javascripts wrapper, the Theme Layout and all the CSS will be applied to that theme in addition to the mobile-specific CSS, so it's a lot harder to make mobile-specific CSS properly be applied to all themes instead of one. Mobile themes are generally imageless, it makes it friendlier to browse that way. display: none; is often used on elements to remove portions of the theme on mobile devices.


+ Mobile CSS file:

Affects all themes: Admin CP Posted Image Themes Posted Image Board Template Posted Image Javascripts
Code:
 
<link rel="stylesheet" href="handheld.css" media="handheld, only screen and (max-device-width:480px)" />
Change handheld.css to your mobile CSS file.


+ Mobile CSS selector:

Affects one theme: Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Appearance
Code:
 
@media handheld, only screen and (max-device-width:480px) {
#logo {
display: none;
}
}


+ Add a 'mobile' class to the body tag

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
if (screen.width <= 480 || navigator.userAgent.match(/iPad/i)) {
$('body').addClass('mobile');
}
//]]>
</script>


+ Make it so the Google AdSense ads do not stretch the screen

Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Layout: Very Bottom
Code:
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=0" />
Admin CP Posted Image Themes Posted Image Themes Posted Image Edit Theme Appearance
Code:
 
#main {
overflow-x: hidden;
}


+ Make your board automatically switch to the mobile theme on mobile devices:

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
if (screen.width <= 480 || navigator.userAgent.match(/iPad/i)) {
default_theme = "NAME_OF_THEME";

if (location.href.match("/")) {
if ($("#setskin option:selected").html() !== default_theme) {
$("#setskin").val($("#setskin option:contains(" + default_theme + ")").val()).parent().submit();
} else {
$("#setskin").parent().html("Theme: <em>" + default_theme + "</em>");
}
}
}
//]]>
</script>
To make this code work for your board, simply change NAME_OF_THEME to match the name of your mobile theme.


+ Make the top menu drop menus more friendly

(allows the activation of the top-level links on click instead of on hover)

Admin CP Posted Image Themes Posted Image Board Template Posted Image Below the Board
Code:
 
<script type="text/javascript">
//<![CDATA[
if (screen.width <= 480 || navigator.userAgent.match(/iPad/i)) {
$('#menu_ucp > a, #menu_pm > a').attr('href', '#');
$('#menu_ucp ul').prepend('<li><a href="' + main_url + 'home/">Home</a></li>');
$('#menu_pm ul').prepend('<li><a href="' + main_url + 'msg/">Home</a></li>');
}
//]]>
</script>

Note: Not all mobile devices may support JavaScript.
Edited by Cory, Sep 29 2016, 10:11 PM.
Offline Profile Quote Post Goto Top
 
Knox`
Member Avatar
Unofficial Request Assistant :D
[ *  *  *  * ]
Awesome tutorial! Thanks for that.
Offline Profile Quote Post Goto Top
 
RyanF
Member Avatar
My Comedy Drama
[ *  *  *  *  * ]
A lot of people have been requesting information like this.

Bookmarking it for later use!
Offline Profile Quote Post Goto Top
 
wissaboo-ZNR
Member Avatar
Member
[ *  *  * ]
so if we add these codes to an already existing imageless theme it will work better for phones?

do the two top ones go at the bottom of the css?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
You're not really required to do anything else if you have a 'mobile' theme.

The mobile CSS file is to add mobile-specific CSS to all themes via the Javascripts wrapper of your Board Template. The mobile CSS selector is what can be used to apply mobile-specific CSS to a specific theme.

The first JavaScript code is to force users to use the mobile theme when they are on their mobile device and the second JavaScript code adds a mobile class to the body tag so you can use CSS with the class to affect mobile devices only.
Offline Profile Quote Post Goto Top
 
akstylish-ZNR
Member
[ * ]
Hmm...one person reported the mobile theme being set as default and unable to change on a PC. How does this happen?
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Mind giving me their operating system, browser and resolution statistics?
Offline Profile Quote Post Goto Top
 
TheRKOHitman
Member
[ * ]
Does this get added to my current CSS? Sorry I am a novice at all this coding and just want to have mobile version for myself and a few members while out & about lol
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Please see post #5.
Offline Profile Quote Post Goto Top
 
iAnime
Member
[ * ]
I have a problem (I think). The codes work fine, but my iPhone when I test it out is ALWAYS refreshing the page. Just to be sure, can you tell me EXACTLY where each code goes in the Template/CSS
Offline Profile Quote Post Goto Top
 
Pk Magic Hat
Member Avatar
Irritating requester
[ *  * ]
I am using something like this now:

Posted Image

It works fine for me and the members, + it seems like I can't figure out that CSS thing of you :p
Offline Profile Quote Post Goto Top
 
Cory
Member Avatar
Member
[ *  *  *  *  *  *  *  *  * ]
Which codes are you using, iAnime?

What CSS thing are you referring to, Pk Magic Hat?
Offline Profile Quote Post Goto Top
 
Pk Magic Hat
Member Avatar
Irritating requester
[ *  * ]
Mobile CSS selector.
Also, the Javascript code to auto switch to the mobile theme does not work on out board
Offline Profile Quote Post Goto Top
 
DaPizzaMan
Member Avatar
#TeamSupport

Pk Magic Hat
Aug 6 2012, 02:39 PM
Also, the Javascript code to auto switch to the mobile theme does not work on out board
Cory
 
You can use that to make your board automatically switch to the mobile theme on mobile devices, simply change 'NAME_OF_THEME'.
Offline Profile Quote Post Goto Top
 
Pk Magic Hat
Member Avatar
Irritating requester
[ *  * ]
DaPizzaMan
Aug 6 2012, 03:43 PM
Pk Magic Hat
Aug 6 2012, 02:39 PM
Also, the Javascript code to auto switch to the mobile theme does not work on out board
Cory
 
You can use that to make your board automatically switch to the mobile theme on mobile devices, simply change 'NAME_OF_THEME'.
I'm not completely stupid! :wub:

No, really, that doesn't work.
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
Go to Next Page
« Previous Topic · Theme Tricks · Next Topic »
Add Reply
  • Pages:
  • 1
  • 3
  • 4