Customizing the Nuvo Template

CSS Customization

One of the most powerful features of Nuvo is its ease of customization.
The CSS is neatly organized and commented for customization of font colors, sizes, and general edits.

To edit just the basic CSS and colors, you can safely modify:
templates/nuvo/css/styles/style{*x}.css (depending on your selected color style).

For more advanced users, we've separated the positioning and layout structure into a separate CSS file:

If you're a mac user, you'll find CSSEdit to be a perfect solution for its recognizable @group selectors.


/* Body
------------------------------------- */
/* @group Header
------------------------------------- */
/* @group Typography
------------------------------------- */
/* @group Form Elements
------------------------------------- */
/* @group Joomla! Styles
------------------------------------- */
/* @group Layout Structure
------------------------------------- */
/* @group Bonus Styles
------------------------------------- */
/* @group System Styles
------------------------------------- */

Graphic and Logo Customization

Nuvo supports three logo styles.

  • Inline Graphic
  • Graphic Above Navigation
  • Text Above Navigation

When using any of the graphic modes, try to use a transparent 24/32-bit PNG image when changing the header image. Just upload logo.png in your templates/nuvo/images/style{x} folder (depending on your default selected style). If the logo size differs form the original just go to Extensions->Template Manager->nuvo and enter the new dimensions. No code editing is needed.

The Adobe Fireworks graphic source files are included if you'd like to make graphic customizations. The backgorund images for the columns use a single image so the process is quick and simple for those familiar with the interface. (Video tutorial to come!)

© 2009-2010 Your Copyright info here in the 'copyright' module position