David, I have a problem on my site where the default icon looks too big because I had to make my block skinny: http://collectiboard.com/collectible/5

Is there any way you can make it so that this module somehow allows me to display the icon smaller? It would be awesome if the icon in the "Find us on Facebook" block is exactly the same size as the one in the "Recent Activity" block just above it.

I'm asking you because I noticed you somehow made this module so that it allows more control over another similar module (https://drupal.org/node/1315360, #3), so I thought maybe you know something I don't.

Comments

drozas’s picture

drozas CreditAttribution: drozas commented

Thanks again for the feedback Jay Lee!

I'll copy&paste a similar version of https://drupal.org/node/1315360 in this one, in case someone bumps into the same issue:

About the icon size, the module allows you to set the same attributes especified at https://developers.facebook.com/docs/reference/plugins/like-box/
I have just noticed that there are a couple of them more (force_wall and show_border) so I will prepare a new release with these new attributes when I have some time. However, about the size of the icon itself, it might be possible to override it in your especific theme as a CSS property (I have not tried myself).

I am going to be pretty busy these days (working on a PhD proposal), but I will try to take a look asap. Any patches are very welcome as well!

Cheers,

David

drozas’s picture

drozas CreditAttribution: drozas commented

I have just made a quick test with Firebug, and if I am referring to the same icon, the property should be ._rw (find attached a screenshot). Please let me know if you successfully override it in your own theme.
icon rw property
Hope this helps!

David

jay.lee.bio’s picture

jay.lee.bio CreditAttribution: jay.lee.bio commented

David, thanks for the quick reply. According to my designer, the problem is that CSS can't override anything that's in an iframe. Or maybe not completely, but it definitely cannot be done easily either. I did try the following, which still didn't work:

._rw {
height: 20px !important;
width: 20px !important;
}

P.S. I got the idea for the "!important" piece from https://drupal.org/node/2018123, #1 (I noted that your module automatically solves it at https://drupal.org/node/1315360, #3).

drozas’s picture

drozas CreditAttribution: drozas commented

Hello Jay,

I just wanted to let you know that the new release of FB Likebox (7.x-1.8 - https://drupal.org/node/2024927) includes the new attribute "show_border". According to the Facebook site (http://developers.facebook.com/docs/reference/plugins/like-box/) it has be set to false in order to override the CSS:

"show_border - specifies whether or not to show a border around the plugin, default true. Set to false to style the iframe with your custom CSS."

I am not 100% percent sure if this will solve it anyway (since this is probably affecting only the CSS of the border), but I thought it might be interesting to let you know.

drozas’s picture

drozas CreditAttribution: drozas commented
Status: Active » Closed (works as designed)

I am going to mark this as closed (works as designed), since it seems to be due to a limitation of the Facebook services. Please feel free to re-open it if there is any update at https://developers.facebook.com/docs/reference/plugins/like-box/