Система авторизации как на лепре/хабре (Social)

Вопросы
Привет, давно хотел спросить, как сделать авторизацию на подобие лепры или хабра. Когда сама авторизация находится на отдельной странице, при этом имеет кастомный бэкграунд.

Пример: лепра


хабр


На социале авторизация представлена в виде маленького окошка, я хочу сделать в идеале как на лепре, чтобы была отдельная страница под авторизацию и каждый раз при обновлении страницы была новая картинка, сейчас же выглядит это дело вот так:

хотелось бы приукрасить, добавить свои картинку(и), это я сделать в состоянии, но вот в php я не силен. Есть только примерное представление, что нужно сделать новый экшен, который бы совмещял в себе страницу регистрации и авторизации, и заменить потом ссылку регистрации/авторизации на этот новый экшен. Или же что то поменять в стандартном, только в css? Может кто то делал нечто подобное? Готов помочь денюжкой если вы мне поможете с реализацией.

49 комментариев

avatar
В Synio css modals.css
см. .modal.modal-login — размеры и положение логина
avatar
Шаблон Social
avatar
Тамже думаю и background можно поменять
avatar
Я полностью переверстал ActionLogin и ActionRegistration для этих целей. Подключил отдельный header, footer, свои css стили. Выглядит примерно так:

avatar
Ммм. Как-то все странно.

Для того, чтобы у вас показывалась отдельная страничка для регистрации и логина, надо в файлике header_top.tpl шаблона убрать у ссылок «зарегистрироваться» и «войти» соответственно классы js-registration-form-show и js-login-form-show тогда при клике пользователи будут переходить на странички /registration/ и /login/ а не видеть модальное окно.

А для того, чтобы сделать свой вид регистрации и входа надо в шаблоне изменять файлики в папке actions/ActionRegistration/ и actions/ActionLogin/. Как минимум index.tpl на свой вкус.
avatar
Большое спасибо! Пойду пробовать, о результатах отпишу)
avatar
Удачи :)
avatar
Отпишитесь о результатах.
avatar
Пока что результат не очень, сделал как сказал kerby убрал изheader_top.tpl классы — модальное окно ушло :)

Далее убрал из ActionLogin/index.tpl футер — {include file='footer.tpl'} но почему при удалении хидера(чтобы не было ничего кроме формы) полностью едет дизайн.

До удаления {include file='header.tpl'}


После удаления {include file='header.tpl'}
avatar
Хэдер.тпл вы удаляете зачем? Там же все подключенные файлы стилей и прочая важная штука.
Вам нужно теперь покопаться в css-файлах и, возможно, создать отдельный стиль для новой страницы \ формы логина и регистрации, либо изменить уже существующий.
avatar
Не знаю, хочу чтобы не было на этой странице навигации, футера, хидера, сайдбара, а только картинка во весь екран с формой.

Правильно ли я понял, что теперь нужно создать например header_auth.tpl для которого сделать стили по аналогии с header.tpl и потом написать в ActionLogin/index.tpl -{include file='header_auth.tpl'}
avatar
Логично. Но проще сделать header.light.tpl, footer.light.tpl (Как более старых версиях LS было), и в них наверстать с нуля.
avatar
header.tpl не удаляем а вернее делаем копию и в копии убираем все не нужное, инклд нав, хеадер топ и так дале, оставляем только стили контента что бы было все ревно, и так же создаем другой футер, что то вроде футре_2тпл, и там удаляем все не нужно и закрываем теги боди, хеад и контента.
avatar
Блин, сделал все как вы сказали, в итоге добился только отсутствие хидера футера, но никак не пойму как теперь сделать ету страницу во весь экран, там много пхп кода, в котором я вообще нифига не понимаю, видимо придется, просить Deniart'a за денюжку сделать такую штуку, и чтобы она была доступна в каталоге. Надеюсь у него есть время и желание)
avatar
А она не во весь экран? что получилось-то? картинку
Так php нет. html js smarty
avatar
*там
avatar


Создал 2 фаила headermin.tpl и footermin.tpl и прописал их в ActionLogin в index.tpl
avatar
ну вот уже полдела сделано, осталось только стилями (CSS) сделать «красиво»
avatar
То есть необходимо сделать белое окно с ActionLogin/index.tpl просто меньше и оцентровать через CSS? Но как это сделать я увы не знаю? Свойства, я смогу найти на htmlbook, но не совсем понимаю как создать правила для ActionLogin и сделать меняющуюся картинку при обновлении, не подскажите в какую сторону копать, а то меня в детстве обделили витаминами походу.
avatar
Если быть более точным, то я не совсем понимаю как, описать в css свойства для Action/login в социале посмотрел css'ку для темы Movie(которую я использую), но не нашел что либо описывающее ActionLogin.
avatar
Как вариант, можно взять с любого сайта из тех, что вы перечислил css файл и посмотреть. Надо будет либо описать другие классы в основных css файлах, либо создать отдельный css-файл, а в шаблоне его подключить.
avatar
Лепровский CSS, его нужно вписать в ActionLogin/Index.tpl? Я сейчас на работе, не посмотреть что к чему.
avatar
Есть доступ к основному сайту, а туда, где это все воплощаю, нет.
avatar
О! Через фаербаг можно wysiwyg осуществить, я тут немного запишу если вы не против :)

#container {
    height: 621px;
    width: 405px;
}
avatar 
lepro
.scroll {
    background: url("/i/login/scroll.png") repeat scroll left top transparent;
    height: 621px;
    left: 50%;
    margin-left: -203px;
    margin-top: -310px;
    position: absolute;
    top: 50%;
    width: 405px;
}


http://leprosorium.ru/i/login/scroll.png
avatar
Вроде потихоньку с помощью фаербага получается



Только остались некоторые ньюансы, куда потом подключать этот новый CSS (На картинке Firebug просмотр в реальном времени)

Как сделать верхнюю часть формы тоже прозрачной? Пока могу предположить что она прописана в самом ActionLogin/index.tpl или где то в стилях.

Как сделать меняющуюся картинку, на случайную по обновлению страници через F5.

P.S. Когда все будет готово выложу в общий доступ)
avatar
страницы
avatar
Потом по пунктам если не трудно, что, где и как меняли.
avatar
Добрый человек, когда у вас получится, на основе данного топика, будьте добры, откройте новый топик, где по порядку будет faq как сделать такое приветственное окно. Спасибо!
avatar

А я вот всё таки добрался у себя и сделал благодаря шаблону Starter Kit. Спасибо его автору.
Правда у меня пока не окончательный вариант. Выдерернул весь ActionLogin, header.light.tpl, footer.light.tpl, ну и из base.css классы облегчённых страниц. Ну и чуть поправил их.
avatar
Непойму где в Social'е описать в ксс примененные изменения либо создать новую ксс только для ActionLogin, пока выходит вот так:
avatar 
<div class="my-login-form">код формы</div>


идем в папку css, открываем любой файл, например base.css
в самом низу:
.my-login-form .class { styles }
  • BMay
  • +1
  • ↓
avatar
Ага, спасибо, там оказалось по такому принципу, но немного не так.
avatar
Потихоньку получается, большое спасибо deniart за помощь в процессе.
avatar
У Вас картинки маленького разрешения. У меня 1920х1080 и уже немало у кого такие мониторы стоят. Поэтому, я думаю, лучше подбирать картинки FullHD.
avatar
Они как раз 1920х1080
avatar
Опера 12.12.
А вот в хроме всё ок.
Заметил, что если в Опере открыть «стрекозу» и закрыть, то картинка становится на весь экран.
avatar
Не пойму почему при загрузке, снизу изображения идут черные полосы, а после нескольких рефрешеф пропадают.
avatar
дома с широким экраном полос нет, на работе есть
avatar
Ребят, так как моих знаний в этой области довольно мало, я создал git репозиторий, может найдется умелец(цы) способный допилить все это до нужного состояния, сейчас готово около 50% под остольнми 50% подразумевается очищение кода от ненужных строк и приведение его в нормальный вид, + допиливания экшена регистрации.
avatar
Чтобы не листать щяс выглядит так, а вот так на лепре
avatar
Обновил репозиторий уже получше видок, вроде пошло дело.
avatar
ты это в плагин бы обернул — был бы вообще сок.
avatar
дело интересное, но что то остановился процесс)
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.