[SOLVED] How To Add Text Under Header Image
 

Hey guys,

What I'm looking to do is add text underneath the header image on this site http://www.cowicklowltc.com/wordpress/

I'm not sure how to do it using the Atahualpa theme. At the moment i have the blog title and tagline showing on the site which is how I have the name and email address showing, but I'd like to style them a bit and get them on the same line,

How do I go about adding text to this region, I've figured it must be something on the configure header area but when I put text in there it just appears with a white background and messes everything up,I probably need to get it in a div tag or something?

Thanks for the help :-)

That's great thanks so much!

If you go to the site you'll see what I have now, i've got the site name and the email address in two different divs so I could align one left and one right,

but how do I get them so they're in line with each other?

cheers

Hmm I tried that but now look what it's like :(

How do I get it back to the bar that it was in?

Thanks so much for you help by the way

Hmm ye I'm trying that but as you can see they just go behind the current nav bar, I want them to go inbetween the nav bar and the image

One way to make this easy on yourself is to recreate the logo image with the text as part of it.

But that won't work since the header images are always changing and the logo is actually positioned over the rotating images with css

You wouldn't add the text to the header image. You would recreate the logo with the text you want as part of the logo. Then you just have to position one image.

Another way I have done this is to create all the header images with the logo as part them in the same place. That gives them the appearance of having a floating logo without having to do all the CSS positioning.

If you have a fixed width layout, here is an easy way to do it
1) add your text in a div in ato->Style & edit HEADER AREA->Configure Header Area so it looks like this:
2) add a CSS Insert to position and style it like this
just adjust the position to where you want it to show up

I knew I was looking at this too hard JD... Thanks

None of those options were really working for me,

No matter what I couldn't find a way to get the bar of purple background with the text in it , it was always a broken bar or the text wouldn't align or it was hidden by the other bar

what i did was adjust the blog tagline so it was level with the title with css in the options, but i've found that on low res sites it the tagline can be pushed out to the site and not shrink in with the rest of the site,

how can i make it do that?

or would a better option be to add an image to that section with the title and email on it of the same dimensions of that bar? if so what could should i use for that? and would the image shrink in as the site does since it's a fluid layout?

or would i be better off going for a fixed width layout?
Thanks

If what is currently showing along the lines of what you want try putting the following under (To the right of) %image in Configure Header Area box and tweak the padding as needed.

Sometimes I think I need a bigger coffee table to bang my head on. I must have spent more than 8 hours trying to figure this out - playing with settings divs etc etc. Why onearth didn't I think of THAT!

Hey ho! - 10 minutes and fixed!

Thanks
Graham.

Yes yes yes lmilesw!

Thank you so much! this was the perfect solution for this, hats off to you!

Much appreciated!

Oh wait guys, just when I thought it was all sorted,.

When you look at the site in Firefox and Chrome it's perfect

However when I look at it in Internet Explorer, there is an extra white bar/gap underneath the site name and email address that I dont want there

Any ideas where on earth that's come from and how to remove it from IE?

Much appreciated

Thanks once again!

Hmm ye that makes sense, I don't see why it overflows only in IE though

Thing is I haven't added any css coding to the mix, I basically took the code from lmilesw and put where he said to and didn't add any css , I haven't changed anything from that original code

Just my luck then, and of course the issue has to be with IE the most used web browser ....

I've never learnt any html and css coding before,I'm still learning as I go at the moment I'm afraid...

Would you possibly be able to suggest the code that would sort this out with the absolute positioning?

I do remember trying that before where I had the site name and email in separate <span> tags and I moved them with css but I couldn't get the desired bar with the two items in it as I explained before in a previous post...

I really appreciate all your help

Thanks once again

I was kinda wondering about the float when I gave you that code. Try the following and see what happens. This way the first element should float to the right of the second.

Or maybe

You know what, you guys are just the best!

Your first solution did the trick for me there lmilesw

Thanks so much, you've no idea how much I appreciate your help, it's tough doing this stuff when you've never learnt code properly