Centre "Like" area and remove small line? (Penscratch theme)

majamalmcrona · Member · Jul 15, 2016 at 8:12 am
Copy link

Add topic to favorites
Hey guys!

I’m having trouble with a few things in my blog design. First of all, I’m trying to centre the entire “Like” area in the bottom of each post.

This is how it looks right now: https://majaelsas.files.wordpress.com/2016/07/0before.png

And I want it to look something like this:
https://majaelsas.files.wordpress.com/2016/07/0after.png

Secondly, there is a small, small line right above the Twitter button that I’m trying to remove, but can’t find the code for it (you can see it in the before picture above as well).

Does anyone have a clue of how to do this? I would be immensely thankful, kind of ripping out my hair over this at the moment, hehe.

Thank yooooou so so so much!

Maja

The blog I need help with is: (visible only to logged in users)
thesacredpath · Member · Jul 15, 2016 at 6:40 pm
Copy link
Hi there, the likes are in an iframe, and it is virtually impossible to change positioning cleanly on them. We can get it to look centered at a certain window width, but at a wider or more narrow width, it would not look centered.

This will hide the line above the twitter icon in the sharing section.
```
div.sharedaddy h3.sd-title::before {
    border: none;
}
```
majamalmcrona · Member · Jul 18, 2016 at 6:49 am
Copy link
Heeyyaaa!

That worked perfectly to remove the line! Thank you thank you thank you!

About the Like buttons, hmmm. How would it look if we tried to center them (even though I understand it wouldn’t be perfect)?
thesacredpath · Member · Jul 18, 2016 at 6:58 pm
Copy link
Add this to the very bottom of your custom CSS and see what you think. I’ve set a max-width of the like section at 90% since I can’t center align stuff within that div, changed the “position” to inherit and then used auto for the left and right margins to center that div. If there are less likes on a post, it isn’t going to appear centered.
```
div.sharedaddy.sd-like-enabled .sd-like .post-likes-widget {
    position: inherit;
    margin-left: auto;
    margin-right: auto;
    max-width: 90%;
}
```
majamalmcrona · Member · Jul 18, 2016 at 7:32 pm
Copy link
That worked! I see what you mean about it not being *completely* centered but that’s okay, it looks so much better nonetheless. Thank you so, so much for your help! Topic resolved! :) :)
thesacredpath · Member · Jul 18, 2016 at 7:37 pm
Copy link
Hooray and you are welcome!

No items found.