CODEWITHSUNDEEP
postthemestumblrsocial-media-like
John Gonzales
John Gonzales

Reputation: 11

Tumblr like button on posts cannot be re-positioned?

I'm using this code from ThinkingStiff

http://like-button.tumblr.com/

I don't understand how to re-position it.

I tried to reposition it on this theme http://f1rst5.tumblr.com/ But when I click on the like button it re-positions itself again.

Upvotes: 1

Views: 400

Answers (2)

bjnvnen
bjnvnen

Reputation: 181

When the button is not pressed its class is my-like, after pressing it the class changes to my-liked. Therefore, in your CSS you define the styles for my-like and my-liked, each.

In the example site you provided the my-liked class has its styling set like this:

margin-left: -5px;
margin-top: -251px;

If that is your problem with positioning, then just take these lines out and the button will stay in the same place regardless of being pressed or not.

Either way, if you set a certain style for one of these classes, you have to set it to the other one as well if you want to keep that styling in both the pressed and not-pressed states.

(I hope that's what you meant in your question)

Upvotes: 0

red-o-alf
red-o-alf

Reputation: 3225

From the page you linked:

Then cut-and-paste the following button code into your theme where you want your like button to be (this must be inside your {block:Posts}{/block:Posts} block).

It can be anywere between {block:Posts} and {/block:Posts}. Inside those tags you may find, headers(h1,h2,..., tags), paragraphs(p), Images(img), and so on. Depending on where you place it, i.e. before or after a paragraph or an image, the button will get its position.

If you need to reposition it even more accurately, maybe the easiest way is to create a table in the tumblr visual editor (it should have one) so you have more control on the layout of the content. For example with a table you can have | text | image | likebutton_code | so that you are not limited to above-or-below-something positioning but you can also have inline positioning.

Hope this helps.

Upvotes: 0

Related Questions