With the announcement of new themes released earlier this year, we have started a series of theme highlights to show the unique design of each new theme, and how to make the best of their features. We launched the series with the Newsy Theme designed to reflect the classic newspaper print format. This week we shine the spotlight on the Vibrant theme.
A Vibrant Entrance
The first thing that pops out is the bold top header. Vibrant’s theme designer, Diana, explains, “the goal is to have a strong header where flat color is the main design element and expands to the full width of the browser. Bold fields of color can be used to give a vibrant impression, hence the name.” This particularly appeals to publishers that want to work with white or light-colored logos.
The header isn’t the only element with the license to be colorfully bold. The footer is just as big and full of color.
Elements of Change
Color can be changed for the top header, footer, headlines, links, sprocket header background and navigation rollover. Typeface can be changed for the navigation, headlines, titles and body text.
The body background is always white, and the body text is always a dark grey color. Diana explains, “the design works based on the contrast with white, so the header and footer are full of color and the rest of the space where reading is happening is always white. Also, to support legibility, the body text is always dark grey, almost black. The only way these could be changed would be on a PRO instance using CSS.”
A Different Angle
To showcase a different look we created a technology oriented logo which would be typical for either a technology publication but also applicable to an industrial or trade publication. Based on the 3D Tech logo we were able to make a few changes, thanks to the Vibrant theme.
Our brand color palette consists of black, silver grey and a deep red. Since our logo is light-colored (silver and red), we made the header background black to emphasize the logo and make it stand out.
The navigation is part of the header and sports a subtle rollover effect which remains when clicked through. It also features drop down navigation that is accommodating to sites that may have many sections and subsections.
The red color is accented throughout the site to keep the overall site from looking too black. On our 3D Tech site, the link roll over, sprocket headers and footer are red, and give the site a pepped look that keeps it from appearing dull.
So far, only color and logo has been changed to make two websites using the same theme look completely different. There are still other features like changing typeface and adding sprockets that can further reach an individual look and feel fitting to your brand. Metro Publisher users can get more details on Vibrant theme features and changes made here on our support site.
Headline and lead stories have more space to stretch featuring full width images, titles and descriptions. Longer titles are displayed without being broken up, and are eye grabbling. Images take full width of the headline window for the full effect, adding to the boldness of the Vibrant theme.
The Vibrant theme is available for all Metro Publisher users at no extra cost, and can be found in the gallery of the theme editor. Changes can be previewed safely without being published, so you can see what it would look like live before making a final decision on a theme. It's a great choice for sites that want to express in color.
Contact us for more information on Metro Publisher, or to schedule a demo. Be sure to check back as more theme highlights are in store.