Темізація форми входу на сайті. Робота із файлами user-login-block.tpl.php і template.php

Темизация входу на сайт Друпал как изменить вход на сайт як змінити форму входу регистрации блок авторизации
Оцінка матеріалу: 
Average: 4.4 (5 votes)

Стандарті шаблони Друпала за замовчуванням мають на своїх сторінка виведений блок із формою авторизації, однак вигляд такої форми теж є стандартним і не відзначається дизайнерським виглядом. Сьогодні ми розглянемо досить актуальну тему, а саме: як змінити блок входу і надати йому належного вигляду. В Друпалі темізація (чи стилізація, як кому більше подобається) відбувається за допомогою окремих файлів, які потім формують той чи інший елемент. В нашому випадку нам знадобляться два файла: user-login-block.tpl.php і template.php. Перший відповідає за сам блок входу (задаємо в ньому потрібні нам поля), а в другому можна переоприділити стандартні функції Drupal під потрібний шаблон. 

Оскільки ми створювали свій власний шаблон з нуля і ще не вивели наш блок, тому розпочнемо із створення нового регіона. Як саме це робити можна почитати у цьому уроці. Я виведу його одразу під меню.

Темизация входу на сайт Друпал как изменить вход на сайт як змінити форму входу регистрации блок авторизации

*назву блоку можна змінити в його налаштуваннях: Структура » Блоки 

Створюємо файл user-login-block.tpl.php і прописуємо вміст блоку:

<div class="block block-user" id="block-user-0">
    
    <form id="user-login-form" method="post">
        
        <div class="form-item" id="edit-name-wrapper">
            
            <input class="form-text required" id="edit-name" maxlength="50" name="name" placeholder="введіть логін" size="25" type="text" value="" /></div>
        
        <div class="form-item" id="edit-pass-wrapper">
            
            <input class="form-text required" id="edit-pass" maxlength="50" name="pass" placeholder="введіть пароль" size="25" type="password" /></div>
        
        <div class="submit">
            
            <input class="form-submit" id="edit-submit" name="op" type="submit" value="Ввійти" /> <input id="edit-user-login-block" name="form_id" type="hidden" value="user_login_block" /></div>
        
        <div class="link ">
            <a href="/user/register" title="Create a new user account.">Зареєструватись</a>
            <a href="/user/password">Відновити пароль</a>
        </div>
        </form>
</div>

Для того, щоб Друпал при створюванні форми входу на сайт підтягував наш шаблон, необхідно написати наступний код в template.php нашої теми:

function datatagtemplate_theme(){ // No theme function defined for user login block
return array(
// Register theming function, it's user login block and not user login form
'user_login_block' => array(
'arguments' => array('form' => NULL),
// Template file, ex: user-login-block.tpl.php
'template' => 'user-login-block',
),
);
}

*Файл template.php потрібно створити і помістити в корінь теми. Починатися він має з тегу <?php, закриваючий тег не потрібен!

Очищаємо кеш і обновляємо сторінку. Тепер наша форма змінила свій вигляд. Більшість уроків на цьому закінчуються, однак для нас цього мало і порібно ще підправити CSS форматування і зробити нашу форму входу відповідною до нашого дизайну. Добавляємо у файл style.css наступний код:

#edit-name-wrapper, #edit-pass-wrapper{
    display:inline-block;
    color:#fff;
}

.form-item input{
    box-shadow:inset 0 0 3px #333;
    height:20px;
    display:inline-block;
    position:relative;
    font-family: 'Comfortaa', cursive;
}

.link a{
    color:#000;
    display:inline-block;
    position:relative;
    font-size:70%;
    letter-spacing:1px;
}

.link a:hover{
    color:maroon;
}

.link a, .submit{
    display:inline-block;
    position:relative;
}

.submit input{
    padding:1% 130%;
    background:none;
    border:2px solid #000;
    cursor:pointer;
    box-shadow:0 0 3px #333;
}

.submit input:hover{
    background:rgba(255,255,255,.5);
}

Після темізації, наш блок набуває потрібного вигляду

Темізація форми входу на сайті. Робота із файлами user-login-block.tpl.php і template.php