Jump to content


Photo
- - - - -

Positioning Facebook Like + Twitter with CSS


  • Please log in to reply
9 replies to this topic

#1 liverpoolfootballblog

liverpoolfootballblog

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 07 May 2011 - 04:39 AM

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:

Please Login or Register to see this Hidden Content



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?

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 May 2011 - 03:56 PM

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

Please Login or Register to see this Hidden Content


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 (

Please Login or Register to see this Hidden Content

).

#3 liverpoolfootballblog

liverpoolfootballblog

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 07 May 2011 - 04:39 PM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 07 May 2011 - 04:45 PM

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

#5 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 07 May 2011 - 07:36 PM

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

#6 liverpoolfootballblog

liverpoolfootballblog

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 08 May 2011 - 02:17 AM

Those didn't work either.

I'm actually able to move the twitter icon in the firebug control panel using this code:

Please Login or Register to see this Hidden Content


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.

#7 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 08 May 2011 - 02:37 AM

works for me like this:

#8 liverpoolfootballblog

liverpoolfootballblog

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 08 May 2011 - 03:48 AM

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.

#9 Simon_P

Simon_P

    Messer

  • Administrators
  • 8388607 posts
  • LocationDevon
  • Framework Version:2.0
  • Country: Country Flag

Posted 08 May 2011 - 03:53 AM

I dont see any changes to your base.css file, how are you editing it? via FTP?

Please Login or Register to see this Hidden Content



#10 liverpoolfootballblog

liverpoolfootballblog

    Advanced Member

  • Members
  • PipPipPip
  • 49 posts

Posted 08 May 2011 - 04:40 AM

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.