Wordpress Themes - WP Forum at BFA
There will be no more development for Atahualpa (or any other theme), and no support. Also no new registrations. I turned off the donation system. I may turn the forum to read only if it gets abused for spam. Unfortunately I have no time for the forum or the themes. Thanks a lot to the people who helped in all these years, especially Larry and of course: Paul. Take care and stay healthy -- Flynn, Atahualpa developer, Sep 2021

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

Add content (phone number) at top right corner


  #1  
Old Aug 11, 2011, 12:23 PM
Weili
 
5 posts · Jan 2011
Is it possible (and how) to add content, namely phone number and perhaps address at the top right corner? I have limited HTML/CSS knowledge

Thanks in advance!
  #2  
Old Aug 11, 2011, 01:56 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
You can put code in the HTML Inserts: Body Top box and position with CSS. For example
The html might be
HTML Code:
<div id="top-address">Type address here</div>
and the CSS might be
HTML Code:
#top-address {text-align:right;}
These are just examples. To find out more about CSS go to w3schools.com
__________________
~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.
  #3  
Old Aug 11, 2011, 02:47 PM
Weili
 
5 posts · Jan 2011
Thanks for the reply Imilesw

Are there any instructions that's more specific to making the edit within Atahualpa?

I have crawled through all the Atahualpa options, do you think "Widget areas" would help?

Last edited by Weili; Aug 11, 2011 at 02:50 PM.
  #4  
Old Aug 11, 2011, 04:36 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
just add it to the ato->Style & edit HEADER AREA->Configure Header Area
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #5  
Old Aug 11, 2011, 05:30 PM
Weili
 
5 posts · Jan 2011
Thanks for replying juggledad but unfortunately that just adds either below or above the logo. What I would like to do is add the phone number to the top right corner and within the border.

http://www.acupunctureclinichouston.com/

I currently just use a wide logo image but the header should show where I'm talking about. Thanks
  #6  
Old Aug 11, 2011, 07:33 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
So you would use something like the following in the same spot Juggledad mentioned.
HTML Code:
<div style="text-align: right;">315.555.1212</div>
CSS is VERY important to learn for website building.
__________________
~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.
  #7  
Old Aug 11, 2011, 07:42 PM
Weili
 
5 posts · Jan 2011
Doing that only aligns the numbers to the right but doesn't place it on the "same row" as the logo. It'd still be either above or below.
  #8  
Old Aug 11, 2011, 07:44 PM
juggledad's Avatar
juggledad
 
23,765 posts · Mar 2009
OSX 10.11.5 WP 4.x Atahualpa(all) Safari, Firefox, Chrome
You could also use the overlay header image option if youwant it to show up on top of the header image
__________________
"Tell me and I forget, teach me and I may remember, involve me and I learn." - Benjamin Franklin
Juggledad | Forum Moderator/Support
  #9  
Old Aug 11, 2011, 07:53 PM
lmilesw's Avatar
lmilesw
 
10,176 posts · Jul 2009
Central New York State USA
That's where playing around with CSS comes in. I use Firebug with Firefox. With a little testing I came up with this code which MAY work somewhat for you but each situation is different.

You would put the following in the Configure Header Area box most likely right above %logo. The ID is arbitrary.
HTML Code:
<div id="top-phone">315.555.1212</div>
Then you would put something like the following in ATO>Add HTML/CSS Inserts>CSS Inserts
HTML Code:
#top-phone {
    position: absolute;
    margin-top: 50px;
    margin-left: 800px;
}
__________________
~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.

Bookmarks

Thread Tools Search this Thread
Search this Thread:

Advanced Search
Display Modes


Similar Threads
Thread Thread Starter Forum Replies Last Post
Problem with theme on mobile phone oyedepo1 Center area post/pages 9 Oct 20, 2011 03:49 AM
This adds today's date to top right corner of header juandrah Header configuration & styling 1 Aug 21, 2011 01:31 AM
Can I add a clickable phone number to the header or bar below for smartphones to use? angiebare Header configuration & styling 6 Apr 12, 2011 06:25 AM
Add Google Voice Widget to Header Right Upper Corner netinfused Header configuration & styling 3 Feb 2, 2011 01:18 PM


All times are GMT -6. The time now is 09:52 AM.


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