ThemeShaper Forums » Thematic

[sticky] [closed]

How To Change The Look of Thematic With a WordPress Child Theme

(47 posts)
  • Started 6 years ago by Ian Stewart
  • Latest reply from whatevjo
  • This topic is not a support question
  1. Don't Panic: This is a copy-paste extravanganza that shows you how to quickly create a WordPress child theme that looks just like the basic Thematic style. A perfect place to start messing around with the look of your theme. No programming skills are required.

    Like any WordPress theme, you can just dive right into the Thematic code and CSS and hack away. I've done this myself and it's the reason why I created Thematic in the first place, as a starting point. And I think it's a really great starting point for any WordPress-powered blog.

    But! If you want to use it as a framework for the look of your theme, that is, if you don't want to worry about your styling changes screwing up your chances of easily upgrading your theme, well, this is the article for you. I'm going to show you how to make what is called a WordPress Child Theme specifically for Thematic. Once you've done this you can start to change the look of Thematic without messing up the existing code.

    Let's get started.

    What is a WordPress Child Theme?

    A Child Theme inherits all the template files of the Parent Theme—except for style.css and functions.php, which take precedence over the original. On ThemeShaper, I'm using a Child Theme that modifies my theme Thematic. When I update Thematic in the future (or using the trunk version) I don't have to worry about any changes made to the Parent Theme overwriting my modifications.

    The Minimum Requirements

    The Minimum Requirements for a WordPress Child Theme are a uniquely-named directory (awesome-theme, bonzotheme, etc.) within your themes directory and a syle.css file within that unique directory (bonzotheme/style.css).

    The style.css file must begin with a commented section something like the following.

    /*
    Theme Name: Your-theme-name
    Theme URI: the-theme's-homepage
    Description: a-brief-description
    Author: your-name
    Author URI: your-URI
    Template: thematic
    Version: a-number--optional
    .
    General comments/License Statement if any.
    .
    */

    The important thing in this example is the parameter, Template. It's here that you need to define the name of your theme Parent. In this case, Thematic. Note that in this example Thematic is in lowercase. You must use the exact name and case of your theme directory.

    Building Off Of The Existing Thematic Style

    The best way to get started is by copying the sample child theme from the Thematic folder into the wp-content/themes directory. Then simply rename the copied folder to your new theme name and change the theme name in the copied style.css. Activate this new theme from within the WordPress themes panel and you're on your way to editing your theme worry free!

    More Information on Child Themes

    Some Examples of Thematic Child Themes

    Over time, I'll continue adding links to this section, highlighting some dynamic-looking and different examples of Thematic Child Themes.

    Posted 6 years ago #
  2. I did that way for mine. That's really a good start.
    But is there a "clean" way to add category-X.php files to have custom pages for a category archive ? (I mean without adding this file in the thematic folder)

    Posted 6 years ago #
  3. There might be in WordPress 2.7.

    Posted 6 years ago #
  4. That sounds good.

    Posted 6 years ago #
  5. Erin
    Member

    Is the some dummy text I can import into my local wordpress to test out my child theme before going live? Something that tests all the elements and classes?

    Posted 6 years ago #
  6. From the WordPress support forums: Is there a Dummy Text SQL import available?

    It's the content I use myself.

    Posted 6 years ago #
  7. Ian, thank you so much for this clear tutorial. The one area I'm having trouble with is in using a layout CSS. For instance, using your (awesome) Thematic theme, I derive a child theme, and use "import url('../thematic/style.css');" So far, so good, until I decide I want to use the 3-column layout. Adding an import line to include the 3-column CSS does not override the layout that was included by the Thematic style.css. Now suddenly I have to DUPLICATE all the CSS in Thematic style.css, changing only the one line to include the layout.

    Is there some technique I could use that would elegantly allow multiple child themes of Thematic to use different layout schemas?

    Posted 6 years ago #
  8. You could copy the structure you want into your stylesheet and selectivly reset the 2 column structure.

    For example: I'm working on a child theme that starts with the 3 column sheet. In my style .css I have the following:

    /* =Structure
    -------------------------------------------------------------- */
    
    /*
    Two column structure for posts and pages
    */
    .page #container,
    .single #container {
        width:620px;
        float:left;
    }
    .page #content,
    .single #content {
        margin:0;
        width:540px;
        overflow:hidden;
    }
    .page .main-aside,
    .single .main-aside {
        position:relative;
    }
    .page #primary,
    .single #primary {
        width:300px;
        float:right;
    }
    .page #secondary,
    .single #secondary {
        clear:right;
        margin:0 10px 0 0;
        float:right;
        width:300px;
    }

    Presto. My 3 column theme is 2 columns on posts and pages.

    Posted 6 years ago #
  9. Ian,

    D'oh! That's a great idea. Works for me, thanks!

    Posted 6 years ago #
  10. Awesome. Really having fun with this, and also I will be able to give a distinctive look to four different WP/Thematic sites this way, and still keep up with updates. Awesome^2.

    Posted 6 years ago #
  11. heather
    Member

    I don't exactly understand how you implement the child-theme. Do I set "ThemeShaper" as my default theme, in the administrative panel? If that's the case my child-theme does not show up.

    ####

    Never mind. I figured out that i had named my style.css styles.css. Gotta love simple mistakes that mess up everything.

    Posted 6 years ago #
  12. OK. I know this should be pretty simple. But I followed all the instructions, checked for spelling and case. And nothing actually imports. My child theme is a bare bones site with no formatting. What am I missing?

    Posted 5 years ago #
  13. jimg
    Member

    Note that in 0.9 there is no sitemeta.css in thematic..

    /* Style the meta panel for logged-in users */
    @import url('../thematic/library/styles/sitemeta.css');

    should be removed.

    Posted 5 years ago #
  14. Got rid of that line and a whole lot more. Should be simpler now. Thanks for for reminding me. :)

    Posted 5 years ago #
  15. I'm fairly new to WP - been using Joomla for the last 6 years - so moving into WP has been an amazing experience for me. I love it. And I love thematic! What a powerful framework to build on and to learn from -- thanks Ian.

    I just want to clarify one thing before I begin customizing.Very basic, but I just want to make sure I get started right.

    I'm thinking this is the way to work: if I want to edit an existing style from the thematic style.css, I simply add that style to my child style sheet and edit as needed. If I need to add a new #div or style, again, add that to my child style sheet.

    Is this correct?

    Thank you again for such a wonderful framework!

    Yael

    Posted 5 years ago #
  16. Pretty much. Try it out with the sample child theme in the Thematic directory.

    Posted 5 years ago #
  17. Ok, I'm quite confused and the sample child-template doesn't help.

    I've already written a generic CSS for a page style I've created starting from GIMP.
    Graphics elements are not so many, and the layout is almost a standard header + 1 column + sidebar + footer, but I would like to have a slightly different layout for my header, having the menu at the very top of the page, followed (below) by blog's title, tagline, etc...

    I could use position:absolute, but honestly I don't like that way: there is a better way?

    Also, is not clear how can I rid of the default styles, as at the moment, even keeping the menu on the same default position, my style mix with the default style: menu items, for instance, are displayed with some graphics or border, but I can't find where this is on the CSS (even Firebug doesn't help on this case:
    doesn't seems to have any border, but the border is there!).

    Thanks,
    Andrea

    Posted 5 years ago #
  18. Just to clarify, this is more or less the result I would like to achieve: www.sciamanna.eu//sandbox/sciamannablogga/test.html

    Posted 5 years ago #
  19. If you're having a problem mixing the default styles with yours, don't import the default styles.

    Posted 5 years ago #
  20. Now I've got what I was missing.

    I didn't understood about the default styles and that I can explode thematic_header() using each single function following my needs.

    Thanks,
    Andrea

    Posted 5 years ago #
  21. I created several child themes in my local Thematic dev. folder. All of them work except one, and I can't figure out what the problem is.

    When I select the them, I get the following message:

    Fatal error: Cannot redeclare mytheme_add_admin() (previously declared in C:\Program Files\xampplite\htdocs\thematic\wp-content\themes\graftonlandscape\functions.php:139) in C:\Program Files\xampplite\htdocs\thematic\wp-content\themes\thematic\library\extensions\theme-options.php on line 71

    I checked line 71, and can't figure out any discrepancy between this child theme and others that work....any idea?

    Posted 5 years ago #
  22. All is well. For whatever reason, I moved the hooks-filters and functions files into the child theme folder and that caused the error.

    Posted 5 years ago #
  23. macart
    Member

    Sorry if the answer to this is somewhere in the forum, my search came up empty. Thanks for Thematic! Newbie to Wordpress and Thematic.

    I would like to add a "wrapper/container" around Thematic, like Kubrick. I would do this with a function?

    Thanks

    Posted 5 years ago #
  24. Could you please prove more details .. what should be in this wrapper / container and why?

    Cheers,

    Chris

    Posted 5 years ago #
  25. macart
    Member

    Hi Chris,

    What Im trying to do is "Wrap" everything in my page into a round window (like the wordpress default theme - kubrick). Not sure how exactly I do that with a child theme.

    Thank you for the help.
    Shawn

    Posted 5 years ago #
  26. peteremil
    Member

    Hi There

    I have a problem with this simple step. I just use the sample-folder provided by Ian, do nothing with it, but when I check in WP-admin / Available Themes there is no styling at all. This baffles me; it should look exactly the same according to the instructions. Or am I missing something?

    Look at the process

    - edit: when I activate the childtheme, the styling is correct. Only the preview in the thickbox doesn't show styling. Why is that? No big problem, but it puzzled me...

    Peter

    Posted 5 years ago #
  27. Hi Shawn,

    this has nothing to do with a child theme .. create a graphic, slice it into the upper part, the lower part (both just the rounded corner) and the middle part (using a 1 px or 10 px height). The rest is done within your child theme's CSS file. Use the different images as background for #header, #main and #footer. You might need to adjust the settings for margin and padding.

    Cheers,

    Chris

    Posted 5 years ago #
  28. LarsG
    Member

    Hi, a while ago I downloaded the feature theme. Now I wonder if it is possible to include an image below the menu bar on the blog page? (where there Moe is à text)

    Also, is it possible to change the header of the feature theme?

    How can I handle several users using the theme in a WPMU installation?

    Posted 5 years ago #
  29. daveweinberg
    Member

    new to thematic. novice coder. more right brain. trying to figure out child theme overrides and totally cutting my teeth:

    http://themeshaper.com/wordpress-child-theme-basics/

    I've customized the child theme, updated to the root theme directory, changed the child theme header. *CANNOT* figure out the 'Overriding Parent Theme Styles' - I've installed Firebug and am just trying to do a simple test - change the hover color on the page from the default #FF4B33 to #399588.

    So where the tutorial says:
    "Then just copy and paste the code into your Child Theme CSS where you can edit it safely"

    WHERE am in the child theme style.css file do I copy it TO? I tried simply pasting:

    a:active, a:hover {
    color:#399588;
    }

    beneath:

    /* Apply default theme styles and colors */
    /* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
    @import url('../thematic/library/styles/default.css');

    what am I doing wrong?

    Posted 4 years ago #
  30. daveweinberg
    Member

    here's how my child theme styles.css looks.
    again, simply trying to change the hover color on the links as a test.
    read thru some of the other forums so thought I had this correct but the hover color remains red.

    ??

    /*
    Theme Name: Boothbay Cottages
    Theme URI: http://www.boothbaycottages.com/new
    Description: Use this theme to start your Thematic Child Theme development.
    Author: Dave Weinberg
    Author URI: http://daveweinberg.com
    Template: thematic
    Version: 1.0
    Tags: Thematic
    .
    Thematic is © Ian Stewart http://themeshaper.com/
    .
    */

    /* Reset browser defaults */
    @import url('../thematic/library/styles/reset.css');

    /* Apply basic typography styles */
    @import url('../thematic/library/styles/typography.css');

    /* Apply a basic layout */
    @import url('../thematic/library/layouts/2c-r-fixed.css');

    /* Apply basic image styles */
    @import url('../thematic/library/styles/images.css');

    /* Apply default theme styles and colors */
    /* It's better to actually copy over default.css into this file (or link to a copy in your child theme) if you're going to do anything outrageous */
    @import url('../thematic/library/styles/default.css');

    /* Prepare theme for plugins */
    @import url('../thematic/library/styles/plugins.css');

    a:active, a:hover {
    color:#399588;
    }

    Posted 4 years ago #

RSS feed for this topic

Topic Closed

This topic has been closed to new replies.