The SNO Report: You’re going to love the new SNO FLEX

/in

Last night, we updated your site to the latest version of our SNO FLEX theme.  This new version is our most significant release in over a year, and we’re excited about its improved design options for both large and small screens.

The homepage of FLEX has always displayed at a width of 980 pixels, but this release has options that allow you to expand your homepage up to 1400 pixels wide to take advantage of the wide-screen monitors your readers might be using.  To take advantage of this added real estate, go to the SNO Design Options page and look for the new section labeled “Full-Width Browser Options.”

You can now activate an additional widget area that displays content just for wide-screen monitors.  When your viewer’s browser is wider than 1210 pixels, this widget area displays to the left of your normal homepage content.  You can add any widgets you’d like to this area, but keep in mind that this content ONLY displays on wide screens –– it’s completely hidden on smaller screens.  For that reason, we recommend that you think of this area as bonus content for your readers –– use it to add additional advertising spaces or a Recent Posts widget.  We also recommend that you set this extra column to be “sticky,” meaning that it will stay in place at the top of your screen while the rest of your normal homepage scrolls as usual. Making this area sticky will prevent a big empty space from showing on the left side of your screen as your reader scrolls down.

If you have the Outer Background option set to “Defined Edges,” this extra column will slide up alongside your header graphic.  With this option, we recommend that you have either a navigation menu, breaking news ticker, or social media icons set to display at the top edge of your site.  Do this in combination with making either of your menus “sticky” to give your reader an easy path to navigate throughout your site.  And if you want a large and dominant header, set the Outer Background to “Full Browser Width” and the extra column will tuck in beneath the header and to the left of your regular homepage content.

The second part of this new version of FLEX is the addition of a whole new set of design options for the header area.  You can now activate the Alternate Header Mode –– this low-profile header area is just 80 pixels tall and spans the full width of your browser.  The space for the header graphic itself is much smaller –– just 325 pixels wide, and the area to the right of the header graphic can be set to display leaderboard ads, menus, social media icons, or the breaking news ticker.  This new alternate header can be set to “stick” to the top of your screen to provide your readers with quick and easy access to navigation, and you can also activate a “slide-out” navigation menu on the left side and add a bar above the header for extra features.

The new recommended size for full screen header graphics is 1400 pixels wide by 150 pixels tall, and FLEX will recommend a header graphic size for small screens for you based on the options you select –– find this recommendation in the Custom Header Graphicsection on the SNO Design Options page.

We haven’t forgotten about the small screens either.  This release has an option that allows you to control which content will show up when your site is viewed on amobile device.  To take advantage of this new option, click on Widgets under the Appearance tab and add any widgets you’d like to the “Mobile Phone Homepage” widget area.  Once you add widgets here, this content will take the place of your traditional homepage when your site is viewed on a phone.  You can then use the customizing options in each widget to give your mobile version its own distinct personality. If you leave this widget area empty, your site will display a mobile-responsive version of your full homepage, just as it always has.

There are other notable changes in this release as well:

  • The social media icons have been updated.  They’re now font-based with options for color and monochromatic display, and you can add borders up to 10 pixels wide around each icon.

  • The header graphic can now be centered in the header area.

  • Widget Style 6 has a new look.  Just set the “Title Bar Indent” to “Off” to create a bar of color beside the widget title.

  • Widget Titles can now be set to three sizes –– small, medium, and large.

  • The breaking news ticker and navigation menuscan also be set to three sizes.

  • Each widget now has the option to add additional padding on the bottom to make it easier to line them all up to the exact pixel.

  • Icons can easily be added to any navigation menu item — just click Menus under the Appearance tab, and you’ll see that each menu item has an Icon option.

  • You can add a mini-logo to any of your navigation bars.  Try this option along with the option to hide the traditional header area for a slim, low profile header.

  • If your navigation menus get too long for the width of the browser, FLEX will automatically collapse the extra elements into a “More” tab.

Give these new features a try and tweet a screenshot to@schoolnewspaper to show off your new design.  If you need any help with these features, don’t hesitate to ask –– as always our support team is standing by to help you.