Kosten
Вторник, 01 Марта 2016, 23:18 | Сообщение 1
Давайте разберемся, как можно вывести, сразу 2 формы входа, это для локальных пользователей и для uID пользователя. Сам код есть, но на тестовом сайте только мог вывести социальные кнопки. Что то пробовал, но получилось, да как нужно, но вижу что не так, так как стили не шли под пароль и логин, вообщем не так как на изображение. То что сделал и работает нормально, то для uID пользователей. Установка: Сам код кнопки или надписи входа:Код
<a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);">Вход</a>
Теперь нужно установить само окно в котором будет содержаться форма входа, что поставил в низ сайта.
Код
<div class="kanavas-body"></div> <div class="kanavas-okno"> <div class="kanavas-fon"><a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);" title="Закрыть окно" style="text-decoration:none; outline:none;"><div class="kanavas-close"></div></a></div> <div class="kanavas_pad_body"><div class="body_pad">$LOGIN_FORM$</div> </div> <div class="kanavas-foother"><a href="javascript://" onclick="$('.kanavas-okno, .kanavas-body').fadeToggle(1000);" style="text-decoration:none; outline:none;"><span class="kanavas-zakrit">Закрыть</span></a></div> </div>
Идем в пользователи и находим надпись форму входа и там заменяем полностью код на этот.
Код
<div class="log_form"> <?if($ERROR$)?><div colspan="2" style="color:red;text-align:center;">$ERROR$</div><?endif?> <div class="email_v"><div class="ewLabel">E-mail:</div><input class="loginField" type="text" name="user" value="" size="20" style="width:100%;" maxlength="50"/></div> <div class="pass_v"><div class="ewLabel">Пароль:</div><input class="loginField" type="password" name="password" size="20" style="width:100%" maxlength="15"/></div> <div id="ewTemporalSession"><input id="rem$PAGE_ID$" type="checkbox" name="rem" value="1" checked="checked"/><label class="label_left" for="rem$PAGE_ID$">запомнить</label> <?if($PAGE_ID$="login" && $HIDDEN_ALLOWED$)?> <input id="hid$PAGE_ID$" type="checkbox" name="hidden" value="1" /><label for="hid$PAGE_ID$">скрытый</label><?endif?></div><input style="color: #4285f4;" class="loginButton" name="sbm" type="submit" value="Вход"/></div> <div id="ewRemindPassword"><a href="javascript://" rel="nofollow" onclick="new _uWnd('Prm','Напоминание пароля',300,130,{autosize:1,maxh:300,minh:100,closeonesc:1,modal:1},{url:'/index/5'});_uWnd.findparent(this).close();return false;">Забыли пароль?</a> | <a href="$REGISTER_LINK$">Регистрация</a></div> <div class=""> <h2>Войти с помощью :</h2><div style="padding-top: 15px;"><?if($LOGIN_UID$)?>$LOGIN_UID$<?endif?><?if($LOGIN_FB$)?>$LOGIN_FB$<?endif?><?if($LOGIN_VK$)?>$LOGIN_VK$<?endif?><?if($LOGIN_GOOGLE$)?>$LOGIN_GOOGLE$<?endif?><?if($LOGIN_YANDEX$)?>$LOGIN_YANDEX$<?endif?><?if($LOGIN_TWITTER$)?>$LOGIN_TWITTER$<?endif?></div> </div>
Этот стиль ставим в CSS:
Код
/*okno*/ .kanavas-body {background: rgba(0,0,0,0.7); width:100%; height:100%; position:fixed; left: 0px; top: 0px; z-index: 21001;display:none;} .kanavas-okno {background:#fff; position:fixed; top: 10%; left:30%; z-index: 21002; width:500px; height:auto; border-radius:9px; box-shadow: 0 0 10px 1px rgba(0,0,0,0.3); display:none;} .kanavas-fon {background: url(http://zornet.ru/SKRIPT/dsar/74129.jpg)no-repeat center; background-size: 100%; border-top-left-radius:7px; border-top-right-radius:7px; width:500px; height:100px;} .kanavas-close {background:url(http://zornet.ru/SKRIPT/dsar/fresal/close_ajax.png) no-repeat; width:24px; height:24px; float:right; margin:10px 10px 0 0; opacity: 0.5;} .kanavas-close:hover {opacity: 1.0; cursor:pointer;} .kanavas_pad_body {background:#fff; width:500px; height:auto;} .kanavas-foother {background:#f3f3f3; width:460px; height:auto; padding:20px; border-bottom-left-radius:7px; border-bottom-right-radius:7px; text-align:center;} .kanavas-zakrit {background: #1F5B88; border-radius:20px; color:#fff; font-size:14px;top: 40px; text-shadow:0 -1px 0 rgba(0, 0, 0, .2); text-align:center; box-shadow: 0 1px 1px rgba(0, 0, 0, .1); padding:8px 30px; opacity: 0.8;} .kanavas-zakrit:hover {opacity: 1.0;} .body_pad {padding: 25px 55px;} /****/ /*login*/ div#uidLogButton {display: none;} div#baseLogForm {display:block !important;} .email_v {height: 60px;} .pass_v {height: 60px;margin-top: 18px;} .ewLabel {position: relative;display: block;text-align: left;line-height: 25px;color: #646464;font-weight: 100;font-size: 14px;margin-bottom: 8px;} #ewTemporalSession {position: relative;display: block;width: 100%;height: 33px;padding: 20px 0px 5px 0px;} .label_left {float: left;} .loginButton {width: 100%;} #ewRemindPassword {text-align: center;padding: 15px 0px 15px 0px;;} /*****/ button, input[type="button"], input[type="submit"], input[type="reset"]{border:none; color: #4285f4;padding: 10px 19px;font-size:14px;display: inline-block;overflow:hidden; background:#f2f6fa;text-align:center;font-weight: bold;border-radius:10px; -webkit-transition: 0.25s;-moz-transition: 0.25s;-o-transition: 0.25s;transition: 0.25s;cursor: pointer;} button:hover, input[type="button"]:hover, input[type="submit"]:hover, input[type="reset"]:hover {overflow:hidden;background:#e6eef5;text-align:center;border-radius:10px;} input[type=submit]:active , .button:active , input[type=button]:active , input[type=reset]:active , button:active , .tov_desc .goodsbutton:active { -webkit-box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.14);box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.14);border-radius:10px;background:#e6eef5;padding-top:10px;padding-bottom:10px;} input[type=checkbox]:not(checked) {position: absolute;opacity: 0;} input[type=checkbox]:not(checked) + label {position: relative; padding: 0 0 0 60px;} input[type=checkbox]:not(checked) + label:before {content: '';position: absolute;left: 2px;width: 36px;height: 14px;border-radius: 13px;background: #e6e6e6;line-height: 14px;vertical-align: middle;border-radius: 8px;margin: 2px 0;} input[type=checkbox]:not(checked) + label:after {content: '';position: absolute;left: 2px;width: 22px;height: 22px;border-radius: 10px;background: #4285f4;box-shadow: 0 2px 5px rgba(0,0,0,.3);transition: all .2s; /* анимация, чтобы чекбокс переключался плавно */;width:20px;height:20px;overflow:hidden;float:left;margin-left:-1px;margin-top:-3px;-webkit-transition:all ease .3s;transition:all ease .3s;border:1px solid #4285f4;-webkit-box-shadow:0 0 1px rgba(0,0,0,.05);-moz-box-shadow:0 0 1px rgba(0,0,0,.05);box-shadow:0 0 1px rgba(0,0,0,.05)} input[type=checkbox]:checked + label:before {background: #bfd9ed;} input[type=checkbox]:checked + label:after {margin-left: 16px;}
Страна: (RU )
FeStemBer
Среда, 02 Марта 2016, 00:34 | Сообщение 2
На сайте, где это окно было взято, такая форма входа, думаю не стоит оригинал копировать, а что то сделать свое.
Страна: (RU )
Maryges
Среда, 02 Марта 2016, 18:39 | Сообщение 3
Но это нужно какой то оригинальный сайт по дизайну, чтоб такое окно которое на 80% закрывает сайт, нет простым обойдусь.
Сообщение отредактировал Maryges - Среда, 02 Марта 2016, 18:39
Страна: (RU )
Scheme
Четверг, 03 Марта 2016, 01:17 | Сообщение 4
Под социальный раздел, будет нормально и много место не займет и оригинально смотреться.
Страна: (RU )
feliksteg
Вторник, 10 Мая 2016, 18:41 | Сообщение 5
Смотрится очень оригинально, но не когда не поставил бы, но сами представьте окно на весь монитор. Здесь если и уста наплевать, то изображение нужно другое, чтоб нормальное окно появлялось. Или вообще вы вести на страницу.
Страна: (RU )