Hi.
I wrote a small post on how to add a logo upload page to your Thematic Child Theme. It's simple as opening your functions.php file and copy-paste a piece of code.
Once this is in place you won't have to modify the css anymore to add a header logo or banner.
http://www.cozmoslabs.com/2009/05/28/add-a-header-image-to-thematic-the-easy-way/
Let me know if this worked for you.
Hi I tried your code above, i got the child theme options box but i cant seem to load any images - do i need to create a directory for them? how do i check that i have writer access for loading images?
Sorry for the very green questions i am very new at this. it seemed so easy yet now i cant figure out how to get the mages to load properly
eyecurious
Member
Hi, I have a question regarding adding a header image using a Thematic child theme. I should say I am a total novice to CSS and have no knowledge of php. I have successfully added an image using the child theme I created (thanks Ian!). However I am wondering if there is a way of making the Thematic menu items (e.g. About) appear ABOVE the image rather than below it, which is the default.
For an example of what I am looking for have a look at http://www.featureshoot.com/ I am not sure if this site is built with Thematic, but it seems to follow a very similar structure.
Thanks!
Hi,
with the following code in your child theme's functions.php you can move your menu to the top:
// remove the access menu from its current position
function remove_access() {
remove_action('thematic_header','thematic_access',9);
}
add_action('init', 'remove_access');
// .. and put it back into action at the top
add_action('thematic_header','thematic_access',0);Cheers,
Chris
I used this method to add a logo to my theme:
function unhook_thematic_functions() {
remove_action('thematic_header','thematic_brandingopen',1);
}
add_action('init','unhook_thematic_functions');
function childtheme_logo() { ?>
<div id="branding">
<a href="url" title="<?php bloginfo('name') ?>">
<img id="logo" src="http://s3.amazonaws.com/logo.png" alt="" />
</a>
<?php }
add_action('thematic_header','childtheme_logo',1);Hi,
First of all thanks a million of this awesome theme, I am new to CSS and PHP, i want to add a RSS icon in my header banner and provide a link the icon to feedburner. I have searched all the way but unsuccessful, i created a banner in photoshop with images of rss icon and twitter linking to them respectively using slicing option. But i dont know to how to upload and make it workable. Kindly throw some light on this.
This is my site http://astronlogia.com
rite now i have used a diff banner with the help of css you guys provided
eyecurious
Member
Thanks Chris, I used your code but then was having difficulty getting the banner to align with the menu. I decided to leave the logo banner above the menu in the end.
Thanks johnturner - you've solved my problem perfectly with that code. I'm pretty good with xhtml & css, but can't get my head round this php business.
Is there any chance you can explain how your solution works a bit more closely as it inserts the anchored image into the branding div *after* the title and slogan. I'm hoping I won't need to, but what would I need to change to make it put the image before the title and slogan in the code (I know I could simply reposition with CSS, but I'm interested in the generated code).
I'm beginning to think this theme is just too advanced for me at this time. I've spent all day just trying to change the title to a logo when other themes I did it in 20 seconds. I've tried many of the suggestions above and I just can't get it to work. I'm still going to keep learning. I like the theme and want to learn to do all of this - but I'm starting to think I need to go buy a premium theme that has some stuff a bit more automated. Maybe I'm just tired and burnt. It's past midnight and I've been going at this all day.
Have you found that the learning curve is steep to start out? Maybe I'll be able to attack it again tomorrow.
OK,
Sorry for the drama queen post last night. I was so tired and frazzled. This morning, I went back again and looked at sariodata's solution for the child theme option - and tried it a different way today - added it to the very top of the function.php file and it works!
Except: It will only accept the logo.gif that has a white background, it won't accept my gif that has either a transparent gif or a colored gif. As I've figured out how to change my header background. (woo hoo!) this won't work as is. Any suggestions?
OK, tried it again and now it's working.
No idea why it wasn't working before. I tried it several times before and I’m doing nothing differently. I always save for web & devices via either photoshop or Illustrator. Been doing this a very long time.
Thanks so much for your help. You guys, Rock.
This is really weird. It just does not accept some of my files. Created same as the other that is accepted. Save to Web and Devices via Illustrator, transparency selected. I also like to open it in PS and add a little bit of space around it - but I also did that with the one that is accepted. Don't know what on earth is going on. Any ideas?
likethegoddess
Member
I tried adding...
#blog-title a {
background:url(images/image.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: XXpx;
height: XXpx;
}
I'm still getting the blog title (no images) with the <h1> format removed.
Any ideas? www.likethegoddess.com/blog
Sorry .. but I don't understand what you're looking for.
The non-existence of the blog description is not caused by any CSS code. Would it be caused by the CSS then I could still see it in the source view .. and .. there's nothing.
Chris
likethegoddess
Member
The omission of the description is intentional.
I'm looking for the logo image to replace the text of the blog title.
PS: Oh, never mind. I figured it out. Thanks.
dreamlex
Member
I just got thematic framework a few days ago and tried to understand every files but I am not expert at php thing.
I wanted to know - how to place the global navigation menu at top and the branding image would be below the navigation menu? Does it do something with css? I tried to find php files to change the position of div but couldn't find one.
I am wondering whether it is good idea to modify the theme in parent framework or create child theme.
Kindly shed light on these questions. Thank you in advance for the wonderful framework and the help.
Hi,
that's possible .. and .. please use a child theme!
For the menu thing: Moving the menu above the header image « ThemeShaper Forums
Chris
dreamlex
Member
Hi, thank you, chris for replying to my post. I do use child theme but I still have to edit php files, for example to change positioning or add html code in the functions (in library folder/extension). Or the library could be copied to child theme and then modify the codes there? I am sorry to ask many questions. Please bear with me :)
Yesterday, I read up on action and hooks and I changed the positioning (1,3,5,7,9) to have the global nav move to the top and the branding image move under the global nav.
The only problem is that I struggle with branding area on left and picture area on right. I checked the forum and found the answer by using background image inside blogtitle a {}. Branding area would have logo and picture area would have image advertising the products. I use child theme option to have logo placed but it couldn't be centered vertically - how do that?
As I mention above, when i tried to use styles for floating branding area on left and picture on right, they moved to the left - they were supposed to be in the same side lines as the content side. So how to resolve this?
Also, I wanted to center the global navigation and give more space between menu items - I check sf-menu but cannot figure that part.
I would appreciate it if you could help. Thank you in advance.
dreamlex
Member
One more thing - I forgot to mention - the logo on left area and image on right area to advertise product would be on the homepage while on other pages, the logo would be down on left side in content and the header will only have the different images.
So if I add the function for displaying the logo and advertising image on top in header area, it will be displayed the same on all pages. how do i limit it to the homepage only?
thank you again.
dreamlex
Member
Ok I got some things worked, but I still have a problem with header parts. I searched for solutions in forums for the two areas: branding and advertising to be on the same level in the header together and found:
#branding {
float: left;
width: 620px;
}
#header-contact {
float: right;
width: 320px;
padding: 88px 0 44px;
}
/* This will clear the floats and keeps the access bottom line
from jumping into the air */
#access {
clear: both;
}
But it does not work well so I modified with margin-left to move the branding to be on the same vertical side as the start of the navigation menu - still I think there could be a better way for this - I will appreciate it if I could get help on this part.
modified css:
.home #branding {
float: left;
width: 300px;
margin:0 0 0 250px;
}
.home #header-ad {
float: right;
width: 600px;
padding:0;
margin:0;
}
then function for advertising part:
function additional_header_content() {?>
<div id="header-ad"><img src="images/xxx.jpg" width="600" height="300"/></div>
<?php}
add_action('thematic_header', 'additional_header_content',8);
After searching in forum for answers on function part, I copy and modify the div inside function, but it does not work - image doesn't appear next to branding :(
Please kindly help to shed light on these parts and also if possible, could you please help with these parts?
Thank you in advance for your help
Sorry for asking, but I´ve searched the answer and couldn´t find it.
Without child theme, how can I change my or apply a new jpeg for header image? I would really like to know in wich .css or .php file I should apply the textcode in, and if I have to erase something or just add it to the file.
I'm in a little bit of trouble, so if anyone can help me I would be forever greatful!
Thank you!
Solved. Thanks anyway. Just get so frustrated when nothing works. The brain included...
Hi, first sorry about my English is very poor, i am from Brazil, we speak portuguese here.
I Working as a volunteer in a church website using Thematic Whitout Child theme.
I need apply a header image (www.saogabriel.org)
I'm in a little bit of trouble, so if anyone can help me I would be forever greatful!
Hey everyone,
Curious about an aspect of this. I made the blog title into an image on style.css:
#blog-title a {
background:url(http://www.aerismorpheme.com/wp-content/uploads/2009/12/banner.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 940px;
height: 275px;
position:relative;
z-index:10;
}
And it only shows the image on Safari.
And my header.php looks like this:
</div><!-- #header-->
<div id="header">
<?php thematic_header() ?>
</div><!-- #header-->
<?php thematic_belowheader(); ?>
<div id="main">
Do I have to alter anything in the php file? Again, it works fine in Safari. Should the image be sourced from somewhere else? Any help would be appreciated. Oh, the site is www.aerismorpheme.com.
Thanks everyone!
Hi folks,
Is there is a way to add an image to the header so that the menu overlaps it? I first tried the below code but it created a few layout problems (header and navigation bar was flush left instead of aligning with main content, extra gap appeared above content in #main).
#header {
background:url(../thematic/images/header.jpg) no-repeat top center;
display:block;
width: 480px;
height: 375px;
}
Is there another way I can do this so my navigation bar still overlaps the header image but no other layout issues are created?
My site is www.abigailtaylor.ca/design
Any help would be MUCH appreciated!!
Sounds like one or two other people here have had the same problem I've had. I've set up my child theme where it should be, set Wordpress to use it. I've specified the code in my child style.css. The header text is offscreen like it should be and the header image active area is responsive (my cursor changed on rollover), but the image itself is not visible. Checked it in Firefox and Google Chrome.
Why is my header image not showing up?
Here's my code:
blockquote
/*
Theme Name: dreamscape
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/
.
*/
/* 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');
#blog-title a {
background-image:url(images/logo.png) no-repeat top center;
display:block;
text-indent:-9000px;
width: 255px;
height: 111px;
}
/blockquote
daveweinberg
Member
hello-
same issue as the post above and appears that others have been having this problem as well. I have created an 'images' folder in my 'boothbay' theme folder, copy/pasted the snipped as specified in ian's first post into style.css in the child theme. nothing happens. here is the code:
/*
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://theweinberg.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');
#blog-title a {
background:url(images/bbc_hdrBG.jpg) no-repeat top center;
display:block;
text-indent:-9000px;
width: 765px;
height: 168px;
}
please advise.
many thanks!
daveweinberg
Member
Hi Dave-
this is Dave. Did you clear your cache and reload?
-Dave
daveweinberg
Member
Hi Dave-
doh!
-Dave
Can someone help me with the coding needed with Thematic to load my logo into my header on my site (www.tjdjmusic.com)? Also, how do I change the size of the logo and any colors after I do this? Thanks!
This topic has been closed to new replies.
