[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
|
Quote:
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: HTML Code:
%image <div id="my-floating-text">this is my text</div> %bar2 %logo %bar2 %pages HTML Code:
#my-floating-text { |
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.
HTML Code:
<div style="background:#790079;color:#fff;padding:5px;">Co.Wicklow Lawn Tennis Club – Est.1894<span style="float:right;">info@cowicklowltc.com</span></div> |
Quote:
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.
HTML Code:
<div style="background:#790079;color:#fff;padding:5px;"><span style="float:right;">info@cowicklowltc.com</span>Co.Wicklow Lawn Tennis Club – Est.1894</div> HTML Code:
<div style="background:#790079;color:#fff;padding:5px;"><div style="float:right;">info@cowicklowltc.com</div><div>Co.Wicklow Lawn Tennis Club – Est.1894</div></div> |
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 |
All times are GMT -6. The time now is 03:38 PM. |
Powered by vBulletin® Copyright ©2000 - 2024, Jelsoft Enterprises Ltd.