Wordpress Themes - WP Forum at BFA
Click here to register or to donate.
Auto self-registration is not available here - far too many spammers. This forum has many, many backlinks and because of that there is an intense desire among spammers to drop their links here.

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

Contact info on right side of Header


  #1  
Old Nov 22, 2013, 08:59 AM
mikula25
 
13 posts · Nov 2013
So I've used some of the tips mentioned here on how to add contact info on the right side of the header, all helpful so far, thanks. However I was wondering if there was another solution besides using the absolute positioning method.

Here is what I used in the ATO>Header:

<div class="contact1"> Skype:AdventuretoAfrica </div>

Then this is my CSS:

.contact1 {height: 15px;
position: absolute;
margin-top: 5px;
margin-left: 830px;
font-size: 12px;
background: #BDBDBD;
padding-right:2px;
font-family:Verdana, Times, serif;
}

The issue is that when you reduce the width of the browser, the text floats outside of the header width, which I guess makes sense given the absolute definer. My main concern is that the text floats outside of the header when you view the website on an iPhone. Is this avoidable? Do I need to reduce the width of my header? Or is there another way to position the text on the right side of the page; I've tried margin-right: 0px, but that doesnt work for some reason. Thanks.

My website is tommikula.net.
  #2  
Old Nov 22, 2013, 03:25 PM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you put the
HTML Code:
<div class="contact1"> Skype:AdventuretoAfrica </div>
as the first thing in the 'Configure Header Area' option?

if not, try it there and change the positioning to 'relative'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #3  
Old Nov 22, 2013, 03:49 PM
mikula25
 
13 posts · Nov 2013
Yes that was listed first in the 'Configure Header Area'.

When I switch it to relative, the text jumps up to another line above where I have the logo on the left placed. Take a look:

http://www.tommikula.net/

The CSS code now reads:
.contact1 {height: 15px;
position: relative;
margin-left: 800px;
margin-top: 0px;
font-size: 12px;
background: #BDBDBD;
padding-right:2px;
font-family:Verdana, Times, serif;
}

Thanks for any help you can provide.
  #4  
Old Nov 22, 2013, 06:25 PM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
try this, Instead of using the logo as a logo, use it as a header image, then you can use the 'Overlay header Image' options to put your text in and position it
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Nov 25, 2013, 09:40 AM
mikula25
 
13 posts · Nov 2013
Hmmm, still same problem; text runs outside the header when I decrease the width of the browser. Also runs over the header width on an iphone.
  #6  
Old Nov 25, 2013, 09:50 AM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
did you change the positioning to relative since anything in the 'Overlay Header Image' will be wrapped in the header image div?
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #7  
Old Nov 25, 2013, 10:20 AM
mikula25
 
13 posts · Nov 2013
Ok, I spent some more time with this and got it to work, thank you. It actually works when I use absolute position right 5px.

Now I can't seem to change the background color of the header?
  #8  
Old Nov 25, 2013, 11:36 AM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
because the area is 'clickable' use 'div.clickable {background-color: whatever:}' and set a z-index of at least 100 on contact1 and contact2
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Nov 25, 2013, 02:46 PM
mikula25
 
13 posts · Nov 2013
Ok, thank you. I wrapped a div around the contacts; but now the logo isnt showing up:

<div.clickable> <div class="contact1"> Skype:AdventuretoAfrica </div>
<div class="contact2"><a href="info@adventuretoafrica.com">Email:info@adven turetoAfrica.com</a> </div> </div.clickable>

Thanks for your help on this, I'm trying to learn as I go (obviously, haha)
  #10  
Old Nov 25, 2013, 04:48 PM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
Sorry, I wasn't clear. If you put your code into the 'overlay header image' option and you have set the option to make the header image clickable, it will be wrapped in a div with a class of 'clickable'
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #11  
Old Nov 26, 2013, 05:25 PM
mikula25
 
13 posts · Nov 2013
I think I'm missing something then; here is what I have in the CSS:

.clickable {
background-color: #D8D8D8;
}

And here is what I have in overlay header image (I removed the "clickable" class since its already there):

<div class="contact1"> Skype:AdventuretoAfrica </div>
<div class="contact2"><a href="info@adventuretoafrica.com">Email:info@adven turetoAfrica.com</a> </div>
  #12  
Old Nov 26, 2013, 06:44 PM
juggledad's Avatar
juggledad
 
23,686 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
OK, assuming ou are using Atahualpa 3.7.12

1) install the plugin 'wp-filemanager' then create a folder in the 'wp-content' folder called 'ata-images' then create a folder inside it called 'header'.

2) move your logo image to the 'wp-content/ata-images/header' folder

3) go to ato->New Image Locations and set
- Relative location of images?: to 'wp-content' and set
- Images Directory: to 'ata-images' then
- press SAVE

Your now ysing your logo as a header image and it should show up.
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Adding contact info to right side of header ssoszka Header configuration & styling 7 Jan 31, 2011 07:43 PM
adding contact info (with email link) to header area viewdesigninc Header configuration & styling 1 Nov 1, 2010 01:55 PM
Adding contact information to the header? Igor Header configuration & styling 2 Nov 5, 2009 04:27 PM


All times are GMT -6. The time now is 06:02 AM.


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