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

[MrShyr]

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

Для начала хотел бы выразить благодарность форуму и его пользователям
которые в 90% моих специфических вопросах, не оставляют даже комментариев с трололо :redlol: И дают мне возможность разобраться во всем самому... Так же отдельное спасибо 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 код:

<?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 );