DataTagDataTag

Індивідуальний дизайн - Drupal CMS - Доступні ціни

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

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

Стандарті шаблони Друпала за замовчуванням мають на своїх сторінка виведений блок із формою авторизації, однак вигляд такої форми теж є стандартним і не відзначається дизайнерським виглядом. Сьогодні ми розглянемо досить актуальну тему, а саме: як змінити блок входу і надати йому належного вигляду. В Друпалі темізація (чи стилізація, як кому більше подобається) відбувається за допомогою окремих файлів, які потім формують той чи інший елемент. В нашому випадку нам знадобляться два файла: 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