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]

I think vBulletin will be fixing it in 4.1.11 ?

[F&R]

Originally Posted by dartho

@Daffy - The logo is defined in the CSS so you can change there or overwrite the existing image file "images/misc/mobilelogo.png"

If you can;t see it being rendered, it could be that your brower doesn't support it, or if you have the options addon for this style you have enetered in text for the header which replaces the logo.

Aha!! That's why I don't see the logo.

I was wondering if it would be possible to add back a "mobile" adsense type thing Adsense Mobile Ad types here

I was also wondering if it was possible to put the option to go the Lite style at the top of the page on the standard layout so it is possible to switch between full and lite without having to fish in the styles drop down at the bottom.

The reason I ask this is because there are times when I use this style on my laptop/computer. Having a low bandwidth version is brilliant if you are stuck on dial up or using an overcrowded WiFi network.

Wonderful work thank you

[Hippy]

dartho

I test most everything with this site http://validator.w3.org
can you review and confirm the changes made are good
thanks dartho
if all checks out, could you please add to your nexted version if you release one

when I ran this skin through that site
there was 14 Errors, 3 warning(s)
you can run your site as well .. need to make sure changing to the style you use that address with the Example-->"?styleid=6" at the end of the url so it does not read the default style

with the fixes I did to these 2 template

This document was successfully checked as XHTML 1.0 Transitional! Passed
header template
1st the changes I made here where

 (){a&&a();b()}}

to

 (){<();b()}}

and changed

(var i = 0; i < a.length; i++)

to

(var i in a)

<vb:if condition="$vboptions['ls_page_title']!=''">
	<div align="right">
		<vb:if condition="$vboptions['ls_default_style_link']==1">
			<a class="toplinks" href="{vb:raw vboptions.ls_navbar_home}?{vb:raw session.sessionurl}styleid={vb:raw vboptions.ls_default_style}">{vb:raw vboptions.ls_default_link}</a>
		</vb:if>
	<vb:if condition="$show['member']">
		<a class="toplinks" href="login.php?do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}">{vb:rawphrase log_out}</a> 
	</vb:if>
	</div>
	<div class="header" align="left">{vb:raw vboptions.ls_page_title}</div>
<vb:else />
	<div class="logo" style="text-align:right;">
		<vb:if condition="$vboptions['ls_default_style_link']=='1'">
			<a class="toplinks" href="{vb:raw vboptions.ls_navbar_home}?{vb:raw session.sessionurl}styleid={vb:raw vboptions.ls_default_style}">{vb:raw vboptions.ls_default_link}</a> 
		</vb:if>
		<vb:if condition="$show['member']">
			<a class="toplinks" href="login.php?do=logout&amp;logouthash={vb:raw bbuserinfo.logouthash}">{vb:rawphrase log_out}</a>
		</vb:if>
	</div>

</vb:if>

<vb:if condition="$ad_location['ad_header_logo']">
	{vb:raw ad_location.ad_header_logo}
</vb:if>
<script type="text/javascript">
function fixImgs(b){var a=document.getElementsByTagName("img");for(var i in a)if(w=a[i].width,h=a[i].height,w>b)f=1-(w-b)/w,a[i].width=w*f,a[i].height=h*f}function addLoadEvent(b){var a=window.onload;window.onload=typeof window.onload!="function"?b:function(){&lt;();b()}}addLoadEvent(function(){fixImgs(200)});</script>

also in the navbar template
all the

<input

I added a / at the end

changed template

<div class="navbar">
<vb:if condition="$vbulletin->options['ls_navbar_home']!=''">
<a href="{vb:raw $vbulletin->options['ls_navbar_home']}{vb:raw session.sessionurl_q}">{vb:raw vboptions.ls_home_link_text}</a>
<vb:else />
<a href="forum.php{vb:raw session.sessionurl_q}">{vb:rawphrase forum}</a>
</vb:if>
<vb:if condition="$show['member']">
<a href="search.php?{vb:raw session.sessionurl}do=getnew">{vb:rawphrase new_posts_nav}</a> <a href="usercp.php{vb:raw session.sessionurl_q}">{vb:rawphrase user_cp}</a>
  <vb:if condition="$vbulletin->userinfo[pmunread]>0">
   <a id="newpm" href="private.php?{vb:raw session.sessionurl}">New PM</a>
  </vb:if>
<vb:else />
<a href="search.php?{vb:raw session.sessionurl}do=getdaily">{vb:rawphrase todays_posts}</a>
</vb:if>

<a href="search.php{vb:raw session.sessionurl_q}">{vb:rawphrase search}</a></div>
<vb:if condition="!$show['member']">
{vb:raw ad_location.ad_navbar_below}
<div>
<form class="navbarbelow" action="login.php?do=login" method="post">
<input onclick="this.value='';" name="vb_login_username" class="windowbg" id="navbar_username" accesskey="1" value="Username" size="8" type="text" /> 
<input onclick="this.value='';" name="vb_login_password" class="windowbg" id="navbar_password" accesskey="2" value="" size="8" type="password" />
<input name="cookieuser" value="1" type="checkbox" />
<input name="securitytoken" value="guest" type="hidden" />
&nbsp;<input id="btn" value="Log in" title="Enter your username and password in the boxes provided to login, or click the 'register' button to create a profile for yourself." accesskey="3" type="submit" />
<input name="s" value="" type="hidden" />
<input name="do" value="login" type="hidden" />
<input name="vb_login_md5password" type="hidden" />
<input name="vb_login_md5password_utf" type="hidden" />
</form>
</div>
</vb:if>
<vb:if condition="$show['notices'] AND THIS_SCRIPT != 'register'"><form action="profile.php?do=dismissnotice" method="post" id="notices">
		<input type="hidden" name="do" value="dismissnotice" />
		<input type="hidden" name="s" value="{vb:raw session.sessionurl}" />
		<input type="hidden" name="securitytoken" value="{vb:raw bbuserinfo.securitytoken}" />
		<input type="hidden" id="dismiss_notice_hidden" name="dismiss_noticeid" value="" />
		<input type="hidden" name="url" value="{vb:raw return_link}" />
			{vb:raw notices}
	</form></vb:if>
<div>{vb:raw navbits.breadcrumb}</div>

[dartho]

@F&R - There's nothing to stop you adding Ads in - the ad hooks etc are all there. I'm pretty sure you can just paste in the code you receive from Google

re: Full Site link - if you have a drop box, I assume you have the 'Options' addon installed? IN which case you should be able to select the option to have a link in the footer rather than a dropdown box

[dartho]

@Hippy - Thanks. I closed off those input tags as well as some img tags in other templates. As for the script, rather than change it, I simply added comment codes insode the <script> tags:

<script type="text/javascript">
<!--
...
-->
</script>

as I wasn;t sure if the code changes would affect functionality.

At one stage in t he distant past, I think the original version of this style was XHTML Strict, but I got lazy over time

[Hippy]

welcome
yes I remember some img tag but i forgot where they where ..
that was a different day I was testing and forgot to mention it here since I did forget about them..

I wasn't sure what the a&&a ment all I could come up with was &alt; I i could not come up with anything in a search ..
but I did find this http://stackoverflow.com/questions/7...for-var-i-in-a this is why I change that code..

keep me posted bud and again thanks for the fantastic mobil (better that vb's "IMO") style

if you comment out the script will the image still resize I test what I did and they still do..
if thats what it's for..

[dartho]

Originally Posted by Hippy

if you comment out the script will the image still resize I test what I did and they still do..
if thats what it's for..

Yep the comment is only meant to stop the bowser trying to render it whilst allowing the script engine to still execute the script - or something like that ...

[F&R]

Originally Posted by dartho

@F&R - There's nothing to stop you adding Ads in - the ad hooks etc are all there. I'm pretty sure you can just paste in the code you receive from Google

re: Full Site link - if you have a drop box, I assume you have the 'Options' addon installed? IN which case you should be able to select the option to have a link in the footer rather than a dropdown box

Thanks for the reply, yes I have the options add-in installed and it does display "desktop" on the Lightweight style, BUT what I was asking is how I can put the reciprocal button on the desktop style to quickly go to the lightweight style when it is loading the desktop style.

On the ads stuff, ok great, I will have a play.

I do have one more problem. On my windows phone 7 it displays fine and when I change pages, the lightweight style is still in force. However on an iPhone and on a Nokia Xpress Music, when you change page (to go into thread for example) it reverts to the desktop style.

I have uninstalled the style and the options and then reinstalled them, cleared system cache and updated styles. The users have cleared their caches and logged in again, but it still reverts to the desktop style when you change pages. Any ideas? As I said my Windows Phone 7 behaves as expected, iPhones don't.

[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?

[Hippy]

Originally Posted by dartho

@Hippy - Thanks. I closed off those input tags as well as some img tags in other templates. As for the script, rather than change it, I simply added comment codes insode the <script> tags:

<script type="text/javascript">
<!--
...
-->
</script>

as I wasn;t sure if the code changes would affect functionality.

At one stage in t he distant past, I think the original version of this style was XHTML Strict, but I got lazy over time

can you add the edit you did I am not quite sure how you ment to do, this are ..... the code ? and just add the code in replace or the dots there in your example ?