Wordpress Themes - WP Forum at BFA
Click Here To DONATE! Support the theme development, get more attention and additional benefits based on your donation level. Your forum name will be highlighted.

Wordpress Themes - WP Forum at BFA » WordPress Themes » Atahualpa 3 Wordpress theme » Header configuration & styling »

[SOLVED] How To Add Text Under Header Image


Build custom WP THEMES, without
coding.
Click here for THEMEFRAME

From the author of Atahualpa, the #1 most
downloaded (700,000+) theme @ wordpress.org
  #1  
Old Mar 23, 2011, 04:51 PM
robobobo
 
23 posts · Mar 2011
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 :-)
  #2  
Old Mar 23, 2011, 05:31 PM
robobobo
 
23 posts · Mar 2011
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
  #3  
Old Mar 23, 2011, 05:54 PM
robobobo
 
23 posts · Mar 2011
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
  #4  
Old Mar 23, 2011, 06:44 PM
robobobo
 
23 posts · Mar 2011
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
  #5  
Old Mar 23, 2011, 06:49 PM
lmilesw's Avatar
lmilesw
 
10,087 posts · Jul 2009
Central New York State USA
One way to make this easy on yourself is to recreate the logo image with the text as part of it.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #6  
Old Mar 23, 2011, 06:52 PM
robobobo
 
23 posts · Mar 2011
But that won't work since the header images are always changing and the logo is actually positioned over the rotating images with css
  #7  
Old Mar 23, 2011, 10:23 PM
lmilesw's Avatar
lmilesw
 
10,087 posts · Jul 2009
Central New York State USA
Quote:
Originally Posted by robobobo
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.
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #8  
Old Mar 24, 2011, 04:38 AM
juggledad's Avatar
juggledad
 
22,191 posts · Mar 2009
OSX 10.8.5 WP 3.8.x Atahualpa 3.7.x Safari 6.x Firefox 25 XP
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
2) add a CSS Insert to position and style it like this
HTML Code:
#my-floating-text {
  position: absolute; 
  top: 50px; 
  left: 100px; 
  z-index: 40; 
  font-size: 30px;
}
just adjust the position to where you want it to show up
__________________
Give a person a solution, you fix one issue, teach a person how to solve their problem you enable them forever.
Juggledad | Forum Moderator/Support

Last edited by juggledad; Mar 24, 2011 at 04:45 AM.
  #9  
Old Mar 24, 2011, 07:09 AM
lmilesw's Avatar
lmilesw
 
10,087 posts · Jul 2009
Central New York State USA
I knew I was looking at this too hard JD... Thanks
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #10  
Old Mar 24, 2011, 05:45 PM
robobobo
 
23 posts · Mar 2011
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
  #11  
Old Mar 24, 2011, 07:02 PM
lmilesw's Avatar
lmilesw
 
10,087 posts · Jul 2009
Central New York State USA
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>
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #12  
Old Mar 25, 2011, 02:50 AM
GrahamW
 
95 posts · Jul 2010
Quote:
Originally Posted by lmilesw
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.
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.

Last edited by lmilesw; Mar 25, 2011 at 06:37 AM.
  #13  
Old Mar 25, 2011, 07:27 PM
robobobo
 
23 posts · Mar 2011
Yes yes yes lmilesw!

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

Much appreciated!
  #14  
Old Mar 27, 2011, 04:28 PM
robobobo
 
23 posts · Mar 2011
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!
  #15  
Old Mar 27, 2011, 04:49 PM
robobobo
 
23 posts · Mar 2011
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
  #16  
Old Mar 27, 2011, 05:10 PM
robobobo
 
23 posts · Mar 2011
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
  #17  
Old Mar 27, 2011, 07:56 PM
lmilesw's Avatar
lmilesw
 
10,087 posts · Jul 2009
Central New York State USA
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>
Or maybe
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>
__________________
~Larry (CNY Web Designs)
This site should be a membership site since it so full of good stuff.
Please consider donating which gives you access to even more good stuff.
  #18  
Old Mar 28, 2011, 03:22 PM
robobobo
 
23 posts · Mar 2011
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

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Add a text under the header image bg74blogger Header configuration & styling 4 Apr 3, 2011 08:22 PM
Need Help Figuring Out How To Add Space Between Image And Text In Body Of WP Site carpefukendiem Atahualpa 3 Wordpress theme 1 Sep 29, 2010 09:10 AM
How can I add an image to a post and have it "float" so the text wraps around it? scrubbs Excerpts, Read more, Pagination 17 Nov 25, 2009 01:35 PM
Remove blog title text add image benw Header configuration & styling 4 Apr 28, 2009 03:50 PM


All times are GMT -6. The time now is 10:31 AM.


Powered by vBulletin® Copyright ©2000 - 2014, Jelsoft Enterprises Ltd.