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
Adaptivetheme
Pixture Reloaded or
AT Vibrant if you have purchased this theme

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

Add new comment

Comments

Noggin not working

Hello. Thank you for all the great Adaptive Theme programming...awesome! So anyways, Noggin doesn't work AT ALL. I installed and enabled the module and check the settings a dozen times. No luck, nothing, nada. Yes, I'm using the correct CSS selector #header .header-inner

Works for me, and many others

Works for me, and many others, sorry I can't help you with so few details to go on.

Same here!

I have just installed last Drupal7 + Pixture Reloaded + SuperFish + Noggin, but it seems that Noggin configurations are ignored! I've checked that I'm using the right selector.

BTW, the Pixture Reloaded setup keeps showing the standard Drupal logo setup among the Nogging setup box, but there is no option to disable the standard Drupal logo in this specific setup page. Can this be of any help?

Is there some other way I can provide debug informations?

Thanks!

Noggin issues

It seems that this theme does not use Noggin.

Jeff,

Do you have any plans to implement noggin with Sky?

I may be experiencing more or

I may be experiencing more or less the same as the above users. I use the same settings as shown in the images above (using AT_Vibrant), and I can see the background image in Firefox 3.6.25, but I do not see the image in IE 9.

Noggin

Open the file "noggin.module".
Find the line 139:
drupal_add_css("$selector { background: url('$public_uri') $extra_attributes}", 'inline');

Change the line:
drupal_add_css("$selector { background: url('$public_uri') $extra_attributes} !important", 'inline');

Now it works.

Still not working

Thanks Lev, I tried that it didn't work for me. I don't think it's an issue with Noggin, as I opted to uninstall Noggin and add the following CSS manually to styles.custom.css:

header#header
{
background-image:url(/sites/default/files/images/header-bg.png) !important;
background-repeat: no-repeat !important;
background-position: left top !important;
}

The result is the same - the background image appears in Firefox and Opera, does not appear in IE9. I'm not sure if IE9 recognizes the selector? Any other ideas??? I'm just about ready to give up. :)

Name theme

Name of the theme?

Sorry for my English ...

AT_Vibrant

1 method

Open the file "sites\all\themes\at_vibrant\color\color.css".

Find the line 41:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fecb00', endColorstr='#fed534')";

Comment this line:
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fecb00', endColorstr='#fed534')"; */

Find the line 42:
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fecb00', endColorstr='#fed534')";

Comment this line:
/* filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#fecb00,endColorstr=#fed534,GradientType=0); */

Thanks again Lev.... it didn

Thanks again Lev.... it didn't work either.... so I tried commenting out all the filters in that #header section in colors.css, as follows:

#header {
background: #fecb00; /* fallback for browsers that don't support CSS gradients */
/* background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fecb00), to(#fed534)); */
/* background-image: -moz-linear-gradient(-90deg, #fecb00, #fed534); */
/* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fecb00', endColorstr='#fed534')"; */
/* filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#fecb00,endColorstr=#fed534,GradientType=0); */
color: #181818;
}

This still didn't work - bg image still not appearing in IE. But when I debugged in IE, I found the following filter was still active, even though all filters in colors.css were commented out:

progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#2d97d3,endColorstr=#66b3df,GradientType=0)

When I deactivated that filter in debug mode, the image appeared in IE. I think I checked all css files in AT_Vibrant and AT_default and couldn't find any additional filters. Could this filter be coming from some other drupal module I have installed?

I do not know. And what modules are installed?

I do not know. And what modules are installed?
I have no modules, except for the kernel.
IE 8 browser (x64)

Try searching for CSS-files.

I found

I found the solution.

styles.custom.css:
header # header
{
background-image: url (/sites/default/files/images/header-bg.png)! important;
background-repeat: no-repeat! important;
background-position: left top! important;
filter: none;
}

All previous changes have to cancel

All previous changes have to cancel, imho

Bingo!

That works! I reverted the changes in colors.css back to the original and added the filter: none; property and now the image appears in firefox, opera and IE. Seems a little too simple considering how much time this took!! :)

Thanks for your help!!!

Noggin

Oh, I suspect this needs to be added somewhere for noggin support, but I'm going to keep my site with manual css in style.custom.css

The module does the same thin

The module does the same thing, only using the GUI

Same problem

Cannot get my banner to display - using pixtare-reloaded latest release, IE8 and firefox 3.6.12 - tried the noggin module change - flushed cache multiple times. Base header is displaying with the gradient.

Resave settings

Resave the theme settings after changes in the Noggin

I saved the theme settings,

I saved the theme settings, went to administrator/performance and cleared cache twice - no change. turned the header image off, saved, cleared. Renamed the banner (banner2.jpg) uploaded it again, saved, cleared cache twice. No change. Still having the same issue.

Source

Source code section of your page?

section

"head" section

code

<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="http://dbntest3/lc/misc/favicon.ico" type="image/vnd.microsoft.icon" />
<meta name="Generator" content="Drupal 7 (http://drupal.org)" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="MobileOptimized" content="width">
<meta name="HandheldFriendly" content="true">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="cleartype" content="on">
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
<title>Welcome to Livingston County | Livingston County</title>
<style>@import url("http://dbntest3/lc/modules/system/system.base.css?lxv3la");
@import url("http://dbntest3/lc/modules/system/system.menus.css?lxv3la");
@import url("http://dbntest3/lc/modules/system/system.messages.css?lxv3la");
@import url("http://dbntest3/lc/modules/system/system.theme.css?lxv3la");</style>
<style>@import url("http://dbntest3/lc/modules/comment/comment.css?lxv3la");
@import url("http://dbntest3/lc/modules/field/theme/field.css?lxv3la");
@import url("http://dbntest3/lc/modules/node/node.css?lxv3la");
@import url("http://dbntest3/lc/modules/search/search.css?lxv3la");
@import url("http://dbntest3/lc/modules/user/user.css?lxv3la");
@import url("http://dbntest3/lc/modules/forum/forum.css?lxv3la");</style>
<style>@import url("http://dbntest3/lc/sites/all/modules/ckeditor/ckeditor.css?lxv3la");
@import url("http://dbntest3/lc/sites/all/libraries/superfish/css/superfish.css?lxv3la");
@import url("http://dbntest3/lc/sites/all/libraries/superfish/css/superfish-vertical.css?lxv3la");
@import url("http://dbntest3/lc/sites/all/libraries/superfish/css/superfish-navbar.css?lxv3la");</style>
<style>#header .header-inner{background:url('http://dbntest3/lc/sites/default/files/banner2.jpg')}!important
</style>
<style>@import url("http://dbntest3/lc/sites/all/themes/adaptivetheme/adaptivetheme/css/at.base.css?lxv3la");
@import url("http://dbntest3/lc/sites/all/themes/adaptivetheme/adaptivetheme/css/at.layout.css?lxv3la");
@import url("http://dbntest3/lc/sites/all/themes/adaptivetheme/adaptivetheme/css/at.messages.css?lxv3la");
@import url("http://dbntest3/lc/sites/default/files/color/pixture_reloaded-38b583e5/colors.css?lxv3la");
@import url("http://dbntest3/lc/sites/all/themes/pixture_reloaded/css/pixture_reloaded.css?lxv3la");
@import url("http://dbntest3/lc/sites/all/themes/pixture_reloaded/css/pixture_reloaded.settings.style.css?lxv3la");</style>
<link type="text/css" rel="stylesheet" href="http://dbntest3/lc/sites/default/files/at_css/pixture_reloaded.responsive.layout.css?lxv3la" media="screen" />
<link type="text/css" rel="stylesheet" href="http://dbntest3/lc/sites/all/themes/pixture_reloaded/css/pixture_reloaded.responsive.style.css?lxv3la" media="screen" />
<link type="text/css" rel="stylesheet" href="http://dbntest3/lc/sites/all/themes/pixture_reloaded/css/pixture_reloaded.responsive.gpanels.css?lxv3la" media="screen" />

I'm sorry, my mistake.

I'm sorry, my mistake.
Correct the noggin.module.

before:
drupal_add_css("$selector { background: url('$public_uri') $extra_attributes} !important", 'inline');

after:
drupal_add_css("$selector { background: url('$public_uri') $extra_attributes !important}", 'inline');

thanks

that worked IMMEDIATELY ---- thanks for your very timely responses!

Since I am also a maintainer

Since I am also a maintainer of the Noggin module I will take a look and consider adding !important to help fix this up for all, without having the hack the module.

header height and site name

Two part question - not sure if this is noggin or pixture related.
Have noggin displaying my image, but the image is larger that the header area. How can I make the header area larger to fit my image? CSS someplace? I don't see specific sizes.
Second - it you don't display the site name, you don't get the image. I want the image, just not the text of the site name overlaying the image. Any fix for that?

Jeff, easier to let out new

Jeff, easier to let out new release of the module "Noggin". Especially, status this module: Seeking co-maintainer(s).
My judgement, it will be more correct.

You and so have perfectly worked.

Dale, wait, please, till the

Dale, wait, please, till the evening (till 18-00, now at me 8-45).

1. Only correction CSS.

1. Only correction CSS.
2. Or correction CSS, or instead of a logo - transparent GIF.

The maximum height of header

The maximum height of header - 88px

Different CSS header selector

Because of this thread, I decided to try Noggin with its default CSS header selector of div#header-wrapper (uploaded header image through Noggin as well). It added my header image right away, no problems that I can see. Using AT Commerce (AT Commerce 7.x-2.0-rc2) as default theme.

follow-up: Display quirk

Follow-up on the above post:
Oddly enough, div#header-wrapper displays my header image perfectly in Firefox 8, but it does NOT display it in IE 8 (logged in or anonymous). I wouldn't know why not! Tried header#header because of this: doesn't display in either. Any ideas, or abandon all hope?

CSS header selector: header

CSS header selector: header#header

Noggin header not displaying in IE9

I'm having similar problems to those above. Theme: AT Vibrant 7.x-2.0 (with Drupal 7.12, At 7.x-2.2, and noggon 7.x-1.0). CSS header selector set to header#header. The header image displays perfectly in FF10 and Chrome 17.0, but not in IE9.

I've tried including the following in my custom css file, but no joy.

header#header
{
background-image: url (/sites/genquiry.com/files/header2.gif')! important;
background-repeat: no-repeat! important;
background-position: left top! important;
filter: none;
}

The only thing that works is modifying these lines in sites/XXX/files/color/at_vibrant-hhhhhhhh to comment out the two filter statements but it's hardly a robust solution.

/* Header */
#header {
  background: #fee9c4; /* fallback for browsers that don't support CSS gradients */
  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fee9c4), to(#fffdfa));
  background-image: -moz-linear-gradient(-90deg, #fee9c4, #fffdfa);
 /* -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fee9c4', endColorstr='#fffdfa')";*/
 /* filter: progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr=#fee9c4,endColorstr=#fffdfa,GradientType=0);*/
  color: #5a7d45;
}

Helen, since the new version

Helen, since the new version of Noggin is so much better (the DEV), I am going to update all the themes to work with (this week). This is certainly a bug report regarding the ms filters messing around with the header image, so I will look into this asap.

Excellent news.

...using theme header images problematic(?)...

Greetings. I just wanted to mention that while using the latest Noggin dev version (7.x-1.1+5-dev) in an Adaptivetheme/Corolla/Footheme subtheme choice, all at latest stable releases (not dev), the option to set the header image directly from the theme ("header-images" folder) is not working for me as supposed to.
The working CSS selector for Footheme is #header-wrapper and the module picks the pictures from the folder ok if you select it at "Header image settings"/"Select Header", but unfortunately the image then shows only in front page and no in other ones (basic pages or views, etc.). If i change to "custom image" selection and set the path (e.g. same as the "header-images" folder) or upload image, it works ok and image shows everywhere.
Just wanted to mention that in case anyone else had problems with the Footheme choice of subtheme and Noggin together, and to ask you if this is my misconfiguration problem or a functioning problem of the current dev module.
Thanks in advance for your time.

emxa2k...

~~emxa2k - that indicates an issue with the path to the image when using header-images in the theme, I will check it, cheers!~~

Actually scratch that, I can't reproduce it - using the same setup as you. If you need more help please post an issue in the Noggin module issue queue: http://drupal.org/project/issues/noggin

Noggin Module Basics

Noggin Extra Settings

Comments

Add new comment

Filtered HTML

Plain text