Forum Style - Lightweight Style for Small Screen Devices (cell phone, iphone, mobile, android)

A lightweight *forum only style aimed at small screen devices such as Windows Smartphones, Nokias and even iPhones. It has VERY low bandwidth requirements - 15 times less on my site - 20K as opposed to 300K for forumhome.

*forum only - I have done a very small amount of rough work on CMS templates, a simple single column CMS *could* be created to work with this style without too much effort. However I am not sure if you can have a different CMS layout dependent on which style you are using?

This is an update to the mobile style I have previously released.

The changes are predominantly aesthetic to take advantage of larger screens.

It is also much easier to change colour schemes by editing the commented CSS file.

Demo: http://vbdev.org/forum.php?styleid=7

This is a a lightweight style and as such has much reduced functionality/information over the default vBulletin style.

Install instructions:

• Firstly, if upgrading, I recommend installing this as a new style rather than overwriting your previous install. This way you get to test it first without trashing your existing style.
• BACKUP YOUR EXISTING lightweight.css.php FILE IF YOU HAVE CSS CUSTOMISATIONS
• Download ZIP file
• Unzip to a local/temp directory
• Edit lightweight.css.php file to customise colours if required
• Upload contents of the upload directory in the zip file folder to your forum root.
• Install style XML via Style Manager in your ADMINCP
• **Install and configure "LightWeight Style Options"
• See post 2 for a FAQ
• Click "Mark as Installed"
• Test it out
• Leave a rating
• Leave feedback
• Enjoy checking your site from your mobile phone without the need to pinch/zoom/wait etc...

Version Control:

1.0.0 - 25 AUG 2010 - Initial Release on vBulletin.org
1.0.1 - 26 AUG 2010 - Fixed "Mark All Forums Read" link in Search results. Released Lightweight Style Options to customise this
1.0.2 - 21 MAR 2011 - Updated to 4.1.2, removed short tags from CSS, fixed some issues discovered since last release, added some stuff.
1.0.3 - 16 DEC 2011 - Updated to 1.0.3, tried to fix all known issues. Nothing new. If you have updated your site as bugs have been found, probably no need to upgrade. But if you're upgrading your site from to 4.1.9, might be worthwhile.
1.0.3a - 16 DEC 2011 - remove test ad hook code accidently left in postbit_legacy template

Branding Free:

The style is free to use. However I ask that you keep links in the footer. If you want to remove them - send me a donation of an amount you can afford, or that you think is fair/reasonable, it's up to you how much.

[asabet]

Originally Posted by dartho

sorry, edit the CSS file (the lightweight.css.php file you uploaded to your server), and add it right at the end - sorry, no ?> to search for at the end.

I solved my image resizing problem by adding this at the end of the aforementioned CSS file:

PHP Code:

img
{max-width:90%;
height:auto;
margin-left:auto; 
margin-right:auto;} 


[asabet]

Originally Posted by Mark.B

Those with the "<br />" issue.

I have just spent an hour or so sorting this out and I think I have a solution. I think this only works if you have the lightweight style options hack as well.

The issue: Reply to thread still uses CKEditor. If you switch the template back to a simple textarea, as it was before, the quote isn't passed.

To fix:

Copy the contents of template editor_toolbar_off to editor_ckeditor.

This gives you the quote, but gives you all sorts of <br /> tags and other HTML stuff.

This issue is caused when the user has the WYSIWYG set, so we need to turn that off in the mobile style.

Add the following plugin:

Product: Lightweight Style Options
Hook Location: editor_toolbar_switch
Execution order: 5
PHP Code:

PHP Code:

if (STYLEID==$vbulletin->options['ls_mobile_style'])
{
$vbulletin->userinfo[showvbcode]=0;
} 


Give it a whirl, seems to have worked for me.

Thanks, that worked great for me. I don't use the Lightweight Style Options product, so I altered it as follows:

Product: Vbulletin
Name: Disable WYSIWYG for mobile style
Hook Location: editor_toolbar_switch
Execution order: 5

PHP Code:

if (STYLEID==X)
{
$vbulletin->userinfo[showvbcode]=0;
} 


where X is the # for my mobile style

[asabet]

Another change I made was to put this for headinclude so the page doesn't autozoom during post edit or reply:

PHP Code:

<vb:if condition="!in_array(THIS_SCRIPT, array('newreply', 'editpost'))">
<vb:comment>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
</vb:comment>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
<vb:else />

<vb:comment>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</vb:comment>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
</vb:if>

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="device-width" />
<meta http-equiv="Content-Type" content="text/html; charset={vb:stylevar charset}" />
<meta id="e_vb_meta_bburl" name="vb_meta_bburl" content="{vb:raw vboptions.bburl}" />
<vb:if condition="$show['threadinfo']">
<vb:elseif condition="$show['foruminfo']" />
<meta name="keywords" content="{vb:raw foruminfo.title_clean}, {vb:raw vboptions.keywords}" />
<meta name="description" content="<vb:if condition="$pagenumber > 1">{vb:rawphrase page_x, $pagenumber}-</vb:if>{vb:raw foruminfo.description_clean}" />
<vb:else />
<meta name="keywords" content="{vb:raw vboptions.keywords}" />
<meta name="description" content="{vb:raw vboptions.description}" />
</vb:if>
<link rel="stylesheet" href="{vb:raw vboptions.bburl}/lightweight.css.php" type="text/css" />
<base href="{vb:raw vboptions.bburl}/" /> 


[Bounce]

Anyone able to add code to delete a private message when in usercp?

What template is the private messages?

[dartho]

Adding something like:

<form action="private.php?do=managepm&amp;dowhat=delete&amp;pmid={vb:raw pm.pmid}" method="post" class="block">
<div class="titlebg">{vb:rawphrase delete_this_message}</div>
		<div class="windowbg">
{vb:rawphrase delete_message_click_button}
<input type="submit" class="button" value="{vb:rawphrase delete_this_message}" />
<br /><label for="deletepm"><input id="deletepm" name="pm[{vb:raw pm.pmid}]" type="checkbox" value="true" /> {vb:rawphrase delete_this_message}</label>
		</div>
		<input type="hidden" name="s" value="{vb:raw session.sessionhash}" />
		<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
		<input type="hidden" name="do" value="managepm" />
		<input type="hidden" name="dowhat" value="deleteonepm" />
		<input type="hidden" name="folderid" value="{vb:raw pm.folderid}" />		
	</form>

to the bottom of the pm_showpm template should do it, I think ...

[Twikitero]

Is it possible to replace the mobile style that comes with vbulletin default for this style?
Thanks

EDIT: SOLVED

[Twikitero]

I have a problem, when I go to my site from a mobile forum automatically detects correctly but an annoying zooming, as could edit this to be displayed without having to zoom out completely manually.
Thank you
this is my site if you can visit it http://www.thisiphone.com/forum.php from a mobile so you can view

[Mark.B]

Originally Posted by Twikitero

I have a problem, when I go to my site from a mobile forum automatically detects correctly but an annoying zooming, as could edit this to be displayed without having to zoom out completely manually.
Thank you
this is my site if you can visit it http://www.thisiphone.com/forum.php from a mobile so you can view

A a guess, it's to do with your header....have you altered the header template at all?

[Twikitero]

Originally Posted by Mark.B

A a guess, it's to do with your header....have you altered the header template at all?

Thanks for your response, but I have not made any changes in this template style Lightweight.
?You know how I can solve this error?
Thanks

[Mark.B]

The code in red below causing your issue:

body {
    margin: 0;
    min-width: 990px;
    width: auto;
}