Hi! I'm trying to get familiar with this wonderful responsive theme.

I use the nogging module for a custom header-background-picture; it is displayed correctly in standard layout.

Now, if I scale the browser-window from wide to narrow (so that the layout switches to tablet- resp. smartphone-layout), a certain header-background-color is displayed, instead of the header-image.

This color seems to be influenced by the specified base-color, but does not match it exactly.

Example (see attached screenshot):

- base color is set to #00ff00; all other colors are set to #ffffff

- yet, the green in the pic ( = the header-background) is a darker green.

The responsible css (in the dynamically created "colors.css") is:

#header, #header .header-inner {
    background: none repeat scroll 0 0 #1C9B00;
}

Questions

a) Is it possible to set the header-background-color exactly? How?

b) Would it be possible to integrate this color-setting in pixture reloaded - color-setting in the user-interface?

Thanks a lot!

CommentFileSizeAuthor
#8 pixture_reloaded-mobile_header_color-1563638-8.patch6.14 KBKevin Morse
#2 pic_1.png4.21 KBprudal
#2 pic_2.png4.1 KBprudal
screenshot.png4.67 KBprudal
Support from Acquia helps fund testing for Drupal Acquia logo

Comments

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

a) Is it possible to set the header-background-color exactly? How?

Do it with CSS in media queries.

b) Would it be possible to integrate this color-setting in pixture reloaded - color-setting in the user-interface?

Yes it would, you would need to make a custom color.inc file for your theme and add to the color scheme array, and switch colors inside media queries in colors.css for you theme.

prudal’s picture

prudal CreditAttribution: prudal commented
FileSize
pic_2.png4.1 KB
pic_1.png4.21 KB

Hi & thanks for the quick reply!

Ok, I've changed the colors in the colors.css-media queries like this

@media only screen and (max-width:320px) {
  #header,#header .header-inner {background-color: #ff0000;}
}
@media only screen and (min-width:321px) and (max-width:480px) {
  #header,#header .header-inner  {background-color: #00ff00;}
}

then saved design-settings to update colors.css.

Did I get it right so far?

But still, the background-color in the header doesn't match the css-settings;

see attached:
pic_1 (min-width:321px) and (max-width:480px): green is darker than #00ff00;
pic_2 (max-width:320px): red is darker than #ff0000.

Have I overlooked something? What can I do here?

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

I cant tell anything from looking at pictures, sorry but I need to see the live site to debug, anything else is just a random guess.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

If you just set those colors in the colors css file they are probably "shifting" when you save the theme settings.

If you want to set those colors, I mean hard set them to a specific color then don't use colors.css, use a normal stylesheet. Only use the colors.css file if you actually want colors to shift or are adding them the UI using the color schemes array in color.inc.

prudal’s picture

prudal CreditAttribution: prudal commented

OK, I will add css-settings - with media-queries, too - in

a) [theme-name].css or
b) [theme-name].settings.style.css, otherwise
c) in a new css-file, which would be to add in this section of the [theme-name].info in the theme-folder:

;----------// Style sheets
  stylesheets[all][] = color/colors.css
  stylesheets[all][] = css/[theme-name].css
  stylesheets[all][] = css/[theme-name].settings.style.css

Any reports - hopefully of success ;) - will follow here...

Kevin Morse’s picture

Kevin Morse CreditAttribution: Kevin Morse commented

Here's how the color module seems to work (example link colors)

1. color.css sets the link color to #b21f88
2. color.inc has the color #b21f88 as the link color in the 'default' theme.
3. When one sets the link color to something else in the theme appearance settings i.e. #3c7c41 the colour module will replace all occurrences of #b21f88 in color.css with the new value of #3c7c41.
4. So if you change the background-color to #b21f88 it will get changed to the same thing as the link color (#3c7c41)

I want the background color to somewhat match the middle of the gradient in the header background image. My closest attempts have been the following
1. Change color.css so background-color is set to #ff6bff which is the 'bottom' color (Header bottom) of the 'default' theme.
2. Change the Header bottom in the theme appearance settings and the background-color will be whatever you set the Header bottom too.

If you change the background-color to a color that does not exist in the default theme (ie a colour in the middle of the two) the color module cannot seem to shift the colors in any sensible way.

My attempts to figure this out have been nothing but frustration but if I get somewhere I'll let you all know.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

Kevin Morse - do you actually have an issue? Seems you are rambling, no time to wade through this to see if you actually have a question. Please open a NEW issue, otherwise I have no idea why you are posting here.

Kevin Morse’s picture

Kevin Morse CreditAttribution: Kevin Morse commented
FileSize
pixture_reloaded-mobile_header_color-1563638-8.patch6.14 KB

Jeff,

Sorry you didn't have time to read to the 7th line where I stated:

I want the background color to somewhat match the middle of the gradient in the header background image.

prudal,

The attached patch allows you to a) Change the mobile header background-color exactly by adding it as one of the colorable regions and b) Makes this color changeable from the theme settings page.

I did run into a few problems getting the Color module to recognize to add the new setting for the Mobile header color (that's what I called it) so I would recommend the following:

  1. Disable the Color module and Pixture Reloaded
  2. Apply the patch
  3. Re-enable Pixture Reloaded - it should now have a bright pink color and the background-color should be set to something in between the top and bottom colors of the header.
  4. Re-eneable the Color module - the Mobile header color setting will probably be at the bottom of the color regions list.

I calculated the color for each of the predefined themes by averaging the top and the bottom color so this should work for all of the built in themes.

Let me know if you have any problems getting this to work.

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented

I read the patch (I can read code and understand it faster than English, lol). Yes, this will be a good start for prudal, I think he wants multiple settings, one per break point.

prudal’s picture

prudal CreditAttribution: prudal commented

For now, I created a new css and added its name in the section

;----------// Style sheets

of the [theme-name].info in the theme-folder.

This works! With media queries in it, I can set background-colors by the "#header .header-inner"-selector.

I will try Kevin's patch, too (thx!) ... seems to be "slightly" more elegant ;)

Jeff Burnz’s picture

Jeff Burnz CreditAttribution: Jeff Burnz commented
Status: Active » Fixed

OK, great gonna mark as fixed, I need to keep clearing the issue queue of open issues. Cheers!

prudal’s picture

prudal CreditAttribution: prudal commented

subscribing. Cheers back!

Kevin Morse’s picture

Kevin Morse CreditAttribution: Kevin Morse commented

prudal,

You don't need to post subscribing to be subscribed to this issue. There is a button at the top of the page that says Follow or Following which controls whether you're 'subscribed' or not.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.

wangfangs’s picture

wangfangs CreditAttribution: wangfangs commented

Thank you, I try to put the
# header, the # header. The header - inner {
Background: none repeat scroll 0 0 # 1 c9b00;
} ,Is very beautiful!
use my smart phone, can you have more design? straight talk android phones