May 5, 2012

Create a child theme for thematic with easy steps

         Spending money for buying a theme for Wordpress or Blogger is not always necessary. We can create a beautiful theme at free of cost easily. All you need is only some hours even if you are not geek.
        Creating a child theme for twenty ten is easy. I wrote an article about that previously.
Now, We can create a child theme for thematic.
        Thematic is a framework for Wordpress like Twentyten, Genesis etc. Also some of the features includes:
  • Perfect to use as-is or as a blank WordPress theme for development
  • Fully Search-Engine Optimized
  • Extra widget-ready areas (13 in total) and more possible in your Child Theme
  • Free and commercially supported Child Themes are available for upgrading the theme
  • Includes a sample WordPress Child Theme for rapid development
  • A wiki-editable guide to Thematic Customization
  • Ready for WordPress plugins like Subscribe to Comments, WP-PageNavi, and Comment-license
  • Fully compatible with All-In-One SEO and Platinum SEO plugins
  • Multiple, easy to implement, bulletproof layout options for 2, or 3 column designs
  • Modular CSS with pre-packaged resets and basic typography
  • Dynamic post and body classes make it a hyper-canvas for CSS artists
  • Editable footer text—remove the theme credit without harming the theme
  • Options for multi-author blogs
Now, we can create a child theme


  1. First, Download thematic from here
  2. After you unzipped the Thematic zip file
  3. Find the "thematicsamplechildtheme" sub folder.
  4. Rename the folder as you like. eg. bluechild
  5. Open the style.css file, and edit these area with your details
    1. /*
      Theme Name: Blue Child Theme
      Theme URI:
      Description: This is ds9n's child thema named blue child.
      Author: ds9n
      Author URI: http://www.ds9n.com/
      Template: thematic
      Version: 1.0
      Tags: Thematic, blue, child...whatever
      .
      Thematic is © Ian Stewart http://themeshaper.com/
      .
      */
       
  6.  Paste the code below

    1. /* 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');
  7.  Paste the default css code  below
    1. body, input, textarea {
          font: 15px/22px Georgia,serif;
          background-color:#F2F4F7;
      }
      p, ul, ol, dd, pre {
          margin-bottom: 22px;
      }
      pre, code {
          font: 14px/22px Monaco,monospace;
      }
      blockquote {
          color: #666666;
          font-style: italic;
      }
      table {
          -moz-border-bottom-colors: none;
          -moz-border-image: none;
          -moz-border-left-colors: none;
          -moz-border-right-colors: none;
          -moz-border-top-colors: none;
          border-color: #CCCCCC;
          border-style: solid;
          border-width: 1px 1px 0;
          font-size: 13px;
          line-height: 18px;
          margin: 0 0 22px;
          text-align: left;
      }
      caption {
          text-align: left;
      }
      tr {
          border-bottom: 1px solid #CCCCCC;
      }
      th, td {
          padding: 0.7em 1.25em;
      }
      hr {
          background-color: #CCCCCC;
          border: 0 none;
          color: #CCCCCC;
          height: 1px;
          margin-bottom: 22px;
      }
      a:link {
          color: #004B91;
      }
      a:visited {
          color: #743399;
      }
      a:active, a:hover {
          color: #00A100;
      }
      #header {
          z-index: 2;
          background-color: #333333;
      }
      #branding {
          padding: 82px 0 63px;
      }
      #blog-title {
          font-family: helvetica,sans-serif;
          font-size: 34px;
          font-weight: normal;
          line-height: 40px;
      }
      #blog-title a {
          color: #fff;
          text-decoration: none;
      }
      #blog-title a:active, #blog-title a:hover {
          color: #00A100;
      }
      #blog-description {
          font-family: helvetica,sans-serif;
          color: #00A100;
          font-size: 18px;
          font-style: normal;
      }
      .skip-link {
          display: none;
      }
      #access {
          border-bottom: 1px solid #CCCCCC;
          font-size: 13px;
          height: 32px;
          overflow: visible;
          z-index: 100;
      }
      .sf-menu, .sf-menu * {
          list-style: none outside none;
          margin: 0;
          padding: 0;
      }
      .sf-menu {
          line-height: 1;
      }
      .sf-menu ul {
          position: absolute;
          top: -999em;
          width: 10em;
      }
      .sf-menu ul li {
          width: 100%;
      }
      .sf-menu li:hover {
          visibility: inherit;
      }
      .sf-menu li {
          float: left;
          position: relative;
      }
      .sf-menu a {
          display: block;
          position: relative;
      }
      .sf-menu li:hover ul, .sf-menu li.sfHover ul {
          left: 0;
          top: 2.5em;
          z-index: 99;
      }
      ul.sf-menu li:hover li ul, ul.sf-menu li.sfHover li ul {
          top: -999em;
      }
      ul.sf-menu li li:hover ul, ul.sf-menu li li.sfHover ul {
          left: 10em;
          top: 0;
      }
      ul.sf-menu li li:hover li ul, ul.sf-menu li li.sfHover li ul {
          top: -999em;
      }
      ul.sf-menu li li li:hover ul, ul.sf-menu li li li.sfHover ul {
          left: 10em;
          top: 0;
      }
      .sf-menu {
          border-right: 1px solid #CCCCCC;
          float: left;
      }
      .ie6 .sf-menu {
          margin-bottom: -1px;
      }
      .sf-menu a {
          border-bottom: 1px solid #CCCCCC;
          border-left: 1px solid #CCCCCC;
          border-top: 1px solid #CCCCCC;
          padding: 9px 13px;
          text-decoration: none;
      }
      .windows .sf-menu a {
          font-size: 12px;
          padding: 9px 13px 10px;
      }
      .sf-menu .current_page_item a, .sf-menu .current_page_ancestor a, .sf-menu .current_page_parent a {
          border-bottom-color: #FFFFFF;
      }
      .sf-menu a, .sf-menu a:visited {
          color: #666666;
      }
      .sf-menu li {
          background: none repeat scroll 0 0 #FFFFFF;
      }
      .sf-menu li li {
          background: none repeat scroll 0 0 #FFFFFF;
      }
      .sf-menu li li li {
          background: none repeat scroll 0 0 #9AAEDB;
      }
      .sf-menu li:hover, .sf-menu li.sfHover, .sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active {
          background: none repeat scroll 0 0 #FAFAFA;
          border-bottom-color: #CCCCCC;
          outline: 0 none;
      }
      .sf-menu ul {
          border-bottom: 1px solid #CCCCCC;
          border-right: 1px solid #CCCCCC;
      }
      .sf-menu li:hover ul, .sf-menu li.sfHover ul {
          top: 32px;
      }
      .sf-menu ul ul {
          margin-top: 0;
      }
      .sf-menu ul a {
          background: none repeat scroll 0 0 #FAFAFA;
          border-bottom: medium none;
      }
      .sf-menu ul a:hover {
          color: #00A100;
      }
      #main {
          clear: both;
          padding: 66px 0 22px;
      }
      .page-title {
          font-size: 13px;
          line-height: 18px;
          padding: 0 0 44px;
      }
      .attachment .page-title {
          font-style: italic;
      }
      .page-title a {
          color: #666666;
          text-decoration: none;
      }
      .page-title a:active, .page-title a:hover {
          color: #00A100;
      }
      .page-title span {
          font-style: italic;
      }
      .page-title .meta-nav {
          font-style: normal;
      }
      .hentry {
          padding: 0 0 22px;
      }
      .single .hentry {
          padding: 0;
      }
      .home #content .sticky {
          border: 1px solid #CCCCCC;
          margin: 0 0 66px;
          padding: 22px 20px 0;
      }
      .entry-title {
          font-family: helvetica;
          font-size: 26px;
          font-weight: normal;
          line-height: 26px;
          padding: 0 0 7px;
      }
      .entry-title a {
          color: #000;
          text-decoration: none;
      }
      .entry-title a:active, .entry-title a:hover {
          color: #00A100;
      }
      .entry-meta {
          color: #666666;
          font-size: 13px;
          font-style: italic;
          line-height: 18px;
      }
      .entry-meta .author {
      }
      .entry-meta .n {
          font-size: 11px;
          font-style: normal;
          letter-spacing: 0.05em;
          text-transform: uppercase;
      }
      .entry-meta a {
          color: #666666;
          text-decoration: none;
      }
      .entry-meta a:active, .entry-meta a:hover {
          color: #00A100;
      }
      .entry-meta abbr {
          border: medium none;
          cursor: text;
          font-size: 11px;
          font-style: normal;
          letter-spacing: 0.05em;
          text-transform: uppercase;
      }
      .entry-content {
          padding: 22px 0 0;
      }
      .entry-content h1, .entry-content h2 {
          font-family: Arial,sans-serif;
          font-size: 19px;
          font-weight: bold;
          padding: 28px 0 14px;
      }
      .entry-content h3 {
          font-size: 17px;
          font-style: italic;
          padding: 28px 0 14px;
      }
      .entry-content h4 {
          font-family: Arial,sans-serif;
          font-size: 11px;
          font-weight: bold;
          letter-spacing: 0.05em;
          text-transform: uppercase;
      }
      .entry-content table {
          margin-left: 1px;
      }
      .entry-content embed {
          margin: 0 0 22px;
      }
      .entry-utility {
          clear: both;
          color: #666666;
          font-size: 13px;
          line-height: 18px;
          margin: 0 0 44px;
      }
      .entry-utility a {
          color: #666666;
          font-style: italic;
          text-decoration: none;
      }
      .entry-utility a:active, .entry-utility a:hover {
          color: #00A100;
      }
      .edit-link {
          clear: both;
          display: block;
      }
      .page-link {
          font-size: 13px;
          font-weight: bold;
          line-height: 18px;
          margin: 0 0 22px;
          padding: 22px 0 0;
          word-spacing: 0.5em;
      }
      .page-link a {
          border: 1px solid #CCCCCC;
          color: #666666;
          font-weight: normal;
          padding: 0.5em 0.75em;
          text-decoration: none;
      }
      .page-link a:active, .page-link a:hover {
          color: #00A100;
      }
      ul#links-page, ul#archives-page {
          list-style: none outside none;
          margin-left: 0;
          overflow: hidden;
      }
      li.content-column {
          float: left;
          margin-right: 20px;
          width: 45%;
      }
      .gallery {
          clear: both;
          display: block;
          margin: 0 auto;
          overflow: hidden;
          padding: 0 0 22px;
      }
      .gallery .gallery-row {
          clear: both;
          display: block;
          margin: 0;
          overflow: hidden;
      }
      .gallery .gallery-item {
          float: left;
          list-style: none outside none;
          margin: 0;
          overflow: hidden;
          padding: 0;
          text-align: center;
      }
      .gallery .gallery-item img, .gallery .gallery-item img.thumbnail {
          border: medium none !important;
          height: auto;
          margin: 0 auto;
          max-width: 89%;
          padding: 1%;
      }
      .gallery-caption {
          margin-left: 0;
      }
      .wp-caption-text, .gallery-caption {
          color: #666666;
          font-size: 13px;
          line-height: 18px;
      }
      #author-info {
          margin: 0 0 44px;
          overflow: hidden;
      }
      #author-info .avatar {
          float: left;
          margin: 0.3em 1em 0 0;
      }
      .attachment-jpeg #container, .attachment-png #container {
          width: 100%;
      }
      .attachment-jpeg #content, .attachment-png #content {
          width: 930px;
      }
      .attachment-jpeg #comments, .attachment-png #comments {
          overflow: hidden;
          width: 540px;
      }
      .attachment-jpeg .main-aside, .attachment-png .main-aside {
          display: none;
      }
      .navigation {
          color: #666666;
          font-size: 13px;
          line-height: 18px;
          margin: 0 0 22px;
          overflow: hidden;
      }
      .navigation a {
          color: #666666;
          font-style: italic;
          text-decoration: none;
      }
      .navigation a:active, .navigation a:hover {
          color: #00A100;
      }
      .navigation .meta-nav {
          font-style: normal;
      }
      .nav-previous {
          float: left;
          width: 50%;
      }
      .nav-next {
          float: right;
          text-align: right;
          width: 50%;
      }
      #nav-above, #nav-below {
          width: 100%;
      }
      #nav-above {
          display: none;
      }
      .paged #nav-above {
          display: block;
          padding: 0 0 44px;
      }
      #comments {
          clear: both;
          padding: 22px 0 0;
      }
      #comments, #comments input, #comments textarea {
          font-size: 13px;
          line-height: 18px;
      }
      #comments code {
          font-size: 12px;
          line-height: 18px;
      }
      #comments h3 {
          font-family: Arial,sans-serif;
          font-size: 15px;
          font-weight: bold;
          line-height: 22px;
          padding: 0 0 18px;
      }
      #comments-list {
          padding: 0 0 18px;
      }
      #comments-list ol, #comments-list ul {
          list-style: none outside none;
          margin: 0;
      }
      #comments-list ol {
          -moz-border-bottom-colors: none;
          -moz-border-image: none;
          -moz-border-left-colors: none;
          -moz-border-right-colors: none;
          -moz-border-top-colors: none;
          border-color: #CCCCCC #CCCCCC -moz-use-text-color;
          border-style: solid solid none;
          border-width: 1px 1px medium;
          margin: 0 0 18px;
      }
      #comments-list li {
          background: none repeat scroll 0 0 #FAFAFA;
          border-bottom: 1px solid #CCCCCC;
          padding: 18px 1.5em 0;
          position: relative;
      }
      #comments-list li.alt {
          background: none repeat scroll 0 0 #FFFFFF;
      }
      #comments-list li.bypostauthor {
          background: none repeat scroll 0 0 #FFFFCC;
      }
      #comments-list ul li {
          border: 1px solid #CCCCCC;
          margin: 0 0 18px;
      }
      #comments-list li .avatar {
          height: 36px;
          left: 1.5em;
          position: absolute;
          top: 22px;
          width: 36px;
      }
      #comments-list .comment-author {
          font-weight: bold;
          padding: 9px 0 0 46px;
      }
      #comments-list .comment-meta {
          color: #666666;
          font-size: 11px;
          padding: 0 0 9px 46px;
      }
      #comments-list .comment-meta a {
          color: #666666;
          font-style: italic;
          text-decoration: none;
      }
      #comments-list .comment-meta a:active, #comments-list .comment-meta a:hover {
          color: #00A100;
      }
      .comment-reply-link {
          font-size: 11px;
          padding: 0 0 18px;
          text-align: right;
      }
      .comment-reply-link a {
          color: #666666;
          font-style: italic;
          text-decoration: none;
      }
      .comment-reply-link a:active, .comment-reply-link a:hover {
          color: #00A100;
      }
      .comment-navigation {
          font-weight: bold;
          margin-right: 0.5em;
          padding: 0 0 18px;
      }
      .comment-navigation a {
          border: 1px solid #CCCCCC;
          color: #666666;
          font-weight: normal;
          padding: 0.5em 0.75em;
          text-decoration: none;
      }
      .comment-navigation a:active, .comment-navigation a:hover {
          color: #00A100;
      }
      .comment-navigation a, .comment-navigation span {
          margin-right: 0.5em;
      }
      #trackbacks-list .comment-content {
          left: -10000px;
          position: absolute;
      }
      #respond {
          background: none repeat scroll 0 0 #FFFFFF;
          margin-bottom: 22px;
          overflow: hidden;
          padding: 18px 0 0;
          position: relative;
      }
      #comments-list #respond {
          border-bottom: 1px solid #CCCCCC;
          margin: 0 0 18px;
          padding: 18px 1.5em;
      }
      #comments-list ul #respond {
          border: 1px solid #CCCCCC;
          margin: 0;
      }
      #cancel-comment-reply {
          font-size: 11px;
          position: absolute;
          right: 1.5em;
          top: 18px;
      }
      #cancel-comment-reply a {
          color: #666666;
      }
      #respond .required {
          color: #00A100;
          font-weight: bold;
      }
      .form-section label {
          font-size: 11px;
      }
      .form-section input {
          margin: 0 0 18px;
          width: 98%;
      }
      .form-section textarea {
          width: 99%;
      }
      #form-allowed-tags p {
          color: #666666;
          font-size: 11px;
          margin: 0;
      }
      #form-allowed-tags span {
          font-style: italic;
      }
      #form-allowed-tags code {
          font-size: 11px;
          line-height: normal;
      }
      .form-submit {
          padding: 18px 0 0;
          text-align: right;
      }
      .subscribe-to-comments {
          color: #666666;
          float: left;
          font-size: 11px;
          margin: 0;
          padding: 18px 0 0;
      }
      .solo-subscribe-to-comments {
          color: #666666;
          font-size: 11px;
          padding: 18px 0 0;
      }
      .comment_license {
          clear: both;
          color: #666666;
          font-size: 11px;
          margin: 0;
          padding: 18px 0 0;
      }
      .aside, .aside input {
          font-size: 13px;
          line-height: 18px;
          margin-bottom: 6px;
      }
      .aside p, .aside ul, .aside ol, .aside dd, .aside pre {
          margin-bottom: 18px;
      }
      .aside pre, .aside code {
          font-size: 12px;
          line-height: 18px;
      }
      .aside .current_page_item a {
          color: #00A100;
      }
      .aside .current_page_item .page_item a {
          color: #666666;
      }
      .aside .current_page_item .page_item a:hover, .aside .current_page_item .page_item a:active {
          color: #00A100;
      }
      .aside {
          color: #666666;
      }
      .aside a {
          color: #666666;
      }
      .aside a:active, .aside a:hover {
          color: #00A100;
      }
      .aside h3 {
          font-size: 15px;
          font-style: normal;
          line-height: 22px;
      }
      .aside h3 a {
          text-decoration: none;
      }
      .aside caption {
          font-family: Arial,sans-serif;
          font-size: 11px;
          font-weight: bold;
          letter-spacing: 0.05em;
          text-transform: uppercase;
      }
      .aside ul {
          list-style: none outside none;
          margin-left: 0;
      }
      .aside ul ul {
          list-style: disc outside none;
          margin: 0 0 22px 20px;
      }
      .aside ul ul li {
          padding: 1px 0;
      }
      .aside ul ul ul {
          margin-bottom: 0;
      }
      .aside form, .aside table {
          margin-bottom: 22px;
      }
      .aside table {
          border: medium none;
      }
      .aside thead {
          border: 1px solid #B7CCB4;
      }
      .aside tbody {
          border: 1px solid #B7CCB4;
      }
      .aside th, .aside td {
          border-right: 1px solid #B7CCB4;
          padding: 0.25em 0.8em;
      }
      .aside tfoot tr {
          border: medium none;
      }
      .aside tfoot td {
          border-color: transparent;
      }
      .widget_tag_cloud {
          margin: 0 0 22px;
      }
      .aside #searchsubmit {
          display: none;
      }
      .main-aside ul {
          padding: 0 20px;
      }
      .main-aside h3 {
      }
      .main-aside ul ul {
          padding: 0;
      }
      #primary {
          background-color:#F5F7FA;
          border: 1px solid #B7CCB4;
          margin-bottom: 22px;
          padding: 18px 0 0;
      }
      #content .aside {
          border: 1px solid #B7CCB4;
          margin: 0 0 22px;
          padding: 18px 0 0;
      }
      #content .aside ul {
          padding: 0 20px;
      }
      #content .aside h3 {
          font-family: Georgia,serif;
          font-size: 17px;
          font-style: italic;
          font-weight: normal;
          padding: 0 0 7px;
          text-transform: none;
      }
      #content .aside ul ul {
          padding: 0;
      }
      #subsidiary {
          padding: 33px 0 0;
      }
      #footer {
          border-top: 1px solid #CCCCCC;
          margin-top: 22px;
      }
      #siteinfo {
          color: #666666;
          font-size: 11px;
          line-height: 18px;
          padding: 22px 0 44px;
      }
      #siteinfo a {
          color: #666666;
      }
      #siteinfo a:active, #siteinfo a:hover {
          color: #00A100;
      }
      .wp-pagenavi {
          margin: 0 0 0 -0.5em;
          padding: 0.5em 0;
      }
      .wp-pagenavi a, .wp-pagenavi a:link, .wp-pagenavi span {
          border: 1px solid #CCCCCC !important;
          color: #666666 !important;
          font-style: normal;
          margin: 0 0.375em !important;
          padding: 0.5em 0.25em !important;
      }
      .wp-pagenavi a:visited {
          border: 1px solid #CCCCCC !important;
          color: #666666 !important;
      }
      .wp-pagenavi a:hover {
          border: 1px solid #CCCCCC !important;
          color: #00A100 !important;
      }
      .wp-pagenavi a:active {
          border: 1px solid #CCCCCC !important;
          color: #00A100 !important;
      }
      .wp-pagenavi span.pages {
          border: medium none !important;
          color: #666666 !important;
          margin: 0 !important;
          padding: 0 !important;
      }
      .wp-pagenavi span.current {
          border: medium none !important;
          color: #666666 !important;
          font-weight: normal !important;
          margin: 0 !important;
          padding: 0 !important;
      }
      .wp-pagenavi span.extend {
          background-color: #FFFFFF;
          border: 1px solid #000000;
          color: #000000;
          margin: 2px;
          padding: 2px 4px;
      }


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


  8. Then simply change color/css as you need to change
  9. You can use colorpicker.com for picking the color
If any doubt, please comment/ email me.

1 comment: