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.

[dartho]

search headinclude template for

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cat Arriola | http://astrodiva.journalspace.com/ */

function fixImgs(maxW) {
  var pix=document.getElementsByTagName('img');
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fixImgs(200);  // ('element ID', maximum width)
});

</script>

and replace with :

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cat Arriola | http://astrodiva.journalspace.com/ */

function fixImgs(maxW) {
  var pix=document.getElementsByTagName('img');
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fixImgs(200);  // ('element ID', maximum width)
});
-->
</script>

this is an optimised version of the above code block you can use instead (optimised for size) I should probably move it to an external file so that browsers can cache it

<script type="text/javascript">
<!-- 
function addLoadEvent(a){var b=window.onload;if(typeof window.onload!="function"){window.onload=a}else{window.onload=function(){if(b){b()}a()}}}function fixImgs(a){var b=document.getElementsByTagName("img");for(i=0;i<b.length;i++){w=b[i].width;h=b[i].height;if(w>a){f=1-(w-a)/w;b[i].width=w*f;b[i].height=h*f}}}addLoadEvent(function(){fixImgs(200)})
 -->
</script>

[F&R]

Originally Posted by dartho

@F&R - Try editing the headinclude template and removing the line

<base href="{vb:raw vboptions.bburl}/" />

In regards to link - try editing the header template in your default style, search for:

<li><a rel="help" href="faq.php{vb:raw session.sessionurl_q}">{vb:rawphrase help}</a></li>

and add the following immediately before it:

<li><a href="forum.php?styleid=1">Lightweight Style</a></li>

that what type of thing you are after?

Thanks, will give this a go tomorrow... the styleid will be 2 for me I guess.

The style not sticking apparently is a known issue due to be fixed in 4.1.11 but will give your fix a go first, might be easier. but it's 11.30pm here so time for bed. Night and thanks for the help.

[Salleen]

not working @ 4.1.10

[Hippy]

Originally Posted by dartho

search headinclude template for

<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cat Arriola | http://astrodiva.journalspace.com/ */

function fixImgs(maxW) {
  var pix=document.getElementsByTagName('img');
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fixImgs(200);  // ('element ID', maximum width)
});

</script>

and replace with :

<script type="text/javascript">
<!--
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Cat Arriola | http://astrodiva.journalspace.com/ */

function fixImgs(maxW) {
  var pix=document.getElementsByTagName('img');
  for (i=0; i<pix.length; i++) {
    w=pix[i].width;
    h=pix[i].height;
    if (w > maxW) {
      f=1-((w - maxW) / w);
      pix[i].width=w * f;
      pix[i].height=h * f;
    }
  }
}

// Multiple onload function created by: Simon Willison
// http://simonwillison.net/2004/May/26/addLoadEvent/
function addLoadEvent(func) {
  var oldonload = window.onload;
  if (typeof window.onload != 'function') {
    window.onload = func;
  } else {
    window.onload = function() {
      if (oldonload) {
        oldonload();
      }
      func();
    }
  }
}

addLoadEvent(function() {
  fixImgs(200);  // ('element ID', maximum width)
});
-->
</script>

this is an optimised version of the above code block you can use instead (optimised for size) I should probably move it to an external file so that browsers can cache it

<script type="text/javascript">
<!-- 
function addLoadEvent(a){var b=window.onload;if(typeof window.onload!="function"){window.onload=a}else{window.onload=function(){if(b){b()}a()}}}function fixImgs(a){var b=document.getElementsByTagName("img");for(i=0;i<b.length;i++){w=b[i].width;h=b[i].height;if(w>a){f=1-(w-a)/w;b[i].width=w*f;b[i].height=h*f}}}addLoadEvent(function(){fixImgs(200)})
 -->
</script>

my headerinclude it

<vb:comment>
<meta name="viewport" content="width=320,user-scalable=yes,initial-scale=1.0" />
</vb:comment>
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<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}/" />

[The Rocketeer]

@ Hippy, Could you please list / put all your and moof's edits currently required in one new post with instructions and everything? So we all can use that until vBulletin 4.1.11 fixes these issues. It should also make it easier for Dartho to update his style and make the necessary changes.

I have also had someone work on my mobile styles Homepage(as in the CMS home) and to be honest it looks very decent now, I will post my edits soon so some of you can get the cms home page working with your mobile style.

[F&R]

Hi Dartho

your suggestion to remove <base href="{vb:raw vboptions.bburl}/" /> from the headinclude didn't work I'm afraid.

there is this vBulletin bug which has a fix, but I am unsure where to implement it in your code or even if it applies!

Thanks for the header idea, I have since moved it down into some white space where pudgy fingers on a small screen can hit it without zooming.

[dartho]

Originally Posted by F&R

Hi Dartho

your suggestion to remove <base href="{vb:raw vboptions.bburl}/" /> from the headinclude didn't work I'm afraid.

there is this vBulletin bug which has a fix, but I am unsure where to implement it in your code or even if it applies!

Thanks for the header idea, I have since moved it down into some white space where pudgy fingers on a small screen can hit it without zooming.

Check here for a fix to that:

https://vborg.vbsupport.ru/showthrea...99#post2289299

[F&R]

My bad, I was searching in templates, forgot to read the instructions.... Works now, ta muchly!

[sevak]

not working on 4.1.10 saying its only for 4.1.8..

[Ozymandyus]

Originally Posted by sevak

not working on 4.1.10 saying its only for 4.1.8..

Just click the option to ignore version when you're doing the import. Problem solved.