Theme Name: ZetaFresh Mobile
Creator: Helena with help from the Zathyus team

At first glance, this mobile theme might seem similar to Blueline Mobile, but there is more under the hood in this version. Unlike some of the stripped down mobile themes, ZetaFresh Mobile has nearly all the function of a full theme, just re-arranged a bit. It also improves on my other attempts, in that it integrates with your mobile browser features to display dropdown menus, and replaces many of the existing text links with a simpler, less cluttered icon system. Moderation is easier on this version, and even the calendar is more small-screen friendly. Some responsive design elements have been added to create a pleasant experience even on small phone screens.

Mobile themes still have to work around the size of the standard ads, and there are a few less than graceful treatments in spacing and borders that you may notice, but those should not affect function. This theme is heavily modified so it will work best on boards with minimal extra coding.

I named the theme ZetaFresh because it is modeled on the ZetaBoards default but features a crisper blue, streamlined design details and a softer orange. A companion theme in a full forum design may be released at a later date.
EDIT: ZetaFresh full version has been released HERE

Device compatibility: ZFM has been tested on iPhone4 (safari) and the Nexus7 tablet (android) and should appear properly on screens with a width of 320px or more, but is still quite useable even at a 240 width resolution. It has also been reported to be fine on Windows phones.

Preview:


Graphix: Copy/paste the image codes from this HTML Image Macros Page or use the quick image tranfer via developer tool method linked on the page. Images will remain permanently hosted.

Setup Notes:

• The submenu will automatically direct links to your board as soon as the theme is installed. You may edit, add or subtract links as you wish in the Theme Layout. The submenu is accessed by this button at the top right:
• The Portal link will only show the content installed in the Portal News (center section) and the Portal Footer.
• Although you can install a small image banner (max 225px x 30px) in the Theme Settings, it is recommended to use your board name text instead. This will keep the screen layout simple and compact. Instructions are below.
• The Mark Forums Read and Mark Topics Read index links have been hidden to reduce clutter, but if you would like to use them, please see THIS POST for instructions on how to make the simple CSS edit.

Theme Settings: Install in AdminCP > Themes > Choose ZetaFresh Mobile > Theme Settings

[+] Spoiler

In the code below, insert your own text in place of the words Zeta, Fresh, and Mobile to make a similar text banner. Replace all the code in the text area with your edited version.

Code: Select all

<span style="font-family:Helvetica; font-size: 1.7em; color:#EEB273;">Zeta</span><span style="font-family:Helvetica; font-size:  1.7em; color:#e0e1e7;">Fresh</span><span style="font-family:Helvetica; font-size:  1em; color:#A2ABC7;">Mobile</span>

Theme Layout: Install in AdminCP > Themes > Choose ZetaFresh Mobile > Theme Layout

[+] Spoiler

Code: Select all

<script type="text/javascript">
//<![CDATA[
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />');
//]]>
</script>
<!-- TOPMENU --><!-- HEADER -->
<div id="submenu"><div align="right">
<select id="submenu_select">
    <option value="submenu_header" selected="selected">Menu</option>
    <option value="search/?c=5">Active Topics</option>
    <option value="search/?c=6">My Replies</option>
    <option value="search">Search</option>
    <option value="members/">Members</option>
    <option value="calendar/">Calendar</option>
    <option value="boardrules/">Board Rules</option>
    <option value="faq/">FAQ</option>
    <option value="site/">Portal News</option>
    <option value="stats/staff/">Moderators</option>
    <option value="stats/feed/">Board Feed</option>
    <option value="stats/status_updates/">Status Updates</option>
    <option value="stats/blogroll/">Blog Updates</option>
</select>
</div></div>
<div id="wrap"><!-- NAV --><!-- BOARD --><img src="http://planetnexus.net/helena/zfreshmobile.png" height="1" alt="" /></div>
<script type="text/javascript" src="http://b3.ifrm.com/30296/50/0/p1270532/ZetaFreshMobile.js"></script>
<script type="text/javascript" src="http://b3.ifrm.com/30296/50/0/p1155968/ZFmobileReplaceText.js"></script>

Theme Appearance: Install in AdminCP > Themes > Choose ZetaFresh Mobile > Theme Appearance
OPEN: ZetaFresh Mobile CSS

Edit Permissions: Edit anything you like, but be warned that if you break it, it could be complicated to fix. The copyright is located in the CSS and may not be removed. You are welcome to use this as a base theme for creating your own mobile design.

Is there a problem with this working in Internet Explorer?

I don't know, as I don't have a device that uses Explorer to test with. The simulators really don't tell you much. If you have a device the uses IE or Edge, please give it a test and report back.

Helena wrote:I don't know, as I don't have a device that uses Explorer to test with. The simulators really don't tell you much. If you have a device the uses IE or Edge, please give it a test and report back.

Oh good point. I forgot phones don't use IE anymore. Chrome is even default on a lot of the new... mostly all of the new ones. But in Internet Explorer the menu at the top right doesn't work. I clicked it and nothing happens. In Firefox it shows up as a drop down though.

Windows phones use IE for browsing. Maybe someone will have a report on that. Odd that the submenu doesn't work on IE though. It just uses the HTML options function. (my coding tricks are pretty low tech. )

Funny, I tried to test just for fun on Edge and IE on my PC. The submenu in Edge works fine, but my application of IE won't even load properly anymore.

I've got a Windows phone, next time I have time I'll try to see if it works on the latest OS.

Otherwise, wonderful theme, it's always nice to see new mobile themes, and the colours chosen work really well together

Really lovely work with this one, Helena!

-The- wrote:I've got a Windows phone, next time I have time I'll try to see if it works on the latest OS.

Otherwise, wonderful theme, it's always nice to see new mobile themes, and the colours chosen work really well together

That would be great. Please report back. :0

Thanks for the comments, guys.

Ok, so the theme does indeed work on Windows phone just fine (I only had a brief test, concentrating on the dropdown). I've got a few screenshots, but I'm not entirely sure they're necessary. If anyone wants them, I'm happy to upload them.

I use MobileTest.me (http://mobiletest.me/) when I want to test a mobile/responsive design and it seems to provide really good results.

I did notice that on small resolutions the shoutbox is displayed in a less than desirable manner. I'd recommend adding a media query to hide the shoutbox all together for resolutions less than 400px, but that's just how I'd do it.

Overall, this is a great theme and should be considered as a standard theme on all Zetaboards!

Great job.