Ограничена ли форма комментариев блога iframe настройкой?
Я новичок в работе с кодами... Я пытался настроить форму комментариев блоггера. Я проследил элементы с помощью Chrome, я нашел Iframe src в html-файле только в форме комментариев блоггера. В html-источнике формы комментариев я нашел внешнюю ссылку css со всеми css, которые мне нужно настроить.
Однако я нашел пустой SRC в моем шаблоне. Если я отредактирую хост и отредактирую HTML-файл, как я упоминал выше, (с отредактированной ссылкой css) я смогу настроить iframe css? Или это ограничено (с токенами?) Блоггером?
Или есть ли способ перезаписать CSS с помощью javascript / jquery?
(не могу опубликовать ссылку на источник, ссылка огромна, и stackru не позволит мне)
2 ответа
У вас нет доступа к стилю iframe. Вы должны увидеть это как еще одно окно браузера на своей странице. Css на вашей странице не повлияет на него, и вы не можете получить к нему доступ с помощью JavaScript. Это недостаток фреймов...
Я видел несколько шаблонов Blogger с усовершенствованной формой комментариев iframe... Так что я подумал, что это возможно... На самом деле, это новый (я имею в виду обновленный, потому что, возможно, он существует уже давно) скин формы комментариев от Blogger.
Возможно, это могло бы помочь некоторым людям, так что вот уловка:
1) Убедитесь, что вы в настоящее время используете шаблон Blogger Template версии 2, в противном случае обновите его этой строкой кода поверх вашего шаблона (будьте осторожны, потому что это добавляет некоторый CSS в widget
а также section
class, который может испортить наш дизайн):
<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) добавьте эти строки кода прямо перед </b:skin>
в HTML-редакторе Blogger
/* 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 'roboto', 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. Здесь вы можете легко настроить цвета и шрифты (исходный цвет акцента Blogger #ffa015
)
3) Заменить все
data:post.commentFormIframeSrc
с участием
data:post.commentFormIframeSrc + "&skin=contempo" + data:variantParam
Тадам... больше не нужно терять время на настройку iframe.
Если я понял, это возможно. Изменить: но не работает междоменный. Маби по соображениям безопасности.
Во-первых, вы должны прочитать эту ссылку http://benvinegar.github.com/seamless-talk/
Тогда, как применить CSS к iframe?