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
- First, Download thematic from here
- After you unzipped the Thematic zip file
- Find the "thematicsamplechildtheme" sub folder.
- Rename the folder as you like. eg. bluechild
- Open the style.css file, and edit these area with your details
/* 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/ . */
- Paste the code below
/* 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');- Paste the default css code below
- 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'); - Then simply change color/css as you need to change
- You can use colorpicker.com for picking the color
Its working great. superb code and awesome logic. http://www.wordpresstemplates.net/
ReplyDelete