И снова здравствуйте!
Для начала хотел бы выразить благодарность форуму и его пользователям
которые в 90% моих специфических вопросах, не оставляют даже комментариев с трололо
И дают мне возможность разобраться во всем самому... Так же отдельное спасибо
Kingzor'у который все таки помог мне разобраться с последним, нестандартным, заказным модулем отличающимся от общей структуры, методом тыка правильно вогнать мой код
Выражаю благодарность
finfan'у, который на протяжении уже нескольких суток слушает наше неадекватное общение в групповом чате скайпа
Хотел бы еще передать привет маме, но увы она сидит только в Одноклассниках, LOL.
Что же мы будем делать, а будем мы стилизовать стандартную reCAPTCHA в движке Stress Web 13.12.12, И на выходе мы получим примерно такое.
В общем все началось с того, что сам задался вопросом стилизации и подгонки reCAPTCHA (в движке Stress Web 13.12.12) в более менее симпотный вид. Поиски мои успехом не увенчались, пришлось полагаться на свою смекалку. Данный мини-гайд берет упор только на версию 13.12.12, на других работа не гарантирована.
Шаблон вывода reCAPTCHA как оказалось в конечном итоге получился у меня стандартный для всех модулей, главное вогнать его правильным способом. Короче начнем. Для примера в гайде мы будем использовать стандартный модуль регистрации находящийся по адресу:
.../application/register.php
Не долго размышляя, я полез в стандартный модуль личного кабинета.
А полез я туда из за того, что увидел типовую наработку на главной странички сайта в дефолтном шаблоне, которая при включении системы reCAPTCHA для лк, по клику на изображение "click me" выводила в центр экрана отдельное окошко с reCAPTCHA, таким способом, что в окошке отображалась только символика, а форма ввода использовалась стандартная не от reCAPTCHA. Модуль находится по адресу:
.../module/login.php
И что мы видим:
Свернуть ↑
PHP код:
$tpl->template = '
<style>
#recaptcha_window {display:none; width: 300px; height: 57px; position: fixed; left: 40%; top: 15%; margin: 0 auto; padding: 20px; background: #fff; -webkit-border-radius: 7px; -moz-border-radius: 7px; border-radius: 7px; border: 1px solid; z-index: 999;}
.recaptcha_close {background: url('.HTTP_HOME_URL.'/sysimg/close.png) 0 0 no-repeat; width: 30px; height: 30px; position: absolute; top: -10px; right: -10px; cursor: pointer;}
</style>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".recaptcha_close").click(function(){
$("#recaptcha_window").hide();
});
});
function showRecaptcha(element) {
$("#recaptcha_window").show();
Recaptcha.create("'.$l2cfg["captcha"]["publickey"].'", element, {
theme: "custom",
lang : \'ru\',
custom_theme_widget: \'recaptcha_div\',
callback: Recaptcha.focus_response_field});
}
</script>'.$tpl->template;
$tpl->Block( 'recaptcha' );
$tpl->Set( 'field', "
<div id='recaptcha_div'>
<div id='recaptcha_window'>
<div class='recaptcha_close'></div>
<div id='recaptcha_image'></div>
</div>
<input type='text' id='recaptcha_response_field' name='recaptcha_response_field'>
</div>" );
$tpl->Set( 'code', "<div id='sw1-captcha' class='captcha'><a onclick=\"showRecaptcha('recaptcha_div'); return false;\" href='#'><img src='".HTTP_HOME_URL."/sysimg/click.jpg' alt='code' title='{$lang["reload"]}' border='0' /></a></div>" );
} else {
$tpl->Block( 'recaptcha', false );
Свернуть ↑Развернуть ↓
Вот она самая вкуснятина, то что нам и требовалось!
Немного покрутив, повертев, мне удалось сделать ее более симпатичной, убрать излишества, и вообще снять все то что там было не нужно, в общем код стал выглядеть так:
Свернуть ↑
PHP код:
$tpl->template = '
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js">
</script>
<script type="text/javascript">
function showRecaptcha(element) {
$("#recaptcha_window").show();
Recaptcha.create("'.$l2cfg["captcha"]["publickey"].'",
element, {
theme: "custom",
lang : \'ru\',
callback: Recaptcha.focus_response_field});
}
</script>'
.$tpl->template;
$tpl->Block( 'recaptcha' );
$tpl->Set( 'code',
"
<br>
<div id='' class='captcha'>
<input onclick=\"showRecaptcha('recaptcha_div'); return false;\" class=\"reginp\" value=\"Показать код проверки\" href=''>
</div>
<div id='recaptcha_image'>
</div>
"
);
$tpl->Set( 'field',
"
<br>
<input type='text' id='recaptcha_response_field' name='recaptcha_response_field' class='input' placeholder='Введите код проверки'>
"
);
} else
$tpl->Block( 'recaptcha', false );
Свернуть ↑Развернуть ↓
В общем то это и весь секрет, так сказать готовый универсальный шаблон, который можно использовать во всех модулях SW.
Рассмотрим нами ранее взятый register.php. Ищем в нем 2 строки.
PHP код:
if ( $l2cfg['captcha']['reg'] and $l2cfg['captcha']['reg_type'] == 'recaptcha' ) {
и
PHP код:
if ( count($gsList) > 1 ) {
И все что находится между ними, мы меняем на:
Свернуть ↑
PHP код:
$tpl->template = '
<script type="text/javascript"
src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js">
</script>
<script type="text/javascript">
function showRecaptcha(element) {
$("#recaptcha_window").show();
Recaptcha.create("'.$l2cfg["captcha"]["publickey"].'",
element, {
theme: "custom",
lang : \'ru\',
callback: Recaptcha.focus_response_field});
}
</script>'
.$tpl->template;
$tpl->Block( 'recaptcha' );
$tpl->Set( 'code',
"
<br>
<div id='' class='captcha'>
<input onclick=\"showRecaptcha('recaptcha_div'); return false;\" class=\"reginp\" value=\"Показать код проверки\" href=''>
</div>
<div id='recaptcha_image'>
</div>
"
);
$tpl->Set( 'field',
"
<br>
<input type='text' id='recaptcha_response_field' name='recaptcha_response_field' class='input' placeholder='Введите код проверки'>
"
);
} else
$tpl->Block( 'recaptcha', false );
Свернуть ↑Развернуть ↓
Далее мы идем в макет register.tpl и заменяем все примерно на такой вот код:
Свернуть ↑
Код HTML:
<div class="static">
<div class="stitle">Регистрация аккаунта</div>
<form name="form" method="post" action="" onsubmit="return checkform1(this)">
<table cellpadding="0" cellspacing="0" class="regForm">
<tr>
<td class="ctr"><input type="text" name="l2account" maxlength="14" class="input" placeholder="Введите логин" autofocus></td>
</tr>
<tr>
<td class="ctr"><input type="password" name="l2password1" maxlength="16" class="input" placeholder="Введите пароль"></td>
</tr>
<tr>
<td class="ctr"><input type="password" name="l2password2" maxlength="16" class="input" placeholder="Повторите пароль"></td>
</tr>
<tr>
<td class="ctr"><input type="text" name="l2email" maxlength="50" class="input" placeholder="Действующая почта"></td>
</tr>
[recaptcha]
<tr>
<td class="">{code}</td>
</tr>
<tr>
<td class="ctr">{field}</td>
</tr>
[/recaptcha]
<tr>
<td class="ctr"><input type="submit" name="register" value="Регистрация" class="press" /></td>
</tr>
</table>
</form>
</div>
Свернуть ↑Развернуть ↓
Топаем в стили и для инпута рисуем примерно такой стиль:
Свернуть ↑
Код:
input {
outline: none;
vertical-align: middle;
text-align: center;
color: #cab47f;
background-color: #0E0E0E;
width: 298px;
height: 20px;
font-size: 16px;
font-style: normal;
border: inset 1px #242424;
}
input[placeholder], [placeholder], *[placeholder] {
color:#cab47f !important;
}
Свернуть ↑Развернуть ↓
Для кнопки подтверждения
Свернуть ↑
Код:
.press {
outline: none;
vertical-align: middle;
text-align: center;
color: #cab47f;
background-color: #1F1F1F;
width: 120px;
height: 20px;
font-size: 16px;
font-style: normal;
border: outset 1px #cab47f;
cursor: pointer;
}
Свернуть ↑Развернуть ↓
И простенький стиль ctr
Ну вот и вроде бы все. Смотрим и радуемся своей reCAPTCHA.
З.Ы. Да я не php программист, да я мог упустить какие либо важные моменты, но к ним я быть может вернуть чуть позже, но поставленная цель была выполнена, и новая общая стилизация reCAPTCHA была впилена во все модули, и отлично показывает себя в работе. Просто поделился, спасибо за внимание.