Всплывающее ajax окно профиля пользователя для DLE

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Всплывающее ajax окно профиля пользователя для DLE

Красивое всплывающее ajax окно профиля пользователя хак для DLE как видно на картинке, если нравится такой вариант то вы сможете это легко установить на любую версия движка DataLife Engine. Так как настройки не критичный. Чем то напоминает Twitter всплывающие (ajax) окна. Мне захотелось сделать подобные для Dle. Благодаря знаниям HTML/CSS, сделать подобные модальные окна для DataLife Engine. Немного повозившись со стилями в engine.css, я все-таки сделал это!

Красивое всплывающее ajax окно профиля пользователя для DLE


Установка:
Открываем файл engine.css и удаляем все что находится между строчками:

/*---Диалоговые и всплывающие окна jQuery UI---*/.ui-helper-clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }Тут стили... бла бла бла.ui-menu .ui-menu-item a.ui-state-active {    font-weight: normal;    margin: -1px;}


И заменяем все вот этим:

/*---Диалоговые и всплывающие окна jQuery UI---*/.ui-dialog, .ui-button { -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }.ui-widget-overlay { background: #000; opacity:0.4; -moz-opacity:0.4; filter:alpha(opacity=40); left: 0; position: absolute; top: 0; }.ui-helper-clearfix:after { clear: both; content: "."; display: block; height: 0; visibility: hidden; }.ui-helper-clearfix { display: inline-block; }* html .ui-helper-clearfix { height: 1%; }.ui-helper-clearfix { display: block; }.ui-icon { background-repeat: no-repeat; display: block; overflow: hidden; text-indent: -99999px; }.ui-widget-header { color: #fff; font-weight: bold; }.ui-widget-header a { color: #fff; }.ui-widget-header .ui-icon { background-image: url("../images/ui-icons.png"); }.ui-state-hover .ui-icon, .ui-state-focus .ui-icon { background-color: #000; }.ui-icon-close { background-position: -80px -128px; }.ui-icon-closethick { background-position: -96px -128px; }.ui-dialog { background: url("../images/spacer.png");  overflow: hidden; padding: 5px; position: absolute; width: 300px;    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);}.ui-dialog .ui-dialog-titlebar { padding: 5px 0 5px 7px; position: relative; }.ui-dialog .ui-dialog-title { float: left; margin: .1em 13px .3em 0;}.ui-dialog .ui-dialog-titlebar-close {position:absolute;cursor:pointer;top:3px;right:3px;width:19px;height:19px;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;background:rgba(0,0,0,0.3);}.ui-dialog .ui-dialog-titlebar-close:hover {background:rgba(0,0,0,0.6);color:#fff;}.ui-dialog .ui-dialog-titlebar-close:active {background-image:none;color:#999;}.ui-dialog .ui-dialog-titlebar-close span { display: block; margin: 1px; }.ui-dialog .ui-dialog-content {    background: none;    border: 0;    overflow: hidden;    padding:13px;    position: relative;    zoom: 1;    background-color: #fff;    -webkit-border-top-left-radius: 3px;    -webkit-border-top-right-radius: 3px;    -moz-border-radius-topleft: 3px;    -moz-border-radius-topright: 3px;    border-top-left-radius: 3px;    border-top-right-radius: 3px;}.ui-dialog .ui-dialog-buttonpane {    background: #fff;    padding: 13px;    text-align: left;    -webkit-border-bottom-right-radius: 3px;    -webkit-border-bottom-left-radius: 3px;    -moz-border-radius-bottomright: 3px;    -moz-border-radius-bottomleft: 3px;    border-bottom-right-radius: 3px;    border-bottom-left-radius: 3px;}.ui-dialog .ui-dialog-buttonpane button {    cursor: pointer;    float: right;    line-height: 1.4em;    margin: 0 2px;    overflow: visible;    padding: .2em .6em .3em .6em;    width: auto;}.ui-button {border: 1px solid #bcc5c9;width: 106px; height: 31px;margin-bottom: 2px;cursor: pointer;background-color: #39D;background-image: url(../images/bg-btn-blue.gif);background-position: 0 0;border-color: #39D #39D #28C;color: white!important;text-shadow: -1px -1px 0 #39D;-moz-box-shadow: 0 0 5px #28c;-webkit-box-shadow: 0 0 5px #28c;}.ui-button:hover{background-position:0 -210px!important;}.ui-button:active{background-image:none;}button.ui-button span { cursor: pointer; display: block; }.ui-widget input, .ui-widget textarea {    background: #fff url("../images/fields.png") repeat-x; border: 1px solid #bcc0c2;}.ui-state-error {    background: #fef1ec 50% 50% repeat-x !important;    border: 1px solid #cd0a0a;    color: #cd0a0a;}.ui-draggable .ui-dialog-titlebar { cursor: move; }


Так же не забываем про стили profile_popup.tpl (Не знаю как у вас, но у меня вот так. ЭТО НЕ ОБЯЗАТЕЛЬНО):

/*---Userinfo---*/.userinfo { padding-left: 125px; }    .userinfo .lcol { margin-left: -125px; width: 110px; padding-right: 15px; }        .userinfo .lcol .popavatar { position:absolute; margin-bottom: 10px; padding: 2px; background-color: #fff; border: 1px solid #c0d4de; top:15px; left:15px;}            .userinfo .lcol .avatar img { width: 100px; }        .userinfo .lcol ul { font-size: 0.9em; }    .userinfo .rcol { width: 100%; }        .userinfo .rcol ul { list-style: none; margin-left: 0; }        .userinfo .rcol ul li { margin-bottom: 0.2em; }


Ну и конечно же сам profile_popup.tpl:

 <div class="userinfo">        <div class="lcol">            <div class="popavatar" style="margin: 0;">[img]{foto}[/img]</div>        </div>        <div class="rcol">            <ul class="reset">                <li>Полное имя: <b>{fullname}</b></li>                <li>Группа: {status}</li>                <li>Дата посещения: <b>{lastdate}</b></li>                <li>Дата регистрации: <b>{registration}</b></li>                <li>Публикаций: <b>{news_num}</b> [ {news} ][rss][img=|rss]{THEME}/images/rss.png[/img][/rss]</li>               <li>Комментариев: <b>{comm_num}</b> [ {comments} ]</li>            </ul>        </div>        <div class="clr"></div></div> 

«Автор:»Artpax
Версия dle: 9.0-9.3
Тестировалось: 9.4

Наш www.dle9.com советуем dle хаки скачать красивое всплывающее ajax окно профиля пользователя для DLE
  • 100
Рубрика: DLE хаки » Хак для DLE
Ранее » Хак Dle альтернативный спойлер для сайта« Далее Dle Информер погоды на сайте от mail ru
Добавление комментарияОставить комментарий
  • № :4
  • 16 октября 2015 17:13
Получилось очень красиво! Спасибо.
  • № :3
  • 23 января 2015 06:43
Цитата: dle9
Цитата: JohnSurnet
не возможно скопировать код!!!

а по подробней ???? Непонятное сообщение

сори разобрался всё нормально!
А можно вопрос не в тему?
  • № :2
  • 23 января 2015 06:35
Цитата: JohnSurnet
не возможно скопировать код!!!

а по подробней ???? Непонятное сообщение
  • № :1
  • 23 января 2015 02:10
не возможно скопировать код!!!