И так начнём наш с вами разбор полётов, в функции добавления комментария ucoz, для начало нам следует установить системную переменную которая отвечает за вывод капчи:
теперь давайте посмотрим на исходных код на странице с добавлением комментария:
<input class="securityCode" name="code" size="7" maxlength="6" style="padding: 4px; font-size: 20px;" type="text">
<input name="seckey" value="7833866941497361519" type="hidden">
<img alt="" style="margin: 0pt; padding: 0pt; border: 0pt none; cursor: pointer; vertical-align: top;" id="secuImgC" title="Обновить код безопасности" onclick="this.src='http://demo-dm.ucoz.ru/secure/?k=7833866941497361519;m=addcom59088503;tm='+Math.random();" src="http://demo-dm.ucoz.ru/secure/?k=7833866941497361519;m=addcom59088503;tm=1334565466" align="absmiddle">
<img alt="" src="http://s59.ucoz.net/img/ma/refresh.gif" style="cursor: pointer;" onclick="document.getElementById('secuImgC').src='http://demo-dm.ucoz.ru/secure/?k=7833866941497361519;m=addcom59088503;tm='+Math.random();" title="Обновить код безопасности" border="0" align="absmiddle">
и что мы с вами видим, код, код и ещё раз код, но в данном коде нам с вами необходимы два значения:
class="securityCode" - класс поля для ввода символов капчи
id="secuImgC" - идентификатор изображение капчи
также мы видим изображение стрелок, которые обновляют наш с вами код, я считаю, что он лишней в данной функции, так как символы на изображении также обновляются когда вы кликните на него стрелкой мыши.
И так для того чтобы у нас с вами всё получилось, нам следует поместить системную переменную капчи в контейнер div, с нужным нам идентификатором id="panel_bottom":
<div id="panel_bottom">$SECURITY_CODE$</div>
а теперь приступим к css стилям, спрячем с глаз долой все изображения в данном ячейки div:
#panel_bottom img {
display:none; /* - удаляем элемент из документа */
}
как вы понимаете мы также спрятали и само изображения капчи, но нам на помощь приходит идентификатор id="secuImgC" которому мы пропишем следующие значения:
#secuImgC {
margin:0!important; /* - запрещаем внешние отступы */
float:left!important; /* - выравниваем элемент */
display:inline!important; /* - элемент отображается как встроенный */
border: 1px solid #E0E0E0!important; /* - рамка вокруг изображения */
}
отлично, теперь займёмся самим полем капчи и пропишем классу class="securityCode" следующие стили:
.securityCode {
color:#777!important; /* - цвет текста */
margin:0!important; /* - запрещаем внешние отступы */
float:left!important; /* - выравниваем элемент */
height:25px!important; /* - прописываем высоту поля с учётом внутренний отступов в 5px */
padding: 5px 5px 5px 5px!important; /* - внутренние отступы */
background:#f9f9f9!important; /* - фон поля */
border: 1px solid #E0E0E0!important; /* - рамка вокруг изображения */
border-right:none!important; /* - запрещаем отображение правой линии рамки */
}
вот мы и получили с вами кроссбраузерную приятную для восприятия ваших пользователей капчу.
Теперь пожеланию мы можем добавить псевдо-класс :focus, для отображение тени в поле капчи:
/* - добавляем внутреннюю тень поля */
.securityCode:focus {
box-shadow:inset 0px 1px 3px #c3c3c3!important;
-webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important;
-moz-box-shadow:inset 0px 1px 3px #c3c3c3!important;
}
и так разбор полётов почти закончен, но я считаю, что его следует дополнить кнопкой добавить комментарий и так в html код к системной переменной вывода капчи, мы добавляем кнопку с прописанным классом class="kn_dobavit":
<div id="panel_bottom">
$SECURITY_CODE$
<input type="submit" class="kn_dobavit" name="submit" value="Добавить комментарий">
</div>
Теперь давайте пропишем следующие css стили:
.kn_dobavit {
font:11px Verdana,Arial,Helvetica, sans-serif; /* - шрифт и его размер */
text-shadow: 1px 1px 1px #333; /* - тень у текста */
float:right!important; /* - выравниваем элемент */
color:#fff!important; /* - цвет текста */
margin:0!important; /* - запрещаем внешние отступы */
height:37px!important; /* - прописываем высоту поля с учётом внутренний отступов в 5px */
padding: 0px 10px 0px 10px!important; /* - внутренние отступы */
background:#535B64!important; /* - фон поля */
border: 4px solid #DFDFDF!important; /* - рамка вокруг изображения */
}
.kn_dobavit:hover {
background:#3E444B!important; /* - фон поля */
}
Вот теперь все элементы мозаики соединены воедино, давайте взглянем на конечный css код:
/* Разбор палётов (КАПЧА)
------------------------------------------*/
#panel_bottom img {
display:none; /* - удаляем элемент из документа */
}
#secuImgC {
margin:0!important; /* - запрещаем внешние отступы */
float:left!important; /* - выравниваем элемент */
display:inline!important; /* - элемент отображается как встроенный */
border: 1px solid #E0E0E0!important; /* - рамка вокруг изображения */
}
.securityCode {
color:#777!important; /* - цвет текста */
margin:0!important; /* - запрещаем внешние отступы */
float:left!important; /* - выравниваем элемент */
height:25px!important; /* - прописываем высоту поля с учётом внутренний отступов в 5px */
padding: 5px 5px 5px 5px!important; /* - внутренние отступы */
background:#f9f9f9!important; /* - фон поля */
border: 1px solid #E0E0E0!important; /* - рамка вокруг изображения */
border-right:none!important; /* - запрещаем отображение правой линии рамки */
}
/* - добавляем внутреннюю тень поля */
.securityCode:focus {
box-shadow:inset 0px 1px 3px #c3c3c3!important;
-webkit-box-shadow:inset 0px 1px 3px #c3c3c3!important;
-moz-box-shadow:inset 0px 1px 3px #c3c3c3!important;
}
/* - кнопка добавить комментарий */
.kn_dobavit {
font:11px Verdana,Arial,Helvetica, sans-serif; /* - шрифт и его размер */
text-shadow: 1px 1px 1px #333; /* - тень у текста */
float:right!important; /* - выравниваем элемент */
color:#fff!important; /* - цвет текста */
margin:0!important; /* - запрещаем внешние отступы */
height:37px!important; /* - прописываем высоту поля с учётом внутренний отступов в 5px */
padding: 0px 10px 0px 10px!important; /* - внутренние отступы */
background:#535B64!important; /* - фон поля */
border: 4px solid #DFDFDF!important; /* - рамка вокруг изображения */
}
.kn_dobavit:hover {
background:#3E444B!important; /* - фон поля */
}
Примечания:
В данном css коде я использовал значения !important; так как:
- во-первых, в html коде капчи администраторы uCoz вписали свои css стили
- во-вторых, в шаблон сайта автоматически прописывается ссылка на системный css стили uCoz, которые мы не можем удалить.
Также в данном примере я использовал стандартный Тип кода безопасности.
Надеюсь многие из вас сделают для себя определённые выводы из данного разбора полётов, спасибо за внимание!
06:13
