k2 social plugin

hi,

the facebook text "Be the first of your friends to like this." is overlapping.

How can I change this thing ?css ? which file ?

thanks

If your site is online can you please provide a link. Thank you.

See you around...

Hi ! Thanks for the reply. No the website is not live, its hosted on localhost using wamp server.

I've attached an even bigger screenshot, I hope this helps. The problem lies in the social media plugin embedded within the left column of the template. I couldn't find which file to edit.

using chrome's inspect element, I see this line ...

Code: Select all

<span class=​"connect_widget_not_connected_text">​Be the first of your friends to like this.​</span>​

I'd like to fix the width of the wordings of the "like" button to within the column...

Also, how can I change the width settings of the "Latest from Adrian Lim" listing ? I'd like to make it full width, filling up the whole right column (white) of the k2 component...

Regards,

Adrian

For authors related item full width, use below in "templates/gk_templatename/css/override.css" file.
Make sure enable CSS override feature from Template settings > Advanced Settings > Css Override.

Code: Select all

div.itemRelated, div.itemAuthorLatest { width: 100%; }


As for Facebook like button text i am afraid unless your users are logged into facebook or your site they will see that text as minimum width requirements of the button is 225px and because it is loading from Facebook's website itself in an iframe we cannot override the css, however you can use like button with a balloon same as tweet button without a text.

To try you need to edit one file. See following instructions.
Find File: \templates\gk_postnote\html\com_k2\default\item.php
Find Line: 250 which is below.

Code: Select all

                        <div class="fb-like" data-send="false" data-width="160" data-show-faces="false"></div>


To have button with baloon replace it with below

Code: Select all

                        <div class="fb-like" data-send="false" data-width="160" data-layout="button_count" data-show-faces="false"></div>


To have recommend button instead of like button replace with below.

Code: Select all

                        <div class="fb-like" data-send="false" data-width="160" data-layout="button_count" data-action="recommend" data-show-faces="false"></div>


Once you get hits on your article from facebook, numbers will start displaying.

See you around...

hi norman,

Thank you very much. what you posted helped tremendously !

Regards,

Adrian

No problem at all.

See you around...