So I get that if I want to change (or add?) color choices for the theme (other than the standard red/blue/green/black/gray/white already defined) I need to do this in the local.css file.

So my quick question is this - with in Mix and Match and how it employs the local.css file - Can I add new colors, but still keep the old ones? (so that added colors named "CustomBlue", or "CustomGray" show up in the drop down lists and I still have the option of choosing the default colors?)
OR
Can I only change/edit the existing palette?

Anything I should know before I launch into this palette customization effort?

Thanks much!

./g

Comments

ajross’s picture

Right now, you can either override the CSS for existing color classes, or modify the theme-settings.php file to add more options to the theme configuration page and the associated body classes. In the next release of the theme I'm going to add some generic "Custom" options to the theme as other people have requested about this. But that may not be ready for a little bit. If you decide to add additional color schemes yourself and need more details about how to do it, let me know and I will try to give more details.

gnicho’s picture

Thanks. Yes, I'd be interested in more info on this.

Thanks!

./g

ajross’s picture

If you want to add new options for the base colors that are configured on the theme configuration page, then you need to edit theme-settings.php. For example, if you wanted to add a new custom body background color, you'd edit the following in function mix_and_match_settings():

  $form['mix_and_match_colors']['mix_and_match_body_bg'] = array(
    '#type'          => 'select',
    '#title'         => t('Body background color'),
    '#options'       => array(
      'white' => t('White (default)'),
      'gray' => t('Gray'),
      'black' => t('Black'),
      'blue' => t('Blue'),
      'red' => t('Red'),
      'green' => t('Green'),
     ),
    '#default_value' => $saved_settings['mix_and_match_body_bg'],
  );

To add a custom option you could insert a line after 'green' => t('Green'), as follows:

  $form['mix_and_match_colors']['mix_and_match_body_bg'] = array(
    '#type'          => 'select',
    '#title'         => t('Body background color'),
    '#options'       => array(
      'white' => t('White (default)'),
      'gray' => t('Gray'),
      'black' => t('Black'),
      'blue' => t('Blue'),
      'red' => t('Red'),
      'green' => t('Green'),
      'custom' => t('Custom Color'),
     ),
    '#default_value' => $saved_settings['mix_and_match_body_bg'],
  );

This would automatically add an option for "Custom Color" on the theme configuration page. If that is selected, then the class "custom" would be added to the body classes. So then you'd just need to add the appropriate CSS. You can copy the CSS for a single color from base-colors.css into local.css and then change the classes and the styles to meet your needs. This works the same for accent colors, footer colors, header colors, etc. All of those will be added as body classes.

If you want to add new color options for block styling, you need to edit mix_and_match.info. In the section for Skinr styles, you can add a new option for any of the style groups by adding two lines of code. So to add a new block background color option, you would add:

skinr[background-color][options][13][label] = Custom color
skinr[background-color][options][13][class] = custom-color

This will add the option for "Custom color" to the select field in the Skinr section of the block configuration page. It will also automatically add the class "custom-color" to the block. Again, you can copy code from skins.css for one of the other colors into local.css and change the class to your custom class and edit the styles.

Let me know if you need any additional information or have any questions. Hopefully this is enough to get you started.

ajross’s picture

Status: Active » Closed (works as designed)

Closing issue; I'm hoping the above information answered the question.

LadyVicious’s picture

I am currently trying to use this method, however I want to add a custom image as my background.

I have replicated the steps as above and added my .png background to the images file in the theme.
However when I save it, it only comes up with a white background.

Help!

LadyVicious’s picture

Status: Closed (works as designed) » Needs review
LadyVicious’s picture

Status: Needs review » Closed (works as designed)

Nevermind! Eventually figured it out! :D