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.
You may download the file here or visit the All Downloads page for other files.
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.
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.
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.
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.
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.
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.
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.
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.
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.
Sub Menu and Hover Colors
Here we could change the other color attributes for the dropdown and hover colors.
Now we can change the title colors and hover colors for our theme
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.
The main background can be changed with the standard WordPress twenty eleven background options.
Here we can see that our header now fits into our theme, and the theme colors compliment our header graphic!
We hope that you like our child theme, WordPress are bringing out a new theme each year, that should keep us busy?
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.
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.