Joomla Templates Club 406,261 posts

[phicts Friend phictsJoin date: June 2011Posts: 85Downloads:0Uploads:10 Thanks: 26 Thanked: 3 times in 1 posts]

#170021

How do I line-up the social sharing button horizontally instead of the default vertical display? Where is the file to be modified and what css changes to apply? Please help me. You can see the current actual display at http://chat.com.ph/index.php (please use index.php because the current default page is my Filipino chat rooms using index.html)

I remember reading here a solution for this complete with suggested css modification but I can’t find it now. The one I found that somewhat applies to my case is http://www.joomlart.com/forums/topic/overlapping-read-more-and-facebook-share/ but the moderator did not share the css edits. I also have that overlapping problem when i set some display options in the backend so i want to put the Facebook button last to the right.

Thanks in advance.

---

Attachments:

1. 

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#421401

Hi,
Could you please turn off the css compress mod in template manager ?
Thanks
Viet Vu.

[phicts Friend phictsJoin date: June 2011Posts: 85Downloads:0Uploads:10 Thanks: 26 Thanked: 3 times in 1 posts]

#421405

It’s now set to NO, the default option is LINKED FILES.

Did i follow you correctly? May i know what’s that for? By the way, I prefer editing css by Notepad+ . I first download the file I need to modify then copy the edited one to my local installation to test the result.

Thanks jooservices.

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#421426

Hi,
Please go to plugins/system/jat3/jat3/base-themes/default/css/addons.css
and add this code on the last line
[PHP].ja-retweet-button {
float: left;
}
.gplusone-share-button {
float: left;
}[/PHP]
Regards
Viet Vu,

2 users say Thank You to jooservices for this useful post

1. phicts
2. dieudonne

[phicts Friend phictsJoin date: June 2011Posts: 85Downloads:0Uploads:10 Thanks: 26 Thanked: 3 times in 1 posts]

#421590

Thank you very much jooservices. The edits worked perfectly.

How about placing the Facebook button in line with the rest and placing everything right below the article? Please see attached image. I have no plan of putting the social sharing button after the title or above the article.

---

Attachments:

1. 

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#421599

Hi
Please update thread w/ your FTP access than i can help you to do that.
Thank you
Viet Vu

[phicts Friend phictsJoin date: June 2011Posts: 85Downloads:0Uploads:10 Thanks: 26 Thanked: 3 times in 1 posts]

#421781

Thanks for your offer jooservices but I have already managed to tweak it by myself. You can see the result at http://www.chat.com.ph/index.php after i applied these changes:

1. I set the height and margin of the Facebook part of the Ja Social system plugin to about 25px (height) and 110px (width).
2. I added a bottom margin of 10px for the ja-comment in about line 990 of template.css changing the margin line to 0 10px 10px 0 from 0 10px 0 0.

I do appreciate your effort especially the css additions that lined up the social sharing buttons horizontally. Thank you very much.

[jooservices Friend jooservicesJoin date: October 2014Posts: 8556Downloads:0Uploads:130 Thanked: 1245 times in 1121 posts]

#421793

Glad to hear that 🙂
Thank you
Viet Vu

[Author]

Posts