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

Всплывающее 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]/templates/Default/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

Наш dle9.com советуем dle хаки скачать красивое всплывающее ajax окно профиля пользователя для DLE

ajax_window.rar [31,6 Kb] (cкачиваний: 329)
  • 100

Комментарии 4

Rumpelshtilts от 16 октября 2015 17:13
Получилось очень красиво! Спасибо.
JohnSurnet от 23 января 2015 06:43
Цитата: dle9
Цитата: JohnSurnet
не возможно скопировать код!!!

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

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

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

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent