Jump to content
Sign in to follow this  
kjarrard

Add photo to header

Recommended Posts

kjarrard

I would like to be able to add a photo to the header area so that it fills from the end of my title text to the right hand side, or simply sits on the right hand side, at the same depth as the title. any way to do that? my site, as it is, is kylejarrard.com

Share this post


Link to post
Share on other sites
cmunns

Did you try using the upload feature in Global Options for site logo?

Share this post


Link to post
Share on other sites
kjarrard

Yes, I tried that, but even after uploading an image (and how to know what size it should be?) nothing new appears in the header.

Share this post


Link to post
Share on other sites
Andrew

That's strange, is it showing in the admin?

Share this post


Link to post
Share on other sites
kjarrard

Yes, in fact the image does show once uploaded into the header area, but the name of the site disappears. I know this is obvious, but is there a way to displace the title of the side to one side, and have a photo to the other, all in the header box? or, better, can i have a header photo going all the way across and the name of the site atop it, superimposed? thanks for any help here.

Share this post


Link to post
Share on other sites
cmunns

Those are two different roads. So you have to decide which way the road forks? To superimpose the header image you want to use a background image to place it behind everything in the header thus making it non-clickable as a home button, (but if you had the text there still you would be fine) The other option is to modify the template.branding.php file so that both the logo and text appear. Which destiny would you like :)

Share this post


Link to post
Share on other sites
kjarrard

hello. yes, i think the first option is the one that appeals to me most. but if the other is easier on everyone concerned, then so be it. i'm good either way. thanks for your help.

Share this post


Link to post
Share on other sites
Andrew

here's some CSS to get you started, are you using Firebug? `body #header .content {background: url(your_image_url.jpg) no-repeat top center;}` This should set an image as the background of your header.

Share this post


Link to post
Share on other sites
maurice

Hi Andrew, I tried putting the code in the custom CSS box, added an image URL but the image appears twice - once in the Header and immediately below in the menu block. problem page p.s. I'm thinking of using a semi-transparent image behind the header text.

Share this post


Link to post
Share on other sites
bryan-hadaway

`body .texture .content{background:none}` Add that in addition, should do the trick. Thanks, Bryan

Share this post


Link to post
Share on other sites
maurice

Hi Bryan, Thanks for the suggestion. I pasted the code into the bottom of my Custom CSS window, saved and then checked the site (having cleared the cache) - no change. I modified the code as follows, one a a time and had no luck: .texture .content{background:none} #texture .content{background:none} My complete Custom CSS window has the following: body{} #morefoot { padding: 0.2em 0; } #branding h1 a { color: #333333; font-size: 35px; letter-spacing: -1px; line-height: 0.9; text-shadow: 0 1px 0 #FFFFFF; } #branding .site-description { color: #666666; margin-top: 0.6em; font-size: 1.7em; letter-spacing: 2px; text-transform: uppercase; } #callout .callout_head { color: #FFFFFF; font-size: 2em; } #header .content { background: url(http://e-capability.co.nz/wp-content/uploads/2011/01/silhouette.jpg); background-repeat: no-repeat; background-position: 550px 0px; } body .texture .content{background:none} Any idea what the problem is? I have no formal CSS experience. Cheers Maurice

Share this post


Link to post
Share on other sites
Kate

Hi Maurice - It looks like you got it! Good job. I am seeing it repeated in the nav area, and I believe that's because you used the "content" class. It may be easier to use the branding div or another element so that it's not used in the nav area.

Share this post


Link to post
Share on other sites
maurice

Hi Kate, Sorry but your post makes little sense to me at all. I still have the same problem and I still have no idea how to fix it. Yes I can control where the image is positioned in the banner but the code Bryan suggested doesn't seem to do anything visible. Please can you be a bit more specific with your suggestion? Many thanks, Maurice

Share this post


Link to post
Share on other sites
cmunns

You have this CSS: ` #header .content { background: url("http://e-capability.co.nz/wp-content/uploads/2011/01/silhouette.jpg'>http://e-capability.co.nz/wp-content/uploads/2011/01/silhouette.jpg") no-repeat scroll 550px 0 transparent; } ` but you need it be this: ` #branding .content { background: url("http://e-capability.co.nz/wp-content/uploads/2011/01/silhouette.jpg'>http://e-capability.co.nz/wp-content/uploads/2011/01/silhouette.jpg") no-repeat scroll 550px 0 transparent; } `

Share this post


Link to post
Share on other sites
Kate

@Maurice Sorry I wasn't clear enough for you, but I'm glad Adam was able to clear it up. And I gave him a Karma point on your behalf ;) For the future: just click "Best Answer?"

Share this post


Link to post
Share on other sites
maurice

Thanks Kate, For the future: just click "Best Answer?" I don't see "Best Answer" anywhere on my page. Tried looking, tried 'Find' but I can't see it. Perhaps you can provide a screen shot which shows where the 'Best Answer' button is. Sounds dumb I know there is no Best Answer to click in my view.

Share this post


Link to post
Share on other sites
maurice

Thank you Catrina, I don't have that option in my view. This is what I see. 53obi.jpg It looks like there is a problem with this function for some types of user.

Share this post


Link to post
Share on other sites
Andrew

You need to be the original topic poster to see the best answer option.

Share this post


Link to post
Share on other sites
maurice

Thanks for that response Andrew - that clarifies the reason. I realise that this may be a 'feature' of the system you use but it would be useful for readers to be able to acknowledge and/or nominate a best answer that has been helpful to them even though they were not the original topic poster. Food for thought? In the meantime, you may want to consider modifying your introduction to the Karma system to make it clear that this only applies to the original poster of a question. e.g. _______________________ How It Works The person who posts the original question (or a system admin) can give up to two people "karma" by marking their responses as the best answer. You can select your own responses as well, but you can't give yourself karma.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×