I’m very interested in seeing some alternative color schemes for the WordPress admin, so I thought I’d sponsor a mini-contest here. You don’t have to be a WordPress user or even have it installed to participate. The colors don’t have to match the logo or anything like that, I’m just interested in seeing easy-on-the-eyes color schemes people would enjoy looking at. For people who aren’t running a nightly build or not running WP at all I’ve put up two screenshots that you can use to get an idea of where the colors will go. You don’t have to be a designer to play, just play around with the colors in those images until you find some that you like and then post the results. Winners (I’ll probably pick a couple) will get prominent mention on this site and wordpress.org, a free unlimited-user copy of WordPress, and a small monetary prize via Paypal. So fame and fortune, what more could you ask for?
So to recap the important bits:
- Playing with interesting color variations for the WordPress admin sections.
- Screenshot one, screenshot two, and a HTML dummy page.
- How do I enter?
- Leave a comment with some way to represent your color scheme, whether it is a screenshot, CSS code, linked post, hex values, whatever you’re comfortable with. You can enter as many times as you want and win multiple times.
- Any guidelines?
- Be creative! Don’t modify the layout, just the colors.
- Friday night, my time. This is a low-impact project, all you need is a color picker and about ten minutes. Submit your entry as soon as possible so no uses your colors before you do. Enter as many times as you want.
- Fame, fortune, and that warm fuzzy feeling you get from contributing to open source and having your work in front of thousands of people.
When all is said and done I’ll roll this into a plugin or something so people can enjoy it. You don’t have to be a designer to enter, just put together something you like.
107 replies on “Color Schemes Contest”
[…] Tired of the grey? Photo Mat is having a contest. There are already some interesting entires where, with source CSS. […]
Ah, thanks Randy. For the entry to be valid you have to specify where the colors go. So if you want ot post hex values say #fb2 for header and #fea for background, etc. Just the hex values without context don’t help much. Basically the entry has to be something I can turn CSS, so I need to know what colors go where. Sorry if that wasn’t clear.
oh, btw, I hereby claim the above colors for use in a “real” entry
not each color individually (stevarino), those combinations of colors.
To further clarify, here’s a sample entry:
I just opened the files up in Topstyle and tweaked a tiny bit then took a screenshot. That’s one way to do it. The EditCSS Firefox extension might be a handy way too.
I just wanted to poke my head in and say, your sample entry, Matt, is absolutely beautiful.
A very minor tweak, but it looks oh so good.
I nominate it, pay yourself XD.
Hey, just a little something to help everyone out.
Hack the URI to use your own css file! Good luck!
And randy, I wouldn’t want those colors anyway!
Khaki: Screenshot (40kb GIF) | CSS File
Beach: Screenshot (40kb GIF) | CSS File
Steel Blue: Screenshot (40kb GIF) | CSS File
The one with flavour
Photomatt, the lead developer for WordPress is running a wee competition to spice up the admin panel for the blogging system. There’s only a short deadline, so playing with the UI is out of the question. I just quickly composed three themed color-sche…
Ok, here’s a try from me, based on my blog color scheme, we can call it “Aetles 1”:
Here are my entries — I pretty much just took your sample and did some color fills in ImageReady, so please excuse the bad quality.
Here’s a colour scheme I have been using myself for a little while now.
Maybe others will like it. I find when I am writing posts etc I need to ‘turn the lights down’ so to speak and I find these colours to be less confronting.
Not sure of the best way to show the css so I have placed it here at http://www.os42.com/wp-admin.css so you can grab it and have a look. It’s the one from Mingus 1.2 and has no changes other than colours.
Hope it works.
Here’s a quick soft blue scheme.
html file left intact.
Just realised I am an idiot. It’s much easier if you look at it here now. Sorry about that 🙂
I don’t know if I should, as I’m not a WP user (and probably won’t be switching from MT any time soon)… but what the heck. Here’s my submission.
Here’s my entry, of which I deem the Pumpkin theme.
*Shudders* I’m sorry, it’s pink.
I like the grayscale look of the interface to tell you the truth. If you do plan to change the style for the admin interface please do keep an option to roll-back to the grayscale scheme 🙂 One thing I would like to see changed is the default WP template. Its dull and unattractive.
BTW, just looking at the users admin page (for 1.3), can u please change those user level +/- links to a dropdown list. Its more usable!
Matt’s Handsome Orange Sandbox
Don’t tell me, you are going to promote Firefox through WP now! Its not fair for Opera lovers like me. 🙁
Ooh, Ooh, try this one on for size: http://stevarino.com/wp/color_contest.php?css_file=http://www.chrisjdavis.org/wp-admin.css
Here’s another one. “Aetles 2”:
It’s a slight variation of Aetles 1 posted earlier. I’ve tried to pay attention to all the :hover and :focus colors as well.
Places to look for color inspiration:
Here’s one inspired by my site, of all things. I like that color, hope you do too.
I realize this isn’t about the layout, but since you’re discussing the admin page I thought I’d ask. One of the reasons I’m still waiting to switch to WordPress is that in Opera the elements are stacked on top of one another. Is anyone working on a fix for that? Or better yet, does someone know how to fix that? I’ve tried and failed miserably.
For fun I put together another example:
Just a couple of questions:
How strict are you on the “no layout changes”? I’m asking because the images in the footer just don’t look good on dark backgrounds.
And what should we do with colors for pages we can’t see in the dummy page? Should we just leave them alone and then fix them later if our entries are selected?
I have created two color schemes:
Okay, okay. So I simplified the CSS as well. I couldn’t help myself. I like clean and simple. 😉
Sorry about that! 🙂
The first of several to come, here’s a brown-cream type theme: http://www.merseine.com/wp/cremebrulee.html
I have not had any idea about the name, so.. let me call it “Hurry up” :D. You can see it here. Thank you!
I prefer it b/w… much more serious.
Congrats for the winner. *cheers*
…and here’s my second flavor. A la photomatt: http://www.merseine.com/wp/photomatt.html
Again, have fun and enjoy!
Shall I call it Colorless before you call it Ugly?
Here we go:
(of course, I didn’t edit the header shadow… )
If the images look funny (don’t anti-alias well) that won’t be held against anyone in judging.
Yea… Paint did that automatically… :\
Inspiration by osmosis? After I finished the first color combo, I looked at photomatt.net again and realised…hey, what a sec…
+ Warm sandbox (white)
+ Warm sandbox (gray)
+ Cool sandbox
I couldn’t think of a witty title. It’s definitely inspired by my emotional state over the Ricky Williams retirement fiasco though.
I also could think to remember the link: http://www.iamjackscompany.com/blink/wordpress/index.html
Here’s my hack at it, dubbed Summer Days: http://goodblimey.com/redesigns/1.3-example.html
Here is my first, and probably last, entry: http://stuffandthings.org/1.3-example.html. I did change one or two padding values, but the idea is to give you a clear picture of the color scheme I like.
I will write more about the color changes later.
A couple of more:
+ Sandbox-by-the-Sea (cool)
+ Sandbox-by-the-Sea (warm)
I take that back. All original paddings and margin’s have been restored. The entry is still at the same place: http://stuffandthings.org/1.3-example.html.
My WP-Admin-Color Contest Entry: Stuff ‘n Press
Caution: this may seem familiar.
Re Comment#41 – from Matt Warren…
How do we compete? We all know Matt (Mr Mullenweg) is partial to his first name, so to have someone with the same first name submit a layout mimicing his (Mullenweg’s) own site…
IMO, I really think simplifying things is the main key here. I would also match up the representing colors of the WP logo with the interface to tie in the relation (yet keep the majority pretty neutral so there can be an easy color change like in the header to reflect what the person likes). Lets face it, there will be endless color possibilities and everyone will like something or another since everyone’s tastes are different (search color theory). So, I think the WP logo colors/branding would be the most important just for “brand” identity.
Here’s what I did:
My concentration was on keeping the main parts neutral, cleaning up the page visually (removed unneeded block elements, increased things like “Title” and “Post” to help focus them, etc), and allowed “white space” for a clean design.
Ok, I spent a few more seconds on this one…
here’s my entry:
pretty simple imo. it can’t beat that “bevelled” version from seriocomic though -_-*
header bg: #71828C
the links bar going sideways underneath the header: #E9E4E4
hover for a link: #CAE1F6
post section bg: #CEDAE1
content bg: #fff
Here is an entry, same basic colors just darker for a little more impact.
Here’s something I tried:
I made this style, similar to the style my blog uses:
and for a bigger change:
The second page I wanted to have the .current class to have a white border, but I didn’t have time to figure out the css to override the border setting for the parent adminmenu tag.
And yes, it’s dark 🙂 But, sometimes that’s easier to see.
I’m not sure if anyone has posted a similar scheme before (didn’t want to look at too many other pieces of work).
Here are 2 submissions:
something greenish orange
Dark Admin <-- there's my attempt at an admin color scheme
Aye, I just noticed the “no changes to the layout” rule. *slaps forehead* Just curious, Matt, do I qualify? I know you said not to change the layout, but I only changed the css, no changes to the xhtml was made. Either way, I still had fun doing it.
Blue is good.
If you like yours a little monochromatic.
Mono and dark.
I wish I could do this all day instead of working.
sepia & tulip.
This is a pretty heavy modification, but I like it. I changed some things other than just color values, but the only tomfoolery was with the CSS, which is still basically the same. The layout, or at least the XHTML portion of it, is still intact.
Matt’s Sharp Sandbox
(It looks much better in a Mozilla client. Sorry, I couldn’t resist using the border radii. It still looks good in other clients, though.)
Ok, last one, based on the previous beveled entry, this time with a gorgeous color scheme i’m sure has been seen before 😉
It’s called SerioIndex…
Hey Matt try SEPIA color scheme 😉 looks good 😀
Ah, crud. I’m too late. I should have checked back here earlier. I would have had fun with this contest!
You’re not too late, it’s going on until tomorrow night.
Okay, I present you:
Raspberry Milk serif and sans-serif
Biarriz in the autumn serif and sans-serif
Hallo Matt, I hope, you take a look at this page. Here is my wordpress-style:
I called it “WordPress da Vinci”.
Wish you the best. Have fun!
So, here is my idea: Dextrose – Contest Scheme
Quick done, so only working in Firefox, not in Opera or IE.
Second entry, just for kicks.
Ohhh, this is educational! I really liked Matt Warren’s rounded edges, but prefer my colours. Never heard of -moz-border-radius before. So this can’t count because I cheated and looked at Matt’s entry first. Still, here is Raspberry Milkshake.
Forgot to say: Raspberry Milkshake is only palatable in Mozilla et al. (otherwise indistinguishable from plain old Raspberry Milk). Second, maybe it’s not a bad idea to give non-IE users a little extra, without penalising IE users. Maybe there’s a little Opera-specific CSS special, too?
I have another entry, based again on “Pumpkin”, but this time I modified some of the graphics and cleaned up the UI to my liking — I’m currently using this exact them in my backend (here’s a screenshot);
Pumpkin WordPress Theme
As several people seem to want to modify more than the colours, are there any plans for a full-scale CSS competition? In the meantime: orchid.
Here is my entry.
I forgot to change the text color and the color in the buttons, so here it is again, modified.
Well in honor of Lance Armstrong’s 6th consecutive victory and his Wear Yellow campaign I have created two more.
Wear Yellow 1
Wear Yellow 2
This has been fun, thanks Matt
Those last links didn’t work, forget a double quote so here they are again
Wear Yellow 1 [http://www.jasonstanfill.com/wp-wearyellow.html]
Wear Yellow 2 [http://www.jasonstanfill.com/wp-wearyellow2.html]
I really like Alec’s and Mark’s entries.
I hope I have time before the contest is over to do my own. Unfortunately, I’m at work right now or I’d do one now. 🙂
Hmmm, I didn’t get an answer, so I guess the answer is no? *grin*
Oh well. I’d still like to offer my CSS up to anyone that wants to use it. (That was all I altered, no changes to XHTML were made.)
Here’s my entry: Middle Earth
I’ve done some font-tinkering too, but you can ignore these changes if you wish.
(PS: How many hours till the contest is closed?)
Here is another
And one more
And here is the final revision of the purple one
My third and last, a somewhat coffee-like theme, “Aetles Coffee”:
Here’s my entry (thanks to Stevarino for the stylesheet switcher): inspired by a photo of the Boston skyline.
It’s a little rough around the edges, but it gets the point across. I particularly wanted to make the buttons different colors from the input boxes, so it’s quite obvious that they’re not the same.
Just to be on the safe side, Middle Earth, Stripped Down is pretty much like Middle Earth, without the font-tinkering and the tiny & few margin/padding additions.
Here’s a green color scheme that I came up with.
Okay, you can still submit schemes if you want to but after this comment they won’t be able to qualify for a prize. Thanks to everyone who entered! I’ll be judging over the weekend.
When do they become a plugin?
How’s the judging going?
Slowly, I’ll finish it up this week though. I want to give every entry a fair shake.
Ahh okay, since I badly want to replace the dull WP admin interface.
Well, you don’t have to wait for the plugin to use the .css files. It will just be easier then. All you have to do is to replace wp-admin.css with the css-file of your choice. 😉
Strange week Matt 😉
Sorry, I must have missed the results. Where do you find the winning schemes?
WordPress backend styles
Last month, I submitted two styles to Photomatt’s colour schemes contest for the WordPress backend or administration panel, ie the pages that the users see when they post, add links or change options. Several WordPress users were interested in my colo…
Is the contest still going on?
You might find Color SynthAxis handy for brainstorming color swatches. Read the tutorial linked at the top of the page.
Matt, what is the “Dashboard” link for? Is this some new feature I’m not aware of?