I would like to ask how can I, or if it is even possible to customise css of facebook comments box. I have tried this CSS, but it didnt work.
.fb_iframe_widget, .fb_iframe_widget span, .fb_iframe_widget span iframe[style] {
width: 100% !important;}
Is it even possible to modify the comments box?
Thanks for any reply.
No, that is not possible. Those plugins render as an iframe that loads its content from a different domain, so you don’t have access to it via your own JavaScript or CSS.
The settings mentioned in the documentation are the only way for you to configure how this plugin behaves and looks, https://developers.facebook.com/docs/plugins/comments/#settings
Related
I have no experience on any programming or webdesign but I had to revise a free html5 template for our website and I tried to add facebook plugin on it, the social plugin works fine in desktop version but width is static in mobile version, I have read other answers such as:
Is it possible to set a fluid width for Facebook's social plugins?
but I do not know where to add below codes recommended by other members.
.fb-comments, .fb-comments iframe[style], .fb-comments span {
width: 100% !important;
}
here is our website: www.olympfitness.mn/4
Please tell us how we get it work on either desktop and mobile version, thank you and sorry for the broken english.
You can directly add the code from here https://www.addthis.com/dashboard#gallery/ for social share and like.
#recaptcha_area, #recaptcha_table {
width: 280px !important;
}
default width of captcha is 318px. I want to decrease its size to 280px.
But my css code is not working.
Well your question is proberbly too broad because you did not tell which captcha software you are using and how your html does look like.
Just some general hints:
If you use recaptcha (which I guess by the css classes) you cannot customize the captcha, because it loads a iframe which you cannot control or modify. This behavior is caused by the same orgin policy, which prevents accessing pages from other domains.
The only hack I could guess is using the zoom attribute, but I'm not sure and I never tried it on iframes.
Alternative you could try using transform:scale(x) which should work, however I never got good results with transform yet.
Inspired by this HTML newsletter, I decided to incorporate some keyframes animations in a MailChimp template. The animation itself works great locally, but when it's uploaded to MailChimp the #keyframe rules and the % are stripped out. It goes from this...
#keyframes fadein {
0% { opacity:0 }
100% { opacity:1 }
}
... to this ...
0 { opacity: 0 }
100 { opacity:1 }
It looks like MailChimp isn't parsing it and stripping elements out. I haven't had much luck searching MailChimp support for any info regarding this. Has anyone found a clever way of working around this?
You can use CSS3 animations with Mailchimp by putting the required CSS in an external CSS file e.g.
<link rel="stylesheet" href="https://example.com/email/style.css">
I've successfully done this with a number of email campaigns and they look good on iPhone, iPad and Macs.
MailChimp states that CSS should be inline or might be at risk of being stripped out:
http://kb.mailchimp.com/article/the-css-in-my-campaign-is-not-working-or-is-getting-stripped/
Don't place CSS inside the HEAD tags in HTML Email.
When you code a web page, you traditionally place the CSS code in between the HEAD tags, above your content. But when HTML emails are viewed in browser-based email apps (like YahooMail!, Gmail, Hotmail, etc), those applications strip out the HEAD and BODY tags by default.
We recommend you place your CSS code inline to your content (note: browser-based email apps also strip out your BODY tag, so any background colors or BODY settings should be handled with a 100% wide TABLE "wrapper" around your email).
They have a Automatic CSS-inliner feature:
http://www.mailchimp.com/kb/article/how-does-the-css-inliner-work
MailChimp has a list of CSS selectors that are supported in email clients found here:
http://templates.mailchimp.com/resources/email-client-css-support
also client specific styles:
http://templates.mailchimp.com/development/css/client-specific-styles
Just had it confirmed by MailChimp support; they currently don't support that degree of customisation and any unsupported code is automatically stripped out by their editor. Shame.
I'm coding a responsive website and it is the first time that I'm using Facebook Comments tool. Everything is correct except when I access it on mobile.
Facebook Comments generates a new stylesheet for mobile. I'm looking for some code that disables or ignore this new stylesheet.
Screenshots...
- on desktop
- on mobile
You can add CSS of your own to over ride the FB css and make the comments box responsive. Just add this to your CSS
.fb-comments, .fb-comments iframe[style] {max-width: 100% !important;}
Got it! To disable the stylesheet for mobile, we must insert a new attribute (mobile="false") in HTML code.
<div class="facebook_comments">
<div class="fb-comments" data-href="http://example.com" data-mobile="false"></div>
</div>
Thanks a lot!
\o/
Go to the following link and give me idea how to do this thing in word-press.Here is link http://www.coursesearch.unimelb.edu.au/#/?PathId=16&List=interests
all boxes are written in the html, they are then hidden with display: none and set dislay: vsible with anchor tags. e.g. a link item sets display:visible whatever other box you decide. This is jquery by the way, not a plugin, no a wordpress, not a cms issue.