Noggin Module

Noggin module allows you to upload header images for your theme.

NOTE - the current 7.x-2.1 version of Pixture Reloaded you should use the selector #header .header-inner, please see http://drupal.org/node/1293424

Some of our themes including AT Vibrant and Pixture Reloaded includes a bunch of extra settings that allow you to easily position or tile those images without knowing CSS. In this guide I am using Pixture Reloaded - this is a pretty short tutorial because the settings are quite self explanatory and you can simply play around with the settings to get the effect you require.

First off you should install all the requirements:

Noggin Module Basics

Once you click the checkbox to use a custom header image Noggin will present you with an upload form, or allow you to enter path if you have uploaded an image via FTP. The main thing to lookout for here is to check the "CSS Header Selector" is set to header#header. All our themes are HTML5 and use the header element with the ID of #header - this is what we need to target.

Noggin module basic form

Noggin Extra Settings

In some of our themes such as Pixture Reloaded and AT Vibrant we have included an extension for Noggin which allows you to easily position, tile or set the width on the header image. Noggin itself allows you to enter CSS freehand but we feel this is tricky and not clear how you are supposed to use this feature - giving you basic settings is much easier way to get the job done. Let machines write the code and do the work is easier and less error prone as well :)

Once you have decided on your settings click Submit and check the image is displaying correctly.

Noggin module extra settings

Last updated 17th November, 2011 - 10:25am