1. НОВОГОДНЯЯ АКЦИЯ от TRINIXY.org

    Успей приобрести статусы VIP и PREMIUM

    по низкой цене

     

    Подробнее о VIP  Подробнее о PREMIUM

  2. Получи VIP аккаунт БЕСПЛАТНО!

    Участвуй в нашем Конкурсе

     

    Принимай участие! Не стой в стороне!

Скрыть объявление
Гость, Не пропусти КОНКУРС! ПОДРОБНЕЕ>>>

Альтернатива стандартной форме входа Dle

Тема в разделе "Модули DLE", создана пользователем element, 21.11.16.

Trinixy.org - зарабатывай с нами!
  1. element

    element VIP Проверенные Эксперт

    160
    110
    [​IMG]

    Представляю вашему вниманию альтернативную форму входа для Dle + небольшой мини профиль.
    Информация

    1. Форма тестировалась на Dle 10.0-11.1
    2. Все окна появляются с анимацией
    3. Легкая установка

    Внимание! Для того, чтобы появились кнопки для входа через соц. сети - у вас должна быть сделана специальная настройка в панели управления сайтом.

    Автор: Артем Малков
    Url модуля: Скрытый контент. Для просмотра Вы должны быть зарегистрированным участником. (Здесь более подробно расписана установка + есть видео демонстрация, что в итоге должно получиться)

    Установка

    1. Открываем файл login.tpl вашей темы, и все заменяем на это
    Код:
    [not-group=5]
    <div class="login_mal profiles">
    <div class="top_border_proff"></div>
    <div class="you_name">{login}</div>
    <div class="you_group">Группа: {group}</div>
    <div class="ava_position"><img src="{foto}" alt="{login}" class="ava"><div class="online"></div></div>
    <div class="border_miniprof"></div>
    <div class="menu_prof">
    <div><a href="{profile-link}">Персональная страница</a></div>
    <div><a href="{pm-link}">Личные сообщения&nbsp;&nbsp;+{new-pm}</a></div>
    <div><a href="{favorites-link}">Мои закладки</a></div>
    </div>
    <div class="border_miniprof"></div>
    <a href="{logout-link}" class="logout">выход</a>
    <div class="top_border"></div>
    </div>
    <div class="overlay"></div>
    [/not-group]
    [group=5]
    <div class="login_mal">
    <form method="post" action="">
    <div class="top_border"></div>
    <div class="rocket"></div>
    <input type="text" class="login" name="login_name" id="login_name">
    <input type="password" class="password" name="login_password" id="login_password">
    <ul class="login_button">
    [vk]<li class="vk"><a href="{vk_url}"></a></li>[/vk]
    [facebook]<li class="fb"><a href="{facebook_url}"></a></li>[/facebook]
    <li class="log_in"><input type="submit" value="Войти"></li>
    </ul>
    <div class="clears"></div>
    <div class="footer_login">
    <div class="bottom_border"></div>
    <ul>
    <li class="for_pass"><a href="{lostpassword-link}">Забыли пароль?</a></li>
    <li class="register">Нет аккаунта? <a href="{registration-link}">Регистрация</a></li>
    </ul>
    </div>
    <input name="login" type="hidden" id="login" value="submit" />
    </form>
    </div>
    <div class="overlay"></div>
    [/group]
    <a href="javascript://" id="open_modal">[group=5]Авторизоваться[/group][not-group=5]Открыть профиль[/not-group]</a>
    <script>
    $( "#open_modal" ).click(function() {
    $('.login_mal').addClass('md-content');
    $('.overlay').css({'display':'block'});
    });
    $( ".overlay" ).click(function() {
    $('.login_mal').removeClass('md-content');
    $(this).css({'display':'none'});
    });
    </script>
    
    В файл стилей, в самый конец:

    Код:
    .login_mal {
    font-family: arial;
    width: 340px;
    height:560px;
    margin:auto;
    background: #fafaff;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    position: fixed;
    top:0;
    right: 0;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(20%);
    -moz-transform: translateY(20%);
    -ms-transform: translateY(20%);
    transform: translateY(20%);
    opacity: 0;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    z-index: 1200;
    }
    .login_mal a {
    text-decoration: none
    }
    .login_mal a:hover {
    text-decoration: underline;
    }
    .profiles {
    height: 445px;
    }
    .top_border {
    background: #ff6900;
    height: 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    .top_border_proff {
    background: #fcfcff;
    height: 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    .bottom_border {
    background: #a0bec6;
    height: 5px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    }
    .rocket {
    background: url('../img/rocket.png') no-repeat center center;
    width: 136px;
    height: 110px;
    margin:66px 0 0 113px
    }
    .login {
    width: 190px;
    height: 50px;
    border:0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #b2d4dc url('../img/login.png') no-repeat;
    background-position:13px 12px;
    margin: 65px auto 0 auto;
    display: block;
    padding: 0 17px 0 53px;
    font-size:15px;
    color: #fff;
    font-weight: bold;
    font-family: arial
    }
    .password {
    width: 190px;
    height: 50px;
    border:0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    background: #3e6372 url('../img/password.png') no-repeat;
    background-position:10px 12px;
    margin: 20px auto 0 auto;
    display: block;
    padding: 0 17px 0 53px;
    font-size:15px;
    color: #a7b3bc;
    font-weight: bold;
    font-family: arial
    }
    .login_button {
    list-style-type: none;
    margin: 40px auto 0 auto;
    padding: 0;
    width: 260px
    }
    .login_button li {
    display: block;
    float: left;
    }
    li.vk a {
    width: 60px;
    height: 50px;
    display:block;
    background: #507299 url('../img/vk.png') no-repeat center center;
    -webkit-border-top-left-radius: 4px;
    -webkit-border-bottom-left-radius: 4px;
    -moz-border-radius-topleft: 4px;
    -moz-border-radius-bottomleft: 4px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    }
    li.vk a:hover {
    background: #486a90 url('../img/vk.png') no-repeat center center;
    cursor: pointer;
    }
    li.fb a{
    width: 60px;
    height: 50px;
    display:block;
    background: #3b5998 url('../img/fb.png') no-repeat center center;
    -webkit-border-top-right-radius: 4px;
    -webkit-border-bottom-right-radius: 4px;
    -moz-border-radius-topright: 4px;
    -moz-border-radius-bottomright: 4px;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    }
    li.fb a:hover {
    background: #304d8a url('../img/fb.png') no-repeat center center;
    cursor: pointer;
    }
    .log_in {
    float: right !important;
    width: 120px
    }
    .log_in input {
    width: 120px;
    height: 50px;
    background: #ff6900;
    border:0;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
    font-weight: 700
    }
    .log_in input:hover {
    background: #ec6201;
    cursor: pointer;
    }
    .footer_login {
    height: 65px;
    background: #b2d4dc;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 39px 0 0 0
    }
    .footer_login ul{
    list-style-type: none;
    margin: 18px 0 0 0;
    padding: 0 24px;
    }
    .for_pass {
    float: left;
    padding: 3px 0 0 0;
    }
    .for_pass a {
    color: #3e6372;
    font-size: 12px;
    font-weight: 700;
    }
    .register {
    color: #3e6372;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 0 0 0;
    float: right
    }
    .register a {
    color: #ff6900;
    text-transform: uppercase;
    }
    .clears {
    clear:both;
    }
    .md-content {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    }
    .overlay {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1000;
    background: rgba(0,0,0,0.6);
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
    display: none;
    cursor: pointer
    }
    .you_name {
    color: #3e6372;
    font-size: 18px;
    text-align: center;
    font-weight: 700;
    padding: 24px 0 0 0;
    text-transform: uppercase;
    }
    .you_group {
    color: #3e6372 !important;
    font-size: 14px;
    text-align: center;
    padding: 6px 0 0 0;
    font-weight: 400 !important;
    }
    .ava {
    display: block;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    width: 110px;
    height: 110px
    }
    .ava_position {
    margin: 23px auto 28px auto;
    width: 110px;
    position: relative;
    }
    .online {
    width: 11px;
    height: 11px;
    background: #fad920;
    border:5px solid #fff;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    right:-10px;
    top:45px;
    }
    .border_miniprof {
    border-top:1px solid #e1e1e5;
    }
    .menu_prof {
    text-align: center;
    padding: 10px 0
    }
    .menu_prof a {
    color: #3e6372;
    font-size: 14px;
    margin: 5px 0;
    display: inline-block;
    }
    .logout {
    width: 120px;
    height: 50px;
    background: #ff6900;
    color: #fff;
    font-size: 14px;
    text-transform: uppercase;
    display: block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    margin: 31px auto 26px auto;
    font-weight: 700px;
    text-align: center;
    line-height: 50px
    }
    .logout:hover {
    background: #ec6201;
    text-decoration: none !important
    }
    
    3. В папку вашей темы загружаете папку img.
    4. Чистим кеш, установка закончена.
     
    aleks1987 и Cyber нравится это.

    Не знаешь как скачать файлы ?   Не задавай вопросов   -   Смотри видео
  2. Инфо.Бот

    Trinixy.info Trinixy.info

    - Все новые сообщения, проходят модерацию. Читаем - Правила и условия
       (собщения типа спасибо, спс, cool, и т.п., - будут удалятся)
    - Не вижу ссылки на файл. Смотрим видео - Как скачивать файлы
       (сообщения типа "как скачать" или "дайте ссылку" - будут удалятся)
    - Как набрать симпатии? Читать ТУТ
       (симпатии важная вещь у нас на форуме)
    - Хочешь скачивать всё без ограничений? Доступ ТУТ
       (Получи доступ и скачивай все без ограничения!!!)
     
  3. aleks1987

    aleks1987 Проверенные

    137
    47
    Красивая форма входа, вот еще кто нибудь научил верстать шаблоны DLE.
     

  4. Admin Post
    Cyber

    Cyber Admin Команда форума Администратор

    4.686
    1.229
    Зайдите в категорию инфопродукты- там много полезных материалов.
     

Поделиться этой страницей

Загрузка...
Здравствуйте! Кажется, вы используете AdBlock - вам могут быть недоступны некоторые функции. Добавьте, пожайлуйста, нас в исключения или отключите AdBlock. Спасибо за понимание!