Welcome Guest [Log In] [Register]
Support Staff Recommendation
All communities remaining on zIFBoards/InvisionFree should check their conversion opt-in selection in their Admin CP (menu item Tapatalk Conversion)
(Read More)
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:
Multiquote (on) Multiquote (off)
Add Reply
Mobile Themes
Topic Started: Sep 16 2011, 09:43 PM (11,015 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
 
Replies:
-The-
Member Avatar
#the { display: none; }
[ *  *  *  *  * ]
Go to Your Themes page. Instead of clicking 'Edit Theme Appearance', click 'Edit Theme Layout'. That place can accept HTML.

Also, I have no idea what you mean by it keeps refreshing...
Offline Profile Quote Post Goto Top
 
Freud
Member
[ * ]
-The-
Jan 27 2015, 01:21 PM
Go to Your Themes page. Instead of clicking 'Edit Theme Appearance', click 'Edit Theme Layout'. That place can accept HTML.

Also, I have no idea what you mean by it keeps refreshing...
On the mobile browser it constantly refreshes the page
Offline Profile Quote Post Goto Top
 
1 user reading this topic (1 Guest and 0 Anonymous)
« Previous Topic · Theme Tricks · Next Topic »
Add Reply