I love the thematic theme for my site: tjdjmusic.com. However, I'm stuck on two things. I'd greatly appreciate any help!
1) Replacing the text in my header with my logo (Adding an image)
2) Customizing the page title (in the internet browser) Example: instead of just saying "what" "who" etc.
Thanks!
BAC
Member
Hi tjdj,
1. Change the logo.
Upload your logo to your child theme folder via FTP
Go to appearance > editor and make sure your child theme is selected.
Edit stylesheet (style.css) and add the following (changing the url, width and height to match your logo)
#blog-title a {
background:url(http://www.path-to-logo.jpeg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 472px;
height: 80px;
text-align: left;
}2. You mean page heading, page title usually refers to meta title (what search engines show in results and what shows in the browser title bar - important for Search Engine Optimisation.
To change the Heading then edit the page and change the name of the page to the heading you want, and again use the All in One SEO plugin settings at the bottom of edit page to change the menu label so your navigation will say for example what, who etc but the page heading will show the desired "title".
That should do it.
hope this helps.
BAC
Thank you. That looks like it will be fairly straightforward to do. However, could you give me more info on how to create a child theme, specifically what coding to put into the child theme. I found this site but I'm just now sure about the coding.
http://op111.net/53
Thanks!
BAC
Member
Thanks. Can you help me start the child theme? Specifically, how do I create the file and what coding should I use?
BAC
Member
Within the thematic theme folder in wp-content there will be a folder called something like thematic-sample-child-theme. Move this entire folder up a level into the main theme folder. (if you change the name of this folder you will need to change the reference name in the stylesheet)
Any alterations to the parent thematic stylesheet you have already made should be copied to the child theme stylesheet and the parent thematic CSS file should be reset to the default.
This means you can upgrade wordpress/thematic in the future and retain alterations.
There are some excellent tutorials here on the thematic site, and most of the questions you will have from now on should have already been answered in previous forum support requests (requires some digging sometimes but usually it is there)
enjoy.
Ok, it's starting to come together a little bit. So, to create a Child Theme I went to Appearance > Editor. I moved the Child Theme to the top of the style.css file. What am I doing wrong in the code below?
/*
Theme Name: A Thematic Child Theme
Theme URI:
Description: Use this theme to start your Thematic Child Theme development.
Author: Ian Stewart
Author URI: http://themeshaper.com/
Template: thematic
Version: 1.0
Tags: Thematic
.
Thematic is © Ian Stewart http://themeshaper.com/
.
Default styles for Images
I've duplicated these styles here from images.css in
order to get Thematic through the auto-checker at the
official WordPress Themes directory.
When the directory can hunt though css files linked
through @import the styles below will no longer be
neccesary and will be removed.
Cheers. --Ian Stewart
-------------------------------------------------------------- */
#blog-title a {
background:url(http://www.tjdjmusic.com/images/2010/03/TJDJ_Final.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 472px;
height: 80px;
text-align: left;
}
.entry-content img {
margin: 0 0 18px 0;
max-width:100%;
}
.alignleft,
img.alignleft {
float: left;
margin-right:20px;
}
.alignright,
img.alignright {
display: block;
float: right;
margin-left:20px;
}
.aligncenter,
img.aligncenter {
margin-left:auto;
margin-right:auto;
display: block;
clear: both;
}
.gallery img {
margin:0;
}
.wp-smiley { /* Prevent the smileys from breaking line-height */
max-height:12px;
margin:0 !important;
}
/*
THEME NAME: Thematic
THEME URI: http://themeshaper.com/thematic-for-wordpress/
DESCRIPTION: A highly extensible, search-engine optimized WordPress Theme Framework featuring 13 widget-ready areas, grid-based layout samples, styling for popular plugins and more.
VERSION: 0.7
AUTHOR: Ian Stewart
AUTHOR URI: http://themeshaper.com/
TAGS:three columns,two columns,fixed width,simple,seo,microformats,widgets,framework,options page,hooks,filters,valid XHTML,valid CSS
.
Thematic is copyright Ian Stewart http://themeshaper.com/
This work, like WordPress, is released under GNU General Public License, version 2 (GPL).
http://www.gnu.org/licenses/old-licenses/gpl-2.0.html
.
*/
/* Reset browser defaults */
@import url('library/styles/reset.css');
/* Apply basic typography styles */
@import url('library/styles/typography.css');
/* Apply a basic layout */
@import url('library/layouts/2c-r-fixed.css');
/* Apply basic image styles */
@import url('library/styles/images.css');
/* Apply default theme styles and colors */
@import url('library/styles/default.css');
/* Prepare theme for plugins */
@import url('library/styles/plugins.css');
/* --------------------------------------------------------------My goal is to put my logo (the jpg file) in the header and then be able to customize the color of the header if needed. What do I need to adjust in the code below to make it take effect.
Thank you! I love your website!!!
BAC
Member
Sorry my bad, I should have made it clear that you need to activate the child theme in Appearance > Themes. (If you don't see the Child Theme then you have not copied the child-theme-example-folder into the Wordpress Theme folder via FTP.)
Nothing worked as you pasted the CSS code at the *top* of the CSS file, which is over written by the default style that follows... it may have worked if you put the code at the bottom of the style sheet.
I would cut the code you added, activate the child theme then add the following code to the child style sheet. (in the editor check the child theme is actually selected in the *select theme to update* drop-down at the top of the page)
Don't forget to add this code at the bottom of the child theme stylesheet :)
#header {
background:#181E24; /* background colour of the main header */
}
#blog-title {
font-size:36px;
line-height:54px;
font-weight:bold;
letter-spacing:-1px;
padding:99px 0 0 0;
border-bottom:1px solid #242A30;
}
#blog-title a {
background:url(http://www.tjdjmusic.com/images/2010/03/TJDJ_Final.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 472px; /* change w h to match logo dimensions */
height: 80px;
text-align: left;
color:#fff;
text-decoration:none;
}
#blog-description {
font-style:italic;
padding:8px 0 63px 0;
color:#fff;
}This will replace the page heading text with an image which is what you want I believe. Your image looks quite large tho!
You still need to change the height and width of the blog-title a { selector to match your image once you have resized it.
That should do it.
BAC
You must log in to post.