Jump to content


Photo
- - - - -

Add photo to header


This topic has been archived. This means that you cannot reply to this topic.
20 replies to this topic

#1 kjarrard

kjarrard

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 06 January 2011 - 06:26 PM

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

#2 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 06 January 2011 - 06:31 PM

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

#3 kjarrard

kjarrard

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 06 January 2011 - 07:09 PM

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.

#4 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts

Posted 06 January 2011 - 11:53 PM

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

#5 kjarrard

kjarrard

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 07 January 2011 - 02:21 PM

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.

#6 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 07 January 2011 - 06:54 PM

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 :)

#7 kjarrard

kjarrard

    Newbie

  • Members
  • Pip
  • 4 posts

Posted 07 January 2011 - 07:35 PM

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.

#8 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts

Posted 08 January 2011 - 12:47 AM

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.

#9 maurice

maurice

    Advanced Member

  • Members
  • PipPipPip
  • 43 posts

Posted 13 January 2011 - 01:50 AM

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.

Please Login or Register to see this Hidden Content



p.s. I'm thinking of using a semi-transparent image behind the header text.

#10 bryan-hadaway

bryan-hadaway

    Advocate

  • Members
  • PipPipPipPipPip
  • 3697 posts

Posted 13 January 2011 - 03:11 AM

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

#11 maurice

maurice

    Advanced Member

  • Members
  • PipPipPip
  • 43 posts

Posted 13 January 2011 - 06:03 AM

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(

Please Login or Register to see this Hidden Content

); 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

#12 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 13 January 2011 - 02:21 PM

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.

#13 maurice

maurice

    Advanced Member

  • Members
  • PipPipPip
  • 43 posts

Posted 13 January 2011 - 06:56 PM

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

#14 cmunns

cmunns

    Advocate

  • Members

  • 6537 posts

Posted 13 January 2011 - 09:11 PM

You have this CSS: ` #header .content { background: url("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") no-repeat scroll 550px 0 transparent; } `

#15 maurice

maurice

    Advanced Member

  • Members
  • PipPipPip
  • 43 posts

Posted 13 January 2011 - 09:55 PM

Thanks cmunns, that fixed it. I'd give you karma but I still can't figure out how to :-( BTW - the code I used was supplied by Andrew Powers in his post above...

Please Login or Register to see this Hidden Content

Cheers Maurice

#16 Kate

Kate

    Advocate

  • Members
  • 3039 posts

Posted 14 January 2011 - 01:06 AM

@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?"

#17 maurice

maurice

    Advanced Member

  • Members
  • PipPipPip
  • 43 posts

Posted 14 January 2011 - 10:55 AM

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.

#18 catrina

catrina

    Advocate

  • Members
  • 12345 posts

Posted 14 January 2011 - 06:48 PM

Here it is:

#19 maurice

maurice

    Advanced Member

  • Members
  • PipPipPip
  • 43 posts

Posted 14 January 2011 - 07:31 PM

Thank you Catrina,

I don't have that option in my view. This is what I see.

Posted Image

It looks like there is a problem with this function for some types of user.

#20 arpowers

arpowers

    Founder

  • Administrators
  • 3270 posts

Posted 15 January 2011 - 04:53 AM

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