1

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)

Pshemo
  • 122,468
  • 25
  • 185
  • 269
John Xc
  • 79
  • 2
  • 10
  • I cannot understand a single word in this question. Could you perhaps rephrase your request? –  Aug 03 '12 at 17:47
  • ok...edited a bit..I am trying to customize default comment form by blogger (ex. http://www.blogger.com/comment-iframe.g?blogID=3182654348320158113&postID=2707988649824087202&blogspotRpcToken=982365#%7B%22color%22%3A%22rgb(102%2C%20102%2C%20102)%22%2C%22backgroundColor%22%3A%22rgb(0%2C%200%2C%200)%22%2C%22unvisitedLinkColor%22%3A%22rgb(59%2C%20179%2C%20224)%22%2C%22fontFamily%22%3A%22Consolas%2C%20monospace%22%7D) – John Xc Aug 03 '12 at 18:00

3 Answers3

1

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...

Pevara
  • 14,242
  • 1
  • 34
  • 47
0

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?

Community
  • 1
  • 1
  • Thanks for the links. Though having hard time understanding them. Can you give me a very short, simple example? – John Xc Aug 03 '12 at 19:42
  • It will not work in your case. Trick doesn't work for cross-domain. –  Aug 03 '12 at 20:35
0

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.

Lyddark
  • 61
  • 2