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.” Flat color is basic color without any effects such as shading or highlighting. It also allows the content within the header to stand out.
This particularly appeals to publishers that want to work with white or light-colored logos. Logos must have transparent backgrounds (png format) to blend properly into the header. Keep in mind that even if your logo has a transparent background in your photo editor, saving it as a .jpg will automatically make the background white or whatever color default is set in the photo editor.
On Neapolitan Family’s website, you can see how the white logo stands out boldly from the bold blue header. The site is also a good example of how banner ads can appear in throughout the Vibrant theme.
A left-aligned logo works best in this theme. If you plan to have leaderboard ads in the top header, it is suggested that the logo not be more than 100 pixels high to avoid from appearing top heavy.
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
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. The changes listed are what can be done in the standard package. Pro users can make additional changes using CSS.
Three color palettes are provided as good examples of color use and to help get started, but we recommend applying your brand colors to match your brand identity and establish an individual web presence. In the theme editor, one setting can affect more than one element simultaneously. We’ve grouped them accordingly in the following lists.
Colors
- Top header background color & Headline color (one setting)
- Link color
- Footer background, sprocket header background & navigation rollover colors (one setting)
Typeface
- Navigation
- Headlines & Titles
- Body text
When selecting your colors, Diana suggests using your brand color for the header background and headline color and your secondary color for sprocket header background, footer and navigation rollover. Links should have an action color.
There are a couple elements that cannot be changed. 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. Black is also a tech trend color that gives a modern feel. It’s also a good choice to make if your goal is to have colorful images pop out more.
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 is more of an accent color that gives good contrast to the black and white. So, we used red as our secondary brand color and link action color.
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.
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.
Content Perks
Headline and lead stories have more space to stretch featuring full width images, titles and descriptions. Longer titles can be displayed without being broken up, and are eye grabbing.
Images will appear uncropped, so no part of the image will be lost. Images take full width of the headline window for the full effect, adding to the boldness of the Vibrant theme. No pre-editing is required to load headline images, but it is recommended to choose images that are in landscape layout rather than portrait layout to have a smooth visual transition between carouseling headlines.
The Vibrant theme is a great choice for sites that want to express in color. Test out the Vibrant theme in the Metro Publisher theme editor to see if it is the right choice for your website. 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. Be sure to check back as more theme highlights are in store.
Comments