47 | Twenty Eleven – Overwrite the Dark Color Scheme in a Child Theme

g+

Overwriting or customizing the dark color schem in a child theme of Twenty ten is difficult, because the dark stylesheet /colors/dark.css get loaded after the style.css of the child theme.
You can duplicate the same stylesheet structure in the child theme, but you need to programm the child theme to link the /colors/dark.css file after the corresponding file of the parent theme.

The stylesheet dark.css of the parent theme gets enqueued in twentyeleven/inc/theme-options.php (line 319):

/**
 * Enqueue the styles for the current color scheme.
 *
 * @since Twenty Eleven 1.0
 */
...etc...

Therefore, the dark.css of the child theme needs to be enqueued with a different priority; which can be done by adding a corresponding, adapted code into functions.php of your child theme. This code checks if the ‘dark’ color scheme is selected, and only then enqueues the /colors/dark.css of the child theme, thus allowing full color control from the theme options in the dashboard:

/** Enqueue the stylesheet for the current color scheme into the child theme. */
function twentyelevenchild_enqueue_color_scheme() {
	$options = twentyeleven_get_theme_options();
	$color_scheme = $options['color_scheme'];
	if ( 'dark' == $color_scheme )
		wp_enqueue_style( 'dark_child', get_stylesheet_directory_uri() . '/colors/dark.css', array(), null );
	do_action( 'twentyelevenchild_enqueue_color_scheme', 'dark_child' );
}
add_action( 'wp_enqueue_scripts', 'twentyelevenchild_enqueue_color_scheme', 11);

Now you can edit dark.css in your child theme, and add all the customisations to it.

This entry was posted in Twenty Eleven and tagged , , , . Bookmark the permalink.

5 Responses to Twenty Eleven – Overwrite the Dark Color Scheme in a Child Theme

  1. rick comments:

    Hi there,

    I saw your contribution in the wordpress forum in “Create 3 horizontal boxes between menu and container” topic.
    I did try to follow it as well, using the “secondary” (twenty ten theme) widget. But after insert a widget, the template break creazy, do you know? It must be because of the place I put the code .
    The result I would like is right this you have in your blog, over the post area. A place to present banner and stuff like that.

    I am sorry using this space here, but the topic there is alredy closed.

    If you preffer, you can answer by e-mail and don’t need post this comment here, once it has not to do with the post.

    Thank you in advance!

    • alchymyth replies:

      Hi rick,
      you can always start a new topic in the WordPress support forum, and put the link to the closed topic as reference.
      it is easier to post code and links in the forum, and there are also other members who might be able to help.

      I’ll check it out when I see it.
      good luck

  2. Rev. Voodoo comments:

    I was digging around, and it looks like it would be pretty difficult to add a colour scheme….. I started trying to figure out a way, it struck me as difficult though. It’s absolutely not necessary, it’s just one of those things I wanted to figure out, just because. Does it seem difficult to you, maybe I’m looking at it wrong?

    • alchymyth replies:

      if i remember rightly, i had to think around for a bit to figure it out.

      in my local playground, i have done it by adding this kind of code to functons.php of the child theme:
      add_filter('twentyeleven_color_schemes', 'child_color_scheme_options');
      function child_color_scheme_options($colors) {
      $child_colors = array(
      'pink' => array(
      'value' => 'pink',
      'label' => __( 'Pink', 'twentyeleven' ),
      'thumbnail' => get_stylesheet_directory_uri() . '/colors/images/pink.png',
      'default_link_color' => '#ff69b4',
      ),
      );
      return array_merge($colors, $child_colors);
      }

      and i have saved the image thumb for it (made from a copy of /twentyeleven/inc/images/dark.png – and recolored) in /colors/images/pink.png – this is just the way i have my folders in the child theme.

      second part:
      to enqueue the css file for the color scheme, i added this to functons.php of the child theme:
      /**
      * Enqueue the styles for the current color scheme into the child theme.
      * @since Twenty Eleven 1.0
      */
      function twentyelevenchild_enqueue_color_scheme() {
      $options = twentyeleven_get_theme_options();
      $color_scheme = $options['color_scheme'];
      if ( 'pink' == $color_scheme )
      wp_enqueue_style( 'color_child', get_stylesheet_directory_uri() . '/colors/pink.css', array(), null );
      do_action( 'twentyelevenchild_enqueue_color_scheme', 'color_child' );
      }

      also, do check @zeaks twenty eleven child theme; he seems to be doing a grand job there.

      • Rev. Voodoo replies:

        Just got back from holiday to see your response. Excellent info, thanks! Time for me to play around a bit!

Leave a Reply

Your email address will not be published.

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>