Wordpress Themes - WP Forum at BFA

Wordpress Themes - WP Forum at BFA (http://forum.bytesforall.com/index.php)
-   Header configuration & styling (http://forum.bytesforall.com/forumdisplay.php?f=15)
-   -   Adding contact info to right side of header (http://forum.bytesforall.com/showthread.php?t=12440)

ssoszka Jan 24, 2011 07:22 PM

Adding contact info to right side of header
 
Hello,

I couldn't find details for specific site goal, so I'm adding yet another thread. Sorry guys.

Anyway, I'm trying to add my business's contact number and a simple mission statement phrase to the far side of the header. Ideas?

I tried adding a widget but I didn't know where to put it. Any input is greatly appreciated.

Thanks,

Shawn

lmilesw Jan 24, 2011 07:30 PM

You could add a two celled widget area to ATO>Style & edit header area and put the the header in a widget in one cell and the contact info in the other. You could also add the contact info in a div before %image and position with CSS. These ideas are easier to do than explain however. Did what I say make sense?

ssoszka Jan 26, 2011 01:35 PM

Quote:

Originally Posted by lmilesw (Post 55792)
You could add a two celled widget area to ATO>Style & edit header area and put the the header in a widget in one cell and the contact info in the other. You could also add the contact info in a div before %image and position with CSS. These ideas are easier to do than explain however. Did what I say make sense?

I like the div idea, what would that look like code-wise HTML & CSS?

Thanks,
Shawn

lmilesw Jan 26, 2011 02:09 PM

It's just adding a div with the content you want perhaps with a class so you can style. For example
HTML Code:

<div class="contactmission">Contact and mission info here</div>
Then you would style it using the contactmission class selector.

ssoszka Jan 31, 2011 04:56 PM

Quote:

Originally Posted by lmilesw (Post 55958)
It's just adding a div with the content you want perhaps with a class so you can style. For example
HTML Code:

<div class="contactmission">Contact and mission info here</div>
Then you would style it using the contactmission class selector.

Thanks for the info. In my case, I'm just using %logo %pages in my header, so I assume the <div> would go between these two elements?

Also I'm not so fluent with CSS, so how would you suggest formatting the spacing of the text. Right now without any formatting its sitting between the logo and page menu.

Thanks,
Shawn

lmilesw Jan 31, 2011 05:38 PM

CSS isn't too complicated. w3schools.com has a great section for learning CSS with interactive areas. If you used the code I gave you earlier then you would put something like the following in ATO>Add HTML/CSS Inserts>CSS Inserts
HTML Code:

.contactmission {
width: 100px;
padding: 20px;
font-size: 14px;
}

The items I put in there are purely arbitrary. You need to determine what you want to do with the text and them use the proper CSS. This just shows you what is would sort of look like.

ssoszka Jan 31, 2011 06:14 PM

Quote:

Originally Posted by lmilesw (Post 56507)
CSS isn't too complicated. w3schools.com has a great section for learning CSS with interactive areas. If you used the code I gave you earlier then you would put something like the following in ATO>Add HTML/CSS Inserts>CSS Inserts
HTML Code:

.contactmission {
width: 100px;
padding: 20px;
font-size: 14px;
}

The items I put in there are purely arbitrary. You need to determine what you want to do with the text and them use the proper CSS. This just shows you what is would sort of look like.

Thanks Larry!

I insert a graphic within the <Div> element on the page right? or is that something better done with CSS? I'll take a look at the site you recommended.

Thanks again,
Shawn

lmilesw Jan 31, 2011 06:43 PM

Yes you can insert a graphic there with html and then style it (position, padding, etc) with CSS.


All times are GMT -6. The time now is 04:03 PM.

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