CODEWITHSUNDEEP
javascripthtmlcssiframeblogger
John Xc
John Xc

Reputation: 79

Is blogger iframe comment form restricted from customization?

I am a beginner in messing with codes... I was trying to customize blogger comment form. I traced the elements with chrome, I found a Iframe src to a html file of only the blogger comment form. From the comment form source html, I found an external css link with all the css I need to customize.

However I found empty src in my template. If I edit the host and edit the HTML file as I mentioned above, (with edited css link) will I be able to customize the iframe css? Or is it restricted (with tokens?) by blogger?

Or, is there any way to overwrite the css with javascript/jquery?

(can't post link to the source, the link is huge and stackoverflow won't let me)

Upvotes: 1

Views: 2007

Answers (3)

Lyddark
Lyddark

Reputation: 81

I've seen some Blogger templates with a refined iframe comment form... So I thought it was possible... Actually, it's a new (I mean refreshed becaused maybe it exists since a long time) comment form skin from Blogger.

Maybe it could help some people, so here is the trick :

1) Make sure you're curretly using Blogger Template version 2, otherwise, update it with this code line on top of your template (be careful because this add some css to widget and section class which could messed up our design) :

<html b:version='2' class='v2' expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'>

2) add these code lines right before </b:skin> tag in your Blogger HTML Editor

/* Variable definitions ====================
<Group description="New Comment Required – Dont edit">
  <Variable name="body.background" description="Body Background" type="background" color="#000" default="#000 none repeat scroll top left" value="#000 none repeat scroll top left" />
  <Variable name="body.font" description="Font" type="font" default="normal normal 14px Arial, sans-serif" value="normal normal 14px Arial" />
  <Variable name="body.text.color" description="Text Color" type="color" default="#222" value="#222222" />
  <Variable name="body.text.font" description="2" type="font" default="$(body.font)" value="normal normal 14px Arial, sans serif" />
  <Variable name="posts.background.color" description="6" type="color" default="#fff" value="#ffffff" />
  <Variable name="body.link.color" description="7" type="color" default="#ffa015" value="#ffa015" />
  <Variable name="body.link.visited.color" description="8" type="color" default="$(body.link.color)" value="#ffa015" />
  <Variable name="body.link.hover.color" description="9" type="color" default="$(body.link.color)" value="#ffa015" />
  <Variable name="blog.title.font" description="10" type="font" default="$(robotoBold45)" value="$(robotoBold45)" />
  <Variable name="blog.title.color" description="11" type="color" default="#fff" value="#ffffff" />
  <Variable name="header.icons.color" description="12" type="color" default="#fff" value="#ffffff" />
  <Variable name="tabs.font" description="13" type="font" family="$(body.font.family)" size="$(body.font.size)" default="700 normal $(size) $(family)" value="700 normal $(size) $(family)" />
  <Variable name="tabs.color" description="14" type="color" default="#ccc" value="#cccccc" />
  <Variable name="tabs.selected.color" description="15" type="color" default="#fff" value="#ffffff" />
  <Variable name="tabs.overflow.background.color" description="16" type="color" default="$(posts.background.color)" value="#ffffff" />
  <Variable name="tabs.overflow.color" description="17" type="color" default="$(posts.text.color)" value="#222222" />
  <Variable name="tabs.overflow.selected.color" description="18" type="color" default="$(posts.title.color)" value="#212121" />
  <Variable name="posts.title.color" description="19" type="color" default="#212121" value="#212121" />
  <Variable name="posts.title.font" description="20" type="font" default="$(robotoBold22)" value="$(robotoBold22)" />
  <Variable name="posts.text.font" description="21" type="font" default="$(body.text.font)" value="normal normal 14px &#39;roboto&#39;, sans-serif" />
  <Variable name="posts.text.color" description="22" type="color" default="$(body.text.color)" value="#222222" />
  <Variable name="posts.icons.color" description="23" type="color" default="#ffa015" value="#ffa015" />
  <Variable name="labels.background.color" description="24" type="color" default="$(sidebar.backgroundColorTopHD)" value="$(sidebar.backgroundColorTopHD)" />
</Group>
*/

NB: You can easily customize colors & fonts there (original Blogger accent color is #ffa015)

3) Replace all data:post.commentFormIframeSrc with data:post.commentFormIframeSrc + &quot;&amp;skin=contempo&quot; + data:variantParam

Tadam... no need anymore to lose time trying some iframe customization.

Upvotes: 0

user1574812
user1574812

Reputation:

If I understood, it's possible. Edit: But doesn't work cross-domain. Maby for security reasons.

First, you should read this link http://benvinegar.github.com/seamless-talk/

Then, How to apply CSS to iframe?

Upvotes: 0

Pevara
Pevara

Reputation: 14310

You have no access to the styling of an iframe. You have to see this as another browser window in your page. Css on your page will not affect it, and you can not access it with javascript. That's the disadvantage of iframes...

Upvotes: 1

Related Questions