Mobile Skin

[paulf10 0]

Hey all,

Sense many of my forum's users have an ipod touch or iPhone i was wondering what is required to have a mobile skin for my VB forum.

Similar to http://www.vbulletin.org/forum/showthread.php?t=171947 ?

Or any other skins you guys are aware of?

I'm pretty much asking what it would take to implement, and if you guys have any suggestions on how to do so, i'd be very much appreciated.

Thanks!

[Timan 0]

I plan on making one, but it'll be for IPB3 first (since its what we use here).

I'm not really sure how to setup browser detection, but I'm sure there is a mod at vbulletin.org for that.

[paulf10 0]

thanks for the help.

An unrelated question;

I was working on the navbar, and am not sure the name of the image you are using for "Guidelines"

The help logo is "faq", "calendar" "newposts" etc.

btw, where are those files located?

[Timan 0]

images/as4/global/toolbar_icons.png

[foxofinfinety 0]

I'm not really sure how to setup browser detection, but I'm sure there is a mod at vbulletin.org for that.

you won't need one

just use

<link rel="stylesheet" media="only screen and (max-device-width:260) and (max-device-height:356)" href="iphone.css" />
<!-- css3 media query, iphone/ipod touch will recognize this and use it as it's there screen size,
other devices and webbrowser that don't support media-querys will ingore it thanks to the "only" key-word,
as they don't know that either -->
<link rel="stylesheet" media="screen" href="desktop.css" />
<!-- but they do know this -->

mobile safari (and with that the iphone and ipod touch) will recognize the media-query and use iphone.css

other devices and web browsers that don't support media-queries will use desktop.css

[paulf10 0]

thanks all

sorry for the "n00b" questions but, VB design isn't quite "my thing"

How can i go about making an image that is not in toolbar_icons.png appear in my navbar?

I have it in the same directory as toolbar_icons.png. I don't know if i need to modify toolbar_icons.png or what.

Thanks

[Timan 0]

you won't need one

just use

<link rel="stylesheet" media="only screen and (max-device-width:260) and (max-device-height:356)" href="iphone.css" />
<!-- css3 media query, iphone/ipod touch will recognize this and use it as it's there screen size,
other devices and webbrowser that don't support media-querys will ingore it thanks to the "only" key-word,
as they don't know that either -->
<link rel="stylesheet" media="screen" href="desktop.css" />
<!-- but they do know this -->

mobile safari (and with that the iphone and ipod touch) will recognize the media-query and use iphone.css

other devices and web browsers that don't support media-queries will use desktop.css

Theres one big problem with this tho.

The templates would remain the same. If I was to do a mobile skin, I would have every single template redone to just have the most basic functionality. (check out my windows-mobile skin at www.neowin.net/forum/)

[Timan 0]

thanks all

sorry for the "n00b" questions but, VB design isn't quite "my thing"

How can i go about making an image that is not in toolbar_icons.png appear in my navbar?

I have it in the same directory as toolbar_icons.png. I don't know if i need to modify toolbar_icons.png or what.

Thanks

You'll need to modify the css for whatever icon you want to change. Example

img.tb-itemname {
	background: url(as4/global/icon_file_name.png) no-repeat;
}

And to add extra icons do something like this (from previous post).

Navigation / Breadcrumb Templates > navbar

Look for:

<ul id="tb-icons">

	<li id="tb-logo"><a href="$vboptions[homeurl]" title="$vboptions[bbtitle]"></a></li>

Then add your toolbar icon where you want it, with the following (change to fit your needs)

<li id="tb-itemname"><a href="link.html"><img src="$stylevar[imgdir_misc]/blank.gif" alt="" />
Link Name</a></li>

[foxofinfinety 0]

Theres one big problem with this tho.

The templates would remain the same. If I was to do a mobile skin, I would have every single template redone to just have the most basic functionality. (check out my windows-mobile skin at www.neowin.net/forum/)

eh ok, how about checking the user agent string?

something like this (can use some inprovement):

<?php
$browser = $_SERVER['HTTP_USER_AGENT'];
if($browser == 'Mozilla/5.0 (iPod; U; CPU iPhone OS 2_2_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5H11 Safari/525.20'){
//ipod touch with safari 2.2.1
}elseif($browser == 'Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2_1 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5H11 Safari/525.20'){
//iphone with safari 2.2.1
}elseif($browser == 'Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A102 Safari/419.3'){
//ipod touch with safari 1.1.4
}elseif($browser == 'Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A102 Safari/419.3'){
//iphone with safari 1.1.4
}
//else we'll assume a desktop.
?>

these are the correct browser agent strings but the problem with this is,

you can set them to be like this in some browsers, even if you don't have a iphone/ipod touch