Mobile/Cell Phone Style

A version for 3.7 can be found HERE

A super light style designed for Mobile Phones - use in conjunction with THIS or THIS modification to redirect mobile phone users to this theme.

This is a work in progress, and any and all feedback is greatly appreciated - I will do my best to act on bugs and suggestions.

Check http://mobility.mobi (not my site) from a mobile device to see how it looks or you can visit via an emulator HERE

Whilst this doesn't have ALL functionality of vBulletin default, it does allow browsing forums, replying to posts, creating new topics and sending/receiving PMs.

I'm new at this, be kind.

Version History
1.00 - Initial Release
2.00 - Validates Strict XHTML 1.0 on http://validator.w3.org/
Added PM notification, fixed new reply, new thread, new PM to look better. Can edit posts. Added Logout and also an "Up" menu which will take you to the parent forum of where ever you currently are. Images in posts are replaced with a link to the image - unfortunately this meant I had to do teh same to smilies which all now show up as :-) (which is a link to teh smilie itself). It is now approaching a fully functioning skin - not sure what else you would want to do from a mobile phone/PDA. A few small bugs fixed too.
2.01 - Added viewing thread subscriptions, who's online (both only for logged on members) and quick reply
2.02 - Quick reply for logged on members only
2.03 - fix a w3.org validation issue, added "mark forums read" to forum home
2.04 - Internal release
2.05 - added mark as read to 'new posts' added 'sub' (Subscribed threads) and 'online' (who's online) footer navbar forum name in post title (as link) fixed a few things.
2.06 - Page numbers appear in thread bits
- UserCP page, with access to PMs, Subscribed Threads, Edit Signature, Edit Options (which includes changing view from oldest first to newest first
- Basic MOD options added - can delete posts and threads (and undelete also)
- Remember me added to login in footer (duplicate login screens removed
- I should probably test this latest version more extensively and re validate it, but thought you wouldn;t mind a pre-release

2.07 - Added requests, revalidated STRICT XHTML on w3.org. If you have modified your existing install of this, I suggest you backup the style first before upgrading with this new version just in case you want to roll back.
2.08 - Remove backlink from FORUMHOME
2.09 - updated version numbers on templates to 3.6.9
2.10 - added securitytoken field to all forms

A Spanish translation can be found in post # 200 HERE

Install Instructions
Unzip and upload the wireless.css to your forum root.
Import the XML as a new style WITH NO PARENT.

Upgrade Instructions
Unzip and upload the wireless.css to your forum root (overwriet existing).
Import the XML and merge with existing. Alternatively you could delete the existing mobi style and re-upload fresh.

Keywords: Mobile, Cell, Portal, Mobi, Light, PDA, Phone

Screen Shots - Don;t be put off by the colours, these are all very easily changed by editing the CSS file. If you need help, just ask. I did these from a desktop browser with the window resized to 240px wide - to get a proper idea of the look, use the emulator link mentioned above. It looks MUCH better from an actualy small screen device!



How to hide a style from style chooser
This template edit will allow you to 'hide' a style from the Style Chooser so users can't select a specified style.

[dartho]

I think you'll have to edit the CSS file and add a body section at the top to define font and background colours... untested.

eg.

body
{
	background: #000000;
	color: #ffffff;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

That did it! Thanks for the quick response man!

One last quick nag - how do I change the link color? I don't see any blues in the CSS.

[dartho]

Looks like you'll need to add some more CSS definitions - it may take a bit of tinkering to get it right.

Edit these sections of teh CSS:

.windowbg
{
	background-color: #FFFFCC;
	color: #000000;
	size:1;
}
.newwindowbg
{
	background-color: #99FF66;
	color: #000000;
	size:1;
}
.windowbg2, .thread
{
	background-color: #99CCCC;
	color: #000000;
	size:1;
}

and change to

.windowbg, .windowbg a, .windowbg a:link, .windowbg a:visited

{
	background-color: #FFFFCC;
	color: #000000;
	size:1;
}
.newwindowbg, .newwindowbg a, .newwindowbg a:link, .newwindowbg a:visited
{
	background-color: #99FF66;
	color: #000000;
	size:1;
}
.windowbg2, .thread, .windowbg2 a, .windowbg2 a:link, .windowbg2 a:visited
{
	background-color: #99CCCC;
	color: #000000;
	size:1;
}

and then change the color to what you want and that may be enough.

Sorry it's so messy. It started off simple and got added onto many times when really I should have started again. One day (yeah right) I'll have time to tidy it all up!

If you view this style on a PC - you can view the source and look for the class definitions and see which bits of the CSS file you need to clean up.

Keep the questions coming if you have more, it will help others too!

[dartho]

BTW - your style is looking pretty sweet :up:

[MotMann]

The Style dont be displayed autom. if a side load over a Mobilephone.


Is there a way?

[dartho]

No. this add-on will do it: https://vborg.vbsupport.ru/showthread.php?t=130983

[Chadi]

I used this skin and browsed via mobile web on my Motorola cell phone (Krazr) which is small as most of you know. However, the font size is no where provided in the style's css and the font is somewhat a bit too big when viewing via mobile. What font size (and which css fields of the style sheet) should I use and edit to appear normal and fit nicely on mobile phones?

[Tearstone]

Maybe I missed this somewhere, but testing this style with my profile on a PC, I can't figure out how to revert my style back to the default style. I wanted to offer this style as an option for users to switch to when they are on the go, but be able to switch back when they get to a regular PC.

[dartho]

It's designed to be used in conjunction with THIS hack which autodetects a mobile device and assignes the style accordingly. Alternatively THIS hack will allow you to assign a style to a (sub)domain so you could say have "wap.domainname.com" for mobile browsers.

Otherwise, if you look back through this thread you will see some modifications people have made to add a link back to your main style.

Chadi - I've not encountered your problem before, although having a quick look at the CSS I can see how this would happen.

If you edit the wireless.css file and add the following code to teh top it will allow you to set a text size which teh rest will be relative to:

body
{
	background: #000000;
	color: #ffffff;
	font: 10pt verdana, geneva, lucida, 'lucida grande', arial, helvetica, sans-serif;
	margin: 0px;
	padding: 0px;
}

Change the "font: 10pt" to a size thats suits your device

I did all the work on this when I was on holiday and haven;t had the time to update much since. I'm looking at re-doing it from the ground up for VB3.7 - time will tell whether I manage to do this or not!