Делаем симпатичную reCAPTCHA в Stress Web 13.12.12

[MrShyr]

И снова здравствуйте!

Для начала хотел бы выразить благодарность форуму и его пользователям
которые в 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 и заменяем все примерно на такой вот код:

Немного кода:

Свернуть ↑

<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

Совсем чудок:

Свернуть ↑

.ctr {
	text-align: center; 
	padding: 5px 10px 5px 0px; 
}

Свернуть ↑Развернуть ↓

Ну вот и вроде бы все. Смотрим и радуемся своей reCAPTCHA.

З.Ы. Да я не php программист, да я мог упустить какие либо важные моменты, но к ним я быть может вернуть чуть позже, но поставленная цель была выполнена, и новая общая стилизация reCAPTCHA была впилена во все модули, и отлично показывает себя в работе. Просто поделился, спасибо за внимание.