Twenty Thirteen: Make It Yours

WordPress 3.6 was released today. With it, the Twenty Thirteen theme into which we’ve poured much energy. One aspect that was particularly important to me, when designing the theme, was to encourage users to customize the theme to their liking. For the very same reason, every icon in Twenty Thirteen is an easily recolorable icon-font glyph. So changing the whole color scheme is basically writing some CSS.

To celebrate the occasion, I made a couple of color themes you can install on your Twenty Thirteen blog.

2013 Green

twentythirteen-green

Green is my favorite color these days. Did you know when danish people have their final high school exams, they sit at a green table, because green has a calming effect on your mind? It’s true. I tried it.

Get 2013 Green (preview)

2013 Green Sequence

twentythirteen-green-sequential

Twenty Thirteen has emphasis on blogging, and post backgrounds are assigned based on post formats. If you don’t use post formats, but want the colors of Twenty Thirteen, get this one — it’ll simply alternate the background colors sequentially.

Get 2013 Green Sequence (preview)

2013 Blue

twentythirteen-blue

I actually threw in a shade of pink, or “salmon”, in this blue mix. So it’s not entirely shades of sky blue, but I guess you could not use the “status” post format if you dislike salmon. Or you could customize it and make it your own!

Get 2013 Blue (preview)

2013 Blue Sequence

twentythirteen-blue-sequential

If you really don’t like salmon but do want an alternating post-format-free blue theme, you’ll want to get this one and customize it. Or you could embrace the salmon. Smoked. On toast. With salt and pepper.

Get 2013 Blue Sequence (preview)

2013 Orange Sequence

twentythirteen-orange-sequence

Having made sequence versions of blue and green, it seems unfair not to complete the triad. So here’s Orange Sequence — that’s the default Twenty Thirteen color scheme, but the colorful post backgrounds are assigned regardless of post format.

Get 2013 Orange Sequence (preview)

How To?

These are child themes. That means they’re WordPress themes that require a parent theme to be present, in this case Twenty Thirteen. So these themes will only work if you also have Twenty Thirteen installed. If you’re on WordPress 3.6 or higher, Twenty Thirteen is preinstalled.

More Options

One of the best things about open source is that you can modify things to your liking, and even redistribute.

Please do so. Make it your own, and share it back.

I would like nothing more than to see you modify and redistribute any of the above child themes. So much, in fact, that if you’d like to re-color the default Twenty Thirteen header, I’ve made you this PSD so you can easily do just that.

Now go play with some colors!

Responses to “Twenty Thirteen: Make It Yours”

  1. Markus says:

    but this doesn´t work well, if there are Widgets in the Sidebar, because the Colours overlap the Sidebar Widgets.

  2. Augusto says:

    Hello Joen! Thanks for sharing your work!
    But it’s not working correctly here too.. The Twenty Thirteen’s original colors still in the footer and other elements.. Any advice?

    Cheers

  3. joen says:

    Thanks Markus and Augusto, I completely forgot the widget areas. They’re all fixed now, you can download new zips at the same locations.

    • Augusto says:

      Thank you very much, Joen!

    • Good to hear. I noticed the same.

      .widget
      background

      .widget a
      color

      Needs correction and in the sequentiel themes the parent colors show up after the sequence. After five post. If you get what I mean.

      But I really love focus on colors in the theme.

      • joen says:

        Did you get the updated zips I put up yesterday? I can’t reproduce the issues you mention on my test blog. Can I get a screenshot or URL to test?

  4. I’ll check the new zips and get back to you.

  5. Thanks! :-)
    What about RTL support?

  6. Oli says:

    Thanks a lot for these childs – good work :D

  7. Another issue – the color of the text in the dark green parts is still black, so it’s really hard to read. (Green, Sequential.)

  8. One last thing – when viewed on a smartphone screen, the color of the main navigation is still orange, as in the original theme. :-)

  9. sem says:

    Hi, looks really good!

    However, i can’t change the header background. Do you have any idea why? I can customize but it doesn’t show.

    Thanks!

  10. Hi Joen
    Thank you so much for the beautiful themes. Unfortunately the one I like the best, green sequential, has an odd right adjustment of all the text. I tried the other themes, and they work fine on my small site. If you like, you can take a look at http://www.tvaersnit.dk
    -I wont update the site for a few days now.

    Best regards
    Sara Asmussen
    danish architect

    • joen says:

      Hov, det efternavn kender jeg. Er vi mon i familje?

      Thank you! It seems for the “green sequential” I had forgotten to comment out the RTL language include.

      You can download this file and it’s the only change.

      This bug won’t be there in future versions, thanks for the note!

      • good job on the child-themes.
        i had the same problem. fixed it myself but then i found some other problems: the order of navigation-menu items, the order of the period-mark at every last sentence of a block of text.
        with the last fix, it displays correct. thanks.

  11. susan.h says:

    Hello
    Thank you for sharing the beautiful theme 2013! I like much the blue, Sequential. Everything is perfect.

    Best regards,

  12. Robert Dall says:

    Hi Joen I loved what you did in designing Twenty Thirteen. I created a dark version of twenty thirteen I affectionately called R2d2. You can check it out on the WordPress theme directly. Thanks for creating such an awesome theme.

    http://wordpress.org/themes/r2d2

  13. tmr84 says:

    Thanks for your work – these colours are much better than in stock :)

  14. Hey Joen,

    Glad to see you’ve submitted the first of your child themes for review – they’ll make a great addition to the community :)

    I just stopped by to say thank you for the header.psd which I really needed for my child theme (WPStrapThirteen) that’s in the repo. Now I can go all out and update it with some cool stuff.

    Keep up the good work and hope to see the rest submitted to the repo.

    • joen says:

      Thank you, I appreciate all the work you do!

      Once the first one is up to code, the three other ones should be quick to submit since they’re 99% the same code!

      WPStrapThirteen looks great.

  15. baywriter2013 says:

    Hi joen,

    I LURVE the new twenty thirteen theme and I have made it mine. :) Very beautiful. Thank you so much for providing this.

    I do not know how to change the rest of the page to match the peaceful oasis of my new blue header. Although I break out in hives when people speak in code language…I cannot find wpcontent themes whatever. I really tried!

    if you do not have the patience for a novice like me and want to just steer me to a link, that would be great. Thank you.

    • joen says:

      I have recently submitted the Blue theme to the WordPress theme directory. It should be up shortly. That will make it easier to install this blue variant. It’s not up yet, but when it’s up, hopefully this week, you will be able to follow these instructions and search for “2013 Blue”.

      If you can’t wait, try these instructions to manually install the theme.

      • baywriter2013 says:

        Joen, thank you so much for your reply. I’m going to try my best and it’s great that I’ll have a safety net at WordPress if my efforts fail.

        You are awesome for being so helpful and patient and the artwork on your other pages makes my heart swell. so beautiful!

  16. Awesome BLOG man ! :) :)

  17. Patti says:

    Have you made any attempt to make the content area larger? I need the content area to be 800 to 900pxs. While changing it works in current growers those still out there using Explorer 7, 8 or 9 the bottom side bar info overlaps the content area. Any suggestions would be appreciated.

    The address below is a testing server so it comes up a little slow.

    Thanks

  18. Hi Joen, Like everyone else here, I’m loving the theme. I’ve tried doing minor colour tweaks to the Blue theme, but as I am a totally n00b it seems really difficult. Although overall I am happy with the result. One thing that is not working for me though is on short posts, the right side widgets overlap the footer. See here: http://howtogame.com.au/lexicon/platformer/ Is there a way to stop that? Thanks!

    • Joen A. says:

      I think your colors look great!

      I’m afraid there’s no way to stop the sidebar overlapping down to the footer on short posts. Twenty Thirteen was designed with no sidebar by default, but one optional. That was a trade-off in order to make the repeating color bands work.

    • pattyland says:

      Simply set a min-height on .entry-content!

  19. This was awesome, I even managed to make my header responsive!

  20. Tom says:

    Child theme doesn’t show in the admin panel.
    Put the folders in the correct place. 2013 is installed.
    What do i miss? Do i have to activate it somewhere?

    • joen says:

      If you’re running Multi Site the theme has to be activated in network admin first.

      All the child themes will soon be in the official WordPress repository, so soon it’ll be easier to install these.

  21. Suman Gaudel says:

    Thank you for these awesome theme. I would like to use any color sequential theme and want to get no sequential color for blog post. infact I would like to use 2013 default color set in post format. how to do that?

  22. dimonauk says:

    Great theme… Really love what youve done with it… But i cant seem find where to change the sequential colour values… Could you point me in the right direction?

  23. Now, how do I install this child theme I’ve just downloaded? Is there an easy tutorial somewhere?

  24. Jacqui says:

    Hi Joen. I’m midway through a project using Twenty Thirteen and it’s going great. I love this design – well done! I want to alternate the background colors sequentially without using post formats, but I’ve already created a child theme and I’m loathe to now install one of your ‘sequence’ themes over the top and risk everything going pearshaped. Can you tell me how to make my current theme sequential myself? I’m fairly proficient with CSS and can struggle along with php files, so would really appreciate your help.
    ALSO…… Those alternating bands of color look great – is there any way to achieve that effect on pages?

    • Joen A. says:

      You’ll want to grab parts from the “sequence” theme stylesheet. For example, this styles the background of the 3rd post on a page:

      /**
       * Third post 
       */
      
      #content .hentry:nth-of-type( 7n + 3 ) {
      	background-color: #210d10;
      }
      

Leave a Reply