Viewing Single Post From: ZetaFresh Mobile

Viewing Single Post From: ZetaFresh Mobile
Helena	Feb 5 2016, 07:25 PM
M is for Mod Posts: 15,331 Group: Community Team Member #95,851 Joined: February 16, 2006 My Board URL http://planetnexus.net/ Latest Design Jedi Night TFA Latest Blog Entry http://if.invisionfree.com/blog/main/273996/	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. 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 Theme Settings (banner) 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: `<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 Layout codes Code: <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" />'); if (navigator.userAgent.toLowerCase().indexOf('chrome') > -1) { $('html, body').css('font-size', '1.1em'); } //]]> </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 --></div> <script type="text/javascript"src="http://z5.ifrm.com/30296/50/0/p1270532/ZetaFreshMobile.js"></script> <script type="text/javascript"src="http://z5.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. Attached to this post: ZFMobileCSS.txt (46.57 KB)


ZetaFresh Mobile · Theme Galleries