WordPress 2011 Color Fun

We have been playing with the new twenty eleven theme from the WordPress version 3.2 release, navigating around the admin screen we found some of the nice new twenty eleven theme options.

There is an option to select a dark theme stylesheet as well as the standard, another option is to change all the link options site wide, this option injects styles into the head section as the theme loads, however we did not like the website title being a link, and we got thinking how it would be great to have a lot more control over the colors, so we created a nice little child theme and took control.

We have already been looking at extracting the colors from the header and we have merged this into our child theme, it makes it easy to color the theme around the image colors, we have extracted the most popular 20 colors and created variants of darker, lighter and complimentary, splitting the neutrals into their own section that is the black to white colors.

The Download

You may download the file here or visit the All Downloads page for other files.

Color Master

The Child Theme

To load and run the child theme you must be running at least version WordPress 3.2 if you do not see the twenty eleven theme in the theme options then you can not use this child theme.

The first part is just to download the theme install it and activate it, it is best to do this first in a local WordPress environment, the first section of this post has a bit about setting up a local WordPress.

Colors

Header Image

Twenty Eleven by default will show random headers, if we want to match our theme colors to our header we set a static header, or upload our own, we have uploaded our own for our example.

Colors-2

The Dark Side

Twenty ten has the option to load a dark stylesheet, our image would look better in a dark theme so we activate the dark theme from the twenty eleven theme options.

Colors-3

Theme Colors

That is all standard so what can our child theme do with the colors, if you have seven minutes then you can get a quick overview from YouTube?

Updated Admin Screen

We have updated the admin area, please view this video for the changes, and it will also show the color picker first instance.

Theme Colors Page

When we select the theme colors page we will see a set of colors from the twenty eleven themes stylesheet, these are the main text colors, links, menus and borders.

Colors-11

Color Selector

Twenty Eleven has a nice color selector, it took us a lot of headaches to get this to work with all our colors, but we managed it “Gold Star * “ , if we select the color swatch or press the select a color button the color wheel will appear so we can select or tweak the color, and to reset the color to the themes default we do the same for the “Reset to Default” options.

Colors-12

Header Color Swatches

At the bottom of our page we can see the colors generated by our header image, as we have already said the first twenty colors, plus the greys, these are so we can find the colors we want, copy the hex codes (#ff00ff) to notepad so we can use them in our theme, we are only showing four from the twenty in this image.

Colors-13

Global Links

A new feature of twenty eleven is the global link color, we can select a color and set this from the theme options tab, we have used one of the colors from our image.

Colors-6

Header Colors

Here we can change the text and border colors for our theme, by default the title has the link color as a hover over, we may want to set this to the same as our main color, and we can change the header tag line which is the Site Description.

Colors-14

Menu Colors

The menu has a built in background gradient and a solid color for older browsers, here we have changed the menu gradient start, and we would change the Menu Background for the older browsers.

Colors-15

Sub Menu and Hover Colors

Here we could change the other color attributes for the dropdown and hover colors.

Colors-16

Title Colors

Now we can change the title colors and hover colors for our theme

Colors-17

Stylesheet

There are two stylesheet boxes, the first is so we can add any other changes without having to edit files, the second is the styles that are generated by the theme, these are for any developers that could be copy and use these to create a new child theme.

Colors-18

Main Background

The main background can be changed with the standard WordPress twenty eleven background options.

Colors-10

The Results

Here we can see that our header now fits into our theme, and the theme colors compliment our header graphic!

Colors-1

We hope that you like our child theme, WordPress are bringing out a new theme each year, that should keep us busy?

Notices

We do require your feedback to improve our themes and tutorials, please leave your comments good or bad.

Code disclaimer information

If this document contains programming examples, www.DigitalRaindrops.net grants you a nonexclusive copyright license to use all programming code from which you can generate similar functions tailored to your own specific needs.

All sample code is provided by http://DigitalRaindrops.net for learning illustrative purposes only.

These examples have not been thoroughly tested under all conditions. www.DigitalRaindrops.net, therefore, cannot guarantee or imply reliability, serviceability, or function of these examples.

All programs contained herein are provided to you “AS IS” without any warranties of any kind. The implied warranties of non-infringement, merchantability and fitness for a particular purpose are expressly disclaimed.

Membership

Registration and Membership is no longer required for downloading files or interacting with Digital Raindrops, posting a comment or topic in the forum does use Captcha to reduce spammers.

This website is a tool to support and promote WordPress and Artisteer theme development, please support, share and give credit for any benefits you gain from the tutorials on this website.

45 thoughts on “WordPress 2011 Color Fun

  1. I was really excited when I saw the capabilities of this child theme, so I downloaded and activated it. When I go to Appearance  > Theme Options, the only color section that is active is ‘Header Colours’. I can’t select other color options. Also, I tried changing the Site Title Color but nothing happened. Would you have any suggestions? I am running a local version of WordPress.

    Many thanks

    • Hi David,

      I have two options: Theme Colours and Theme Options.
      Theme Options has a ‘Digital Raindrops 2011 Color Master Theme Options’ banner but is the default TwentyEleven options for selecting a dark or light theme.

      Under Theme Colours, I have options to change Header Colours but even when I enter a #colour, the palette does not update to reflect the change. Perhaps a plugin is messing with it or another theme. I was using ThemeKit which I removed.

      Cheers.

      • Hi George,
        It is working as expected, I think that the new admin area is not documented, so I have updated the post with another YouTube video.

        Watch this and see if it answers your question, there is only one section open by default, you need to click the header bar to toggle the sections.

        The first color for some reason you need to click the outer ring and then select the color.

        Regards

        David 

  2. That is a strange one, do you have a local install to test on?

    I have it loaded and running on a local machine, I will test it on a live site later this week, thatns for the feedback.

    David

  3. having same problem as george – not getting anything other than the Header Colours despite clicking on header bar.

  4. have watched the video and copied it exactly and the menu colours don’t come up – only the header colors stay there … please help as this is a fantastic looking theme

  5. Hey David,
    I’m getting this error,
    “Warning: include_once(/includes/color-functions.php): failed to open stream: No such file or directory in /httpdocs/wp-content/themes/Twentyeleven-template/functions.php on line 3″
    And I am also having the same problem as George, i have the theme colors, but only the header colors come up and I cant even change them. I don’t really know what I am doing wrong.

  6. @Jack
    I have downloaded the zip just incase there was something wrong tested in IE9, IE8, IE7, FireFox and Chrome, and the sections collapse just fine, the code used is the WordPress ‘Admin Dashboard’ so all elements and code are the same as the admin dashboard, do the sections there collapse.

    If not test on a local install as there could be a script issue, disable all plugins and retest.

    Is this fixed as per your forum post?

    Regards

    David

  7. @Kelley,
    See my comment to Jack.

    I notice that you are not testing by using the Theme upload option, and the include path is not correct.

    Open the downloaded zip and you will see the color-functions.php file is in a subfolder, in functions.php the code call is:
    include_once('/includes/color-functions.php');

    Try uploading from Admin > Appearance > Themes > Upload as your call is looking in a folder Twentyeleven-template, it could be that the folder structure is not correct and no /includes/ folder exists in your install?

    David

  8. David,
    I did the upload the way you described, but i am still getting this same error.
    “Warning: include_once(/includes/color-functions.php): failed to open stream: No such file or directory in wp-content/themes/raindrops-colormaster1/functions.php on line 3″
    It also mentions:
    “Failed opening ‘/includes/color-functions.php’ for inclusion (include_path=’.:’)”
    I also tried disabling all plugins and retested a few times.

    • Hi Kelley,
      Is it a local install as this is a strange one, could you have a look in /themes/raindrops-colormaster1/ is there a folder inside /includes/ with files and a sub folder inside.

      David

  9. Yes, i am on a local install. In /includes/, there is /color/, color-functions.php, theme-colors.css, theme-colors.js. Everything is there, so its very confusing as to why its not working. I really appreciate your help.

  10. @ David,

    First thanks for this great child theme but I got the same problems as the others.. :(

    I did a fresh install of wordpress 3.2.1, downloaded your child theme activate it, so no other plugins / themes installed. Under Theme Colours, I only have the options to change Header Colours the other ones won’t even collapse and changing a colour doesn’t affect anything? I tested it locally using webmatrix and also a clean install on a test server both with the same outcome…How come?

    • Hi,
      I am at a loss as to what is happening here, I use local WAMPP server, and in my hosting account it works just fine.

      Did you try a different browser I tested in IE9, FireFox and Chrome, the dropdown uses the WordPress admin JQuery scripts, on the WordPress > Admin > Dashboard, do the sections collapse ok as this is the same script, the sections on the Admin > Dashboard should collapse if everything is installed ok.

      Regards

      David

    • I have updated the download to open with all sections, it must be a JQuery conflict, please download and try again.

      Regards

      David

  11. Hi David, I am experiancing the same issue with your colormaster theme
    I am using a WP 3.2.1, I am also using Firefox 5.01 that is running on a mac.

    I uploaded the theme using the WP theme uploader. When I activated the theme I got the following errors

    Warning: include_once(/includes/color-functions.php) [function.include-once]: failed to open stream: No such file or directory in /home/content/t/r/a/transmitter/html/wp-content/themes/raindrops-colormaster2/functions.php on line 3

    I tried deactivating all my plug ins but that didn’t resolve the problem.
    I am using the dark them option in twenty eleven.

    Mike

    • Hi Mike,
      I think it might be a Mac thing with the include relative paths as it does not happen on Windows, I have changed to absolute paths and uploaded a new version.

      I have also started with all sections open for those that are getting the JQuery conflict.

      Let us know if this fixes it?

      Regards

      David

  12. Hi Dave,

    I was able to install it, however when I tried to change the nav menu color I got the following error.

    Warning: Cannot modify header information – headers already sent by (output started at /home/content/t/r/a/transmitter/html/wp-content/themes/raindrops-colormaster1/includes/color-functions.php:71) in /home/content/t/r/a/transmitter/html/wp-includes/pluggable.php on line 934

    Mike

    • I will have to get a Mac to test on lol!

      I will try to look at the files tomorrow, the headers sent is often due to whitespace after the closing php tag in one of the files ?>

      All the files except functions.php which should never have the closing php tag ?>

      Regards

      David

    • Hi Mike,
      I found it in theme-colors.php right at the end I had missed the closing php tag ?>

      I have updated the download, third time lucky fingers crossed.

      David

  13. Hi, I installed the theme but now I can’t log into my wordpress site any more, after I try to log in the site just turns blank. There is no problem with my blog, just that I can’t seem to log in.

    • No one else has reported this, the teme requires WordPress 3.xx with the twenty eleven theme installed.

      Use ftp ot your ISP file manager and rename the child themes folder or delete it to activate the default theme.

      Regards

      David

    • No one else has reported this, the teme requires WordPress 3.xx with the twenty eleven theme installed.

      Use ftp or your ISP file manager check you have a theme folder /twentyeleven/ and the rename the child themes folder or delete it to activate the default theme.

      Regards

      David

  14. I would like to download this theme, but the download link doesn’t work. Is it possible to still get this theme? Thanks in advance.

    Roy

  15. Hi there,

    thanks for this great twenty eleven child theme!

    I installed it, but in the “Theme Colors” section the “header Image Colors” are not extracted from the chosen header image, I can only see blacks & greys.

    WordPress is 3.2.1
    GD 2.0.34 is installed
    PHP is 5.2.6

    I can see no PHP errors or warnings in the log files of the server.

    Or are there any further requirements on the server?
    Any hints or help?

    Thanks in advance!
    Ralf.

  16. Great site! Just downloaded and activated the Color Master child theme. I had been working for several days trying to accomplish this and with this theme it took less that a 20 minutes.

  17. Absolutely amazing changing colors in menus. I am not a programmer and love the click options. I have two questions:

    1. The site shows differently on firefox 9 and older firefox
    2. How do I move the search box to the top or make it disappear as I want to turn off the header text as using graphics header instead

    Thanks

    Salman

    • for question 1 clarifications I meant it does not show colors in older firefox on my desktop but it shows on my laptop in firefox 9. Just want to be sure it is consistent with all computers.

      Still need help with question 2

  18. Pingback: WordPress Arena: A Blog for WordPress Developers, Designers and Blogger

  19. Hi there,
    THanks for this work, i will be talking to a programmer here to get your new child theme installed so i can tweak the colours of our template. But i am also wondering – can you tell me which part of the css code will allow me to reduce the width of the branding section at the top – it takes up too much screen depth and i want to make it narrower. Ditto the photograph. The css sets the image height to auto – so will it work if i just upload my own narrower photo?

  20. I would love to hear the youtube videos on this theme, but the sound is not working. Even when I went direct to youtube, I could hear he commercial, but no sound when the color master video started.

    Can you tell me does this theme allow the content or page color to change? I would love to have a pages that have colors other than white and black!

    Thanks so much.
    Deborah

  21. This is great! Really saved me. But I was just wondering, is there anyway I can pick my own colour for the colour scheme? It’s a bit annoying that “dark” and “light” are the only options.

  22. Hello,

    I don’t know if you guys still have the same problems with theme colors not loading, but one of the possible issues could be that twenty-eleven default “includes” folder is named “inc”, not “includes”. The directory in the child theme points to “includes” folder. Simply change the name from includes to inc in child theme and it’ll work /worked for me/.

  23. The colors weren’t being extracted from the header image. The problem was PHP setting
    allow_url_fopen=Off

    It needs to be
    allow_url_fopen=On

    this is for the GetImageSize function call

    If you are having the same problem and only this problem it might be this..

Leave a Reply

Your email address will not be published. Required fields are marked *

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>

Connections

Connect with Us
Follow Digital Raindrops on Twitter Join Digital Raindrops on Facebook
Share

Related Posts

Posted in Twenty Eleven

pluggable-image2_thumb.png

In April 2011 we wrote a post on pluggable functions, since then we have been looking at other functions like post classes, which we used in the first release of our photo blogging theme. While loitering over on the WordPress … Continue reading

Read More