Jump to content
Sign in to follow this  
thelobbyist

Adding icon next to twitter/rss/facebook icons

Recommended Posts

thelobbyist

Up on the right hand corner of the whitehouse pro theme there are a couple little icons for twitter/facebook/rss feed etc. I'm wanting to add a graphic for our donate button up there. I'm trying to get it to line up. But for the life of me nothing I'm trying will work. Anyone have any suggestions?

Share this post


Link to post
Share on other sites
thelobbyist

bump. Anyone? I'm just trying to add my paypal donate button icon up there. But I can't for the life of me get it to line up with the other little icons.

Share this post


Link to post
Share on other sites
thelobbyist

We're in maitenence mode until we launch. But if you take a look at the WhiteHouse Pro demo. http://www.pagelines.com/demos/whitehousepro/ It's the little social icons on the top right of the header. I'd like to add our paypal button to the left or right of those buttons all lined up.

Share this post


Link to post
Share on other sites
thelobbyist
<div class="icons">
	
									<?php if(pagelines('rsslink')):?>
									" class="rsslink">
									<?php endif;?>
	
									<?php if(VPRO):?>
										<?php if(pagelines('twitterlink')):?>
										" class="twitterlink">
										<?php endif;?>
										<?php if(pagelines('facebooklink')):?>
										" class="facebooklink">
										<?php endif;?>
										<?php if(pagelines('linkedinlink')):?>
										" class="linkedinlink">
										<?php endif;?>
									<?php endif;?>
	
								</div>[/code]

That's the code that I'm trying to add my paypal icon to lined up.

Share this post


Link to post
Share on other sites
jnoh

You're going to insert the `` And use css to style .paypal If you set it up I can help you witht css.

Share this post


Link to post
Share on other sites
thelobbyist

Is this going inside the <div class="icons"> or just prior to it? Also, the code paypal provides is a <form> so I'm not sure how that would work here.

<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
	  <input type="hidden" name="cmd" value="_s-xclick">
	<input type="hidden" name="hosted_button_id" value="[this is a unique id i have removed]">
	<input type="image" src="https://www.paypal.com/en_US/i/btn/btn_donate_SM.gif" border="0" name="submit" alt="PayPal - The safer, easier way to pay online!">
	
	</form>[/code]

Share this post


Link to post
Share on other sites
jnoh

Add that inside the icons div. ` ` I added the paypal class to the image input. Now you can style the button and move it to the right position.

Share this post


Link to post
Share on other sites
thelobbyist

Thanks. That's going in the right direction. Now it appears it's covering the other icons. So I need to move it to the left and get rid of that box/border that is around it. Looks like I will need to go about 76-78px to the left. So now I have to adjust the CSS? What's my next step with that?

Share this post


Link to post
Share on other sites
Andrew

do you have firebug installed? Watch Adam's tutorial on how to use it to inspect elements and get css to add :)

Share this post


Link to post
Share on other sites
thelobbyist

Yeah, I have firebug. But since we are using type="image" here, if I make changes to that input type, doesn't it makes changes for all image input types? Wouldn't it be better to create a "paypal" type and just edit it so that none of my other images are affected by the changes? Whenever I get into CSS and PHP my brain blows up because these things weren't around when I was in college taking html. Sorry for all the questions.

Share this post


Link to post
Share on other sites
thelobbyist

Just to clarify something. The paypal image is pulling its CSS style from wp_core.css and not from style.css From playing around a little it also appears the image was placed on top of the twitter/facebook/rss icons and pushing it down behind the header menu. It is not pushing it off frame to the right on sitting on top of them like I had originally thought. Take a look: http://conservativecongress.com/

Share this post


Link to post
Share on other sites
thelobbyist

Whenever I adjust the CSS in wp_core.css it also adjust the placement of my search bar. This is what I was afraid of with making universal adjustments. I'm not really sure how to do it, but can't I just define a "paypal" input type and create unique css just for it?

Share this post


Link to post
Share on other sites
cmunns

correct. In the code you copied from jnoh he added a paypal class, so just create the css rule for it ` .paypal { rule:xxx; } ` Do you need help with the css? If so, tell us exactly where you want it on the page...left or right of the icons?

Share this post


Link to post
Share on other sites
thelobbyist

I'm going to practice for a bit before I ask you. It's the only way I'm going to get better at the CSS.

Share this post


Link to post
Share on other sites
thelobbyist

Here's the code I went with. If you go to the site, conservativecongress.com you'll see that in the process of aligning the icons I've pushed the banner text up. I figure I better ask before I get myself into trouble.

/* Header Icons */
	.paypal {position:relative; left: -87px; top: 23px;}
	.icons {text-align: right;position: relative; bottom: 0px; right:0px;line-height: 20px;height: 24px;}
	.icons a {display: block;width: 24px; height: 24px; margin-left: 4px; float: right;text-align: right;}
	.icons .twitterlink {background: url(images/icons/icon-twitter.png) no-repeat 0 0;}
	.icons .linkedinlink {background: url(images/icons/icon-linkedin.png) no-repeat 0 0;}
	.icons .facebooklink {background: url(images/icons/icon-facebook.png) no-repeat 0 0;}
	.icons .rsslink {background: url(images/icons/icon-rss.png) no-repeat 0 0;}

Share this post


Link to post
Share on other sites
cmunns

the relative positioning of the paypal button is forcing down the header. Try taking it out of the flow of the document with absolute positioning. Of course this will make the paypal button very static, which I'm assuming is okay. Try: ` .paypal { position:absolute; right:95px; top:3px; } `

Share this post


Link to post
Share on other sites
thelobbyist

Thanks man. I think that's super close. It does appear that my header is still a few pixels higher off the box than the icons. Is that a margin thing?

Share this post


Link to post
Share on other sites
Andrew

the icons are absolutely positioned so they are controlled by a different method. If you'd like to change that... its easy too :)

Share this post


Link to post
Share on other sites
thelobbyist

I had previously made some adjustments to the banner text via wp_core.css. I went to change them back to stock settings and it screwed it went haywire. So I may need to put it back to stock and then play with the paypal css again. Not sure. Was hesitant to do it in the middle of the day because we're already getting a sizable amount of traffic.

Share this post


Link to post
Share on other sites
jnoh

Let us know if you get stuck at any point.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×