3HoursTheme – a Tutorial Child Theme for Thematic

3HoursTheme is a free tutorial child theme for Thematic Framework for WordPress.

While you can use it, as is, on your blog, it’s main purpose is to give you an initial track to develop your own child theme.

The 3HoursTheme child theme has been developed using CSS-only code and every CSS rule is commentend for your learning aims. It can be a good starting point for those who want to approach WordPress theme developing from a beginner point of view.

Furthermore CSS code has been in-deep explained in my How to create your own WordPress Theme in just 3 hours tutorial.

3hourstheme_home

How to create your own WordPress Theme in just 3 hours

Part I – Build a child theme based on Thematic Framework Theme

Part II –  Style header, footer and posts

Part III – Navigation and widget areas

Part IV – The Superfish Menu

You can find more resources on Thematic Framework developer blog, ThemeShaper. Ian Stewart is writing a more comprehensive tutorial “How To Create a WordPress Theme

I suggest to my italian readers to take a look at Altamente Decorativo. Daniele is writing here good tutorials on same topic. I guess more are coming in the next future.

3hourstheme_post

Download 3HoursTheme

You can download here the 3HoursTheme.

There is style.css code from the tutorial. I included also the function.php containg my Customizable Menu for Thematic for WordPress and the Fireworks PNG source for the background image.

Feedbacks are always welcomes.

Termini collegati: , , , , , Scrivi il tuo commento all'articolo

5 Commenti

  1. Pubblicato 4 luglio 2009 alle 12:11 | Link Permanente

    The download link is broken or the zip file is corrupted. :( Can you please send the theme to me? Thanks so much!

  2. Matteo Stagi
    Pubblicato 4 luglio 2009 alle 13:38 | Link Permanente

    ALPSaguado, where have you found the corrupted link? By clicking on “You can download here the 3HoursTheme” on this page I’ve been able to download a working zip file.

  3. Pubblicato 4 agosto 2009 alle 14:04 | Link Permanente

    Matteo,
    Love the post, it’s been a lot of help. One question if I could. I can’t seem to find how to change the color of the links within my posts. Also, the link color for “share this”? Not sure if these are two separate issues or not. I used you css as a template and I have been adding an subtracting to make my own. I’ve changed all the hover colors but can can’t figure out how to change these particular link colors.

    Thanks

  4. Matteo Stagi
    Pubblicato 26 agosto 2009 alle 04:10 | Link Permanente

    Justin, take a look at “Reset all a:hover colors” and “Use the !important declaration” chapters on part IV of the tutorial. You can set link color by using (for istance): a {color:#113242 /* deep blue } but more specific declaration on default.css will reset some link colors. Force all link colors with: a {color:#113242 !important/* links are ALWAYS deep blue*/}.

    “Share This” links have a .stbutton class. So you can different style them using a code like this: a.stbutton {color:#FF0000/* sharethis links are red*/}. Remember to apply !important declaration too if you previously applied it to generic links (as I showed above) .

  5. Pubblicato 7 gennaio 2011 alle 18:51 | Link Permanente

    Dude, that’s flippin’ phenomenal! Love how you come at teaching it! I’m definitely going to delve into this. Thanks for your work!

Scrivi un Commento

Il tuo indirizzo Email non verra' mai pubblicato e/o condiviso. I Campi obbligatori sono contrassegnati con *

*
*

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=""> <s> <strike> <strong> <pre lang="" line="" escaped="">