ThemeShaper Forums Topic: Adding a Header Image

ThemeShaper Forums Topic: Adding a Header Image http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Sun, 19 May 2013 21:27:31 +0000 accessprogram on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-26017 Tue, 20 Mar 2012 01:42:17 +0000 accessprogram 26017@http://themeshaper.com/forums/ You all doing a great job thanks for sharing such a nice and informative post. Hdsded on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-25950 Fri, 16 Mar 2012 06:56:43 +0000 Hdsded 25950@http://themeshaper.com/forums/ Upload your header image (which should be 960px wide) to your media library and then post the URL of that image here and we can help you with the code. <a href="http://www.61designstreet.com/" rel="nofollow">http://www.61designstreet.com/</a> Logan on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-24266 Tue, 13 Dec 2011 06:58:03 +0000 Logan 24266@http://themeshaper.com/forums/ Depends on how the themes HTML was built. If you add it, it may mess other things up. If you aren't good with HTML and CSS, I suggest you not worry about it. If you want it hat bad, find the author of theme and get his/her assistance. If you don't know the author, look in themes HTML for that. It's usually at the top or at the bottom. jennifery on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-20645 Mon, 18 Apr 2011 02:25:50 +0000 jennifery 20645@http://themeshaper.com/forums/ I'm a watch addict who likes to share any information and design toward Tag Heuer Replica Watches, if you are looking for a great watch then consider going to the best online store.http://www.repliwatch.com jennifery on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-20644 Mon, 18 Apr 2011 02:24:43 +0000 jennifery 20644@http://themeshaper.com/forums/ hey sooraw on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-19480 Thu, 03 Mar 2011 08:51:03 +0000 sooraw 19480@http://themeshaper.com/forums/ Hi I am using the code that Danieliser posted a few post earlier to display the header I have a wrapper also. The wrapper is 1000 px wide and my header is 1000px wide. But I cant get the header to line up with the wrapper on the left side, there seems to be some kind of padding that I have to change but I cant find it I posted an image of what my site looks like now. Anyone know how I can move the header to the left? <a href="http://imgur.com/GC64S" rel="nofollow">http://imgur.com/GC64S</a> This is the code for the wrapper im using <pre><code>#wrapper { margin: 0 auto; width: 1000px; } #wrapper { background: #f1e9e9; margin-top: 0px; border:0px solid #ccc; padding: 0 20px; }</code></pre> vivimine on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-19366 Fri, 25 Feb 2011 07:23:42 +0000 vivimine 19366@http://themeshaper.com/forums/ Awesome! Thanks for sharing! ingular on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-19352 Thu, 24 Feb 2011 15:42:28 +0000 ingular 19352@http://themeshaper.com/forums/ Hi, I have a small image next to my blog-title, and I was wondering if there was any way to have the image link be different to the link of the text? So basically is it possible to have two links in the blog-title instead of one? thanks a lot for thematic! and all the forum posts, really helpful Dansolo on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-19061 Wed, 09 Feb 2011 22:43:40 +0000 Dansolo 19061@http://themeshaper.com/forums/ Hi guys, I modify the code manually to insert the logo <code> <div id="logo"> <a>/" rel="home"><img src="<?php echo get_bloginfo('stylesheet_directory')?>/images/logo.jpg" title="<?php bloginfo('name') ?>"></a></div> <?php /*add_wicked_top_aside();*/ thematic_access(); ?></div> <div id="branding"> ... </code> but what is the code to get the skin folder path? I mean: get_bloginfo('stylesheet_directory')?>/"RED"/images/logo.jpg thx, Daniel PeterStephens on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-18885 Wed, 02 Feb 2011 03:26:44 +0000 PeterStephens 18885@http://themeshaper.com/forums/ I just wanted to thank you guys for this post and this forum. Thanks to them, I've figured out how to get rid of the blog's name above my header image on the Power child Thematic theme and how to hyperlink my header image. This is no small feat for me! AlexanderJacob on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-17781 Wed, 15 Dec 2010 03:42:12 +0000 AlexanderJacob 17781@http://themeshaper.com/forums/ So I have the Autofocus Pro theme and it lets you upload a custom image for a header, but at the cost of losing its "clickability." Can someone who has this exact theme please tell me how to make the image I uploaded clickable again. I am a newbie at CSS but with clear directions I can do it. Elizabethl on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-17701 Sun, 12 Dec 2010 17:13:10 +0000 Elizabethl 17701@http://themeshaper.com/forums/ Hi, I am a complete newbie with CSS but somehow I managed to upload header pics into css and update it through <a href="http://FTP." rel="nofollow">FTP.</a> However, how do I insert the logo on the right hand side of my header instead of replacing the blog title? ( I want to keep the blog title on the left side of the header) Thanks in advance Danieliser on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-16486 Thu, 21 Oct 2010 13:01:18 +0000 Danieliser 16486@http://themeshaper.com/forums/ Try this for your header image. Using text-indent:-9000; can get you penalized in google rankings, its best to not try and hide text anywhere outside the renderable window. This method keeps all of the Thematic SEO Goodness by adding a span with link to the header below the blog title and description. This span is sized to 100% of the header div and will appear layered over your header text. You can read about it <a href="http://wizardinternetsolutions.com/wordpress/thematic/thematic-header-image-way/" title="Thematic Header Image The Right Way!">here</a>. Here is the snippet Add this to functions.php <pre><code>// Add Header Image // Add Header Image function thematic_logo_image() { echo '<a href="'.get_bloginfo('url').'" title="'.get_bloginfo('name').'" ></a>'; } add_action('thematic_header','thematic_logo_image',6);</code></pre> And this to styles.css <pre><code>#branding { height: 187px; /* Change this to your images height */ padding: 0; position:relative; } #header-image { background:url("images/header.jpg") no-repeat transparent; /* Change This to Your Image */ height:100%; width:100%; position:absolute; cursor: pointer; top:0; }</code></pre> anybody99 on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-14713 Sat, 14 Aug 2010 20:08:29 +0000 anybody99 14713@http://themeshaper.com/forums/ you used a text indent, it's a good technique to use for other areas as well, such as footer area if it has the sites logo. cypress34 on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-14104 Sat, 24 Jul 2010 09:33:02 +0000 cypress34 14104@http://themeshaper.com/forums/ I made a blog post on the tutorial for the header image based on this thread and how I did mine. You can check it out here: <a href="http://z3olyte.com/how-to-replace-header-title-with-custom-image-in-thematic-feature-site/" rel="nofollow">http://z3olyte.com/how-to-replace-header-title-with-custom-image-in-thematic-feature-site/</a> this can also apply to other thematic child themes Bionic Squid on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-14074 Thu, 22 Jul 2010 19:34:03 +0000 Bionic Squid 14074@http://themeshaper.com/forums/ I love Thematic and am using a child theme at <a href="http://www.radicalunions.com." rel="nofollow">www.radicalunions.com.</a> I've got the logo showing but currently the whole header is clickable using onclick etc in the header div. I'd like to put the onclick code in the branding div so only the logo is clickable but I don't see that as an actual div in the header, only in the CSS. Before I start adding divs inside the header on my child style sheet I thought I'd see if anyone could give me some help on this. Thanks. -Jonathan benDugdale on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-14065 Thu, 22 Jul 2010 16:06:55 +0000 benDugdale 14065@http://themeshaper.com/forums/ Hi I'm using the Thematic template for the first time and could do with a few words of wisdom. My plan is to create a number of page templates with each having a unique header image. I have the header image in place for the index.php file. I would like to duplicate and alter this template to allow for alternative header images and tweaked layouts. But because all of the templates/header.php files pull from the same styles.css file I am unable to have different header images. I hope this makes sense, any help would be greatly appreciated. My test site is up at <a href="http://www.villadazure.com/test/" rel="nofollow">http://www.villadazure.com/test/</a> Cheers Ben mithers on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-12722 Tue, 01 Jun 2010 12:50:30 +0000 mithers 12722@http://themeshaper.com/forums/ Your post gave me some nice new thoughts - a very solid read. stabxxx on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-12227 Sat, 08 May 2010 08:55:26 +0000 stabxxx 12227@http://themeshaper.com/forums/ Hello all! Thematic 0.9.6.2 I put the picture in Header. And how to replace "1" and firefox tab????? <a href="http://ipicture.ru/upload/100507/h2SURlmyU0.jpg" rel="nofollow">http://ipicture.ru/upload/100507/h2SURlmyU0.jpg</a> Sorry for my bad english...) michaeljoiner on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-12039 Sat, 01 May 2010 20:41:03 +0000 michaeljoiner 12039@http://themeshaper.com/forums/ Any way to use a conditional to display different header images on different pages? I've got the header image working by editing styles.css but can't figure out how to change it for specific pages. Sceneca.net is my site btw make money with hubpagee on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-11971 Thu, 29 Apr 2010 11:12:03 +0000 make money with hubpagee 11971@http://themeshaper.com/forums/ Hi there. I am really new to amending themes so this is a little confusing. Please take a look a the following site. <a href="http://www.makemoneywithhubpages.info/" rel="nofollow">http://www.makemoneywithhubpages.info/</a> I would like to add the hubpage logo in the header on the right hand side but am confused as to how to upload the image. i usually place my logos on photobucket. do i have to do the same for a header? Many thanks viv on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-11943 Tue, 27 Apr 2010 20:31:42 +0000 viv 11943@http://themeshaper.com/forums/ THANK YOU!! cyb3rghst on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-11710 Fri, 23 Apr 2010 04:58:31 +0000 cyb3rghst 11710@http://themeshaper.com/forums/ Ok, found it, just needed to look harder - To center the #access div, I needed to add the following: margin:0 auto; width:960px; cyb3rghst on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-11708 Fri, 23 Apr 2010 04:32:44 +0000 cyb3rghst 11708@http://themeshaper.com/forums/ I'm not sure this totally belongs in this forum, it's the access div. I've changed the color but do not want it spanning all the way across. I want to make it the same width as the header and also center it. I've tried setting a left margin in the css as well as changing the size in the header-extensions.php function like so, <code><div id="access" style="width:960px;" align="center"></code> Still it's offset. How can I make it be the same width as the header and be centered? <a href="http://www.micromercantes.com" rel="nofollow">http://www.micromercantes.com</a> Thanks!! alaJoAnn on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/3#post-11049 Sun, 28 Mar 2010 18:16:19 +0000 alaJoAnn 11049@http://themeshaper.com/forums/ Regarding adding logo to left of anchor: "If you want to just add a logo to the left of the anchor you can add some padding to the left and drop in a background." Depending on the height of your logo, you may also need to add padding to the top: #blog-title a { background:url(images/image-name.png) no-repeat top left; padding-left: XXpx; padding-top: XXpx; color:#000; text-decoration:none; Play around with padding px until you get it just right. tjdj on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/2#post-10402 Wed, 03 Mar 2010 18:40:53 +0000 tjdj 10402@http://themeshaper.com/forums/ 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! daveweinberg on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/2#post-9550 Fri, 05 Feb 2010 22:31:15 +0000 daveweinberg 9550@http://themeshaper.com/forums/ Hi Dave- doh! -Dave daveweinberg on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/2#post-9549 Fri, 05 Feb 2010 22:30:57 +0000 daveweinberg 9549@http://themeshaper.com/forums/ Hi Dave- this is Dave. Did you clear your cache and reload? -Dave daveweinberg on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/2#post-9547 Fri, 05 Feb 2010 22:22:13 +0000 daveweinberg 9547@http://themeshaper.com/forums/ 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: <a href="http://www.boothbaycottages.com/new" rel="nofollow">http://www.boothbaycottages.com/new</a> Description: Use this theme to start your Thematic Child Theme development. Author: Dave Weinberg Author URI: <a href="http://theweinberg.com" rel="nofollow">http://theweinberg.com</a> Template: thematic Version: 1.0 Tags: Thematic . Thematic is © Ian Stewart <a href="http://themeshaper.com/" rel="nofollow">http://themeshaper.com/</a> . */ /* 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! dreamscapecreative on "Adding a Header Image" http://themeshaper.com/forums/topic/adding-a-header-image/page/2#post-8762 Sun, 03 Jan 2010 05:57:15 +0000 dreamscapecreative 8762@http://themeshaper.com/forums/ 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: <code>blockquote</code> /* Theme Name: dreamscape Theme URI: Description: Use this theme to start your Thematic Child Theme development. Author: Ian Stewart Author URI: <a href="http://themeshaper.com/" rel="nofollow">http://themeshaper.com/</a> Template: thematic Version: 1.0 Tags: thematic . Thematic is © Ian Stewart <a href="http://themeshaper.com/" rel="nofollow">http://themeshaper.com/</a> . */ /* 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; } <code>/blockquote</code>