Jump to content
Sign in to follow this  
liverpoolfootballblog

Positioning Facebook Like + Twitter with CSS

Recommended Posts

liverpoolfootballblog

I've gotten the Facebook Like and Tweet buttons to display using the code from Facebook and Twitter, and then inserted them using hooks. As you can see they are at the beginning and end of the posts: http://liverpoolfootballblog.com The Facebook like button is on the left and the Twitter button is aligned on the right. The problem is, I want both buttons to display on the same line, but the twitter button is slightly lower than the Facebook button. So my question is: How can I use CSS to position the Twitter button slightly higher? A less important question: Does it make a difference whether you use div=class or div=id in the hooks?

Share this post


Link to post
Share on other sites
catrina

Add this CSS to Settings > Custom Code > CSS Rules:

#tweet_after_content {margin-top: -40px;}

Does it make a difference whether you use div=class or div=id in the hooks?
The main difference between DIV ID and DIV class is that DIV ID should be used when there is only one occurence per page and DIV class should be used when there are one or more occurences per page (http://www.tizag.com/cssT/cssid.php).

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
liverpoolfootballblog

That didn't work... Do you have any other ideas?

Share this post


Link to post
Share on other sites
catrina

Try adding it to the base.css file instead (it's in the child theme PlatformBase).


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Simon

Try adding this to base.css ` #facebook_like_after_posts { float: left; } .tags { clear: both; } `

Share this post


Link to post
Share on other sites
liverpoolfootballblog

Those didn't work either. I'm actually able to move the twitter icon in the firebug control panel using this code:

element.style {
	    bottom: 35px;
	    height: 20px;
	    position: relative;
	    width: 110px;
	}

I added position: relative and bottom 35px. However, when I save it to base or settings css it doesn't save the settings properly. I'm confused.

Share this post


Link to post
Share on other sites
Simon

works for me like this: gy4zO.png

Share this post


Link to post
Share on other sites
liverpoolfootballblog

Yes but when you go to editor>bass.css , add those files and click update settings it doesn't save them and the icons go back to how they were before.

Share this post


Link to post
Share on other sites
liverpoolfootballblog

I just figured it out. When I added this code to base.css the settings would not save: element.style { bottom: 35px; height: 20px; position: relative; width: 110px; float:right; } *FYI, element.style is the css element which comes up when you click on the iframe code supplied by twitter in firebug. So, I simply added a comma after element.style and added the div id of the element I wanted to edit which in this case was: #tweet_after_content. For some reason this works and the settings save properly. element.style, #tweet_after_content { bottom: 35px; height: 20px; position: relative; width: 110px; float:right; } @Simon, that's because I was editing at the time I probably had deleted the changes when you looked, while I searched for a solution. Anyway, problem solved. :) Thanks.

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  

×