Мы в твиттере Мы в телеграме!

Провеббер » DataLife Engine » DLE хаки » Новые модальные окна для DLE by Artpax

Набор в команду! Ведется набор в команду, для наполнения сайта новым, интересным контентом. Если у тебя есть предложения, свободное время, ты обладаешь интересным контентом, и хочешь поделиться с другими?
Обращайся к нам в ЛС группы Вконтакте.

Новые модальные окна для DLE by Artpax

Данный материал предоставлен сайтом ProWebber.cc исключительно в ознакомительных целях. Администрация не несет ответственности за его содержимое.
Скачать бесплатно Новые модальные окна для DLE by Artpax.

Новые модальные окна для DLE by Artpax


Название: Модальные окна для DLE 9.x
Автор: Artpax (www.artpax.ru)
Версия DLE: 9.x
Тестировалось: на DataLife Engine 9.4

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

Установка:
[hidden=1,2,20]
Открываем файл 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; }


/* ==================== Автозаполнение облака тегов */
.ui-autocomplete { position: absolute; cursor: default; }

* html .ui-autocomplete { width:1px; } /* without this, the menu expands to 100% in IE6 */

.ui-menu {
    list-style:none;
    padding: 2px;
    margin: 0;
    display:block;
    float: left;
}
.ui-menu .ui-menu {
    margin-top: -3px;
}
.ui-menu .ui-menu-item {
    margin:0;
    padding: 0;
    zoom: 1;
    float: left;
    clear: left;
    width: 100%;
}
.ui-menu .ui-menu-item a {
    text-decoration:none;
    display:block;
    padding:.2em .4em;
    line-height:1.5;
    zoom:1;
}
.ui-menu .ui-menu-item a.ui-state-hover,
.ui-menu .ui-menu-item a.ui-state-active {
    font-weight: normal;
    margin: -1px;
}

Так же не забываем про стили 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 src="{foto}" alt=""/></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} ]</li>
                <li>Комментариев: <b>{comm_num}</b> [ {comments} ]</li>
            </ul>
        </div>
        <div class="clr"></div>
</div>
[/hidden]
Не забываем скачать файл с картинками(см. ниже)
[hidden=1,2,20]
Скачать с Depositfiles
[/hidden]
P.S там есть картинка spacer.png, без неё окно не будет черного цвета. Если попросит заменить, лучше сделать это, иначе будет смотреться некрасиво.
Вроде бы ничего не забыл smile Если что-то не получается отпишитесь, я исправлю...
[color=#33CC00]Не забываем стукнуть в репу!!


С уважением, Artpax.


Дополнительные ссылки на скачивание ТОЛЬКО для зарегистрированных


+1
Просмотры: 8 340 :: Комментарии (39) :: :: Нужна помощь? Задайте вопрос на форуме ::
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

#1Heon

  • 24 октября 2011 08:11
  • Регистрация: 13.02.2010
  • Был(а) онлайн: 31.08.2022
  • Комментариев: 109
  • -1
Зря спрятал,хоть мне и не надо но я бы глянул демо.

--------------------

#2kRicha

  • 24 октября 2011 09:21
  • Регистрация: 17.04.2010
  • Был(а) онлайн: 18.05.2021
  • Комментариев: 124
  • -1
в чем новшество модальных окон? Или это лишь измененные стили?

--------------------

#3Evan

  • 24 октября 2011 10:30
  • Регистрация: 23.11.2009
  • Был(а) онлайн: 21.07.2024
  • Комментариев: 35
  • -1
HIDE the numbers too much?

--------------------

#4Artpax

  • 24 октября 2011 11:38
  • Регистрация: 10.01.2011
  • Был(а) онлайн: 29.06.2014
  • Комментариев: 60
  • +1
Heon,
Демо на скрине, смотреть надо. smile

serGUCCI,
Правила читал? Хайд не обсуждается! Делал сам, своими ручками, вот и поставил такой хайд.
Evan,
Хоть ты и не понимаешь русский, Опять спи..дишь с pw и выставшь на своем турецком сайте.. dash

kRicha,
Новость заново прочитай пожалуйста. Я там сказал, что не я сдела новшество, а Твиттер. Я лишь стили стандартных окон DLE поменял.

#5Artpax

  • 24 октября 2011 12:06
  • Регистрация: 10.01.2011
  • Был(а) онлайн: 29.06.2014
  • Комментариев: 60
  • +1
Кстати, может кто-то не заметил... Черная рамка полупрозрачная, а белый фон нет.
Демо можно увидеть в твиттере, там подобные окна.

#6Aleal616

  • 24 октября 2011 14:33
  • Регистрация: 20.01.2010
  • Был(а) онлайн: 13.03.2021
  • Комментариев: 74
  • +1
serGUCCI

+1

#7shvack

  • 24 октября 2011 14:37
  • Регистрация: 20.02.2010
  • Был(а) онлайн: 26.06.2022
  • Комментариев: 64
  • +1
serGUCCI,
Там немного не такой, но основа стиля (черная прозрачная рамка) выполнена.

#8Sander

  • 24 октября 2011 15:23
  • Регистрация: 19.02.2010
  • Был(а) онлайн: 20.04.2021
  • Комментариев: 327
  • +1
Вот специально пишу 20ый комментарий, чтобы увидеть, что же там за код такой...

А вообще есть конструктор jQueryUI, в нем создается внешний вид, в dle потом обновляются стили и картинки. Все...

--------------------

#9Artpax

  • 24 октября 2011 15:50
  • Регистрация: 10.01.2011
  • Был(а) онлайн: 29.06.2014
  • Комментариев: 60
  • +1
serGUCCI,
Надо же на жизнь как-то зарабатывать smile
Sander,
Там стили.
На моем персональном блоге тоже можно скачать, там хайд поменьше

#10ovesti.ru

  • 24 октября 2011 16:23
  • Регистрация: 31.08.2011
  • Был(а) онлайн: 9.10.2023
  • Комментариев: 81
  • +1
Цитата: serGUCCI
вот практически тоже самое _tp://relizz.com/dle/huks/751-novyy-vid-modalnogo-okna-ajax-dle-9x.html (не реклама)

Правильно Сергей говорит! И чем Ваш код отличается от моего, установленного здесь: ovesti.ru ? (тоже не реклама), просто изобретение велосипеда.

#11z1z

  • 24 октября 2011 16:30
  • Регистрация: 10.10.2010
  • Был(а) онлайн: 22.11.2015
  • Комментариев: 50
  • +1
ИМХО. Мне пофиг на материал. Меня раздражают попрошайки

Не забываем стукнуть в репу!!


Пользователи сами разберутся стукнуть за работу в репу или по репе.
Ей богу ставил бы минусы за это.

--------------------

#12Artpax

  • 24 октября 2011 16:32
  • Регистрация: 10.01.2011
  • Был(а) онлайн: 29.06.2014
  • Комментариев: 60
  • +1
ovesti.ru,
Я вас уверяю! Я даже НЕ заглядывал вы css код вашего модального окна! Тем более я не утверждаю, что это изобретение велосипеда, так сказать его модификация, улучшения вида! Я старался сделать данное ajax окно как на Twiiter и у меня в мыслях не было использовать что-то чужое.

#13victor200

  • 24 октября 2011 17:25
  • Регистрация: 30.01.2010
  • Был(а) онлайн: 14.04.2015
  • Комментариев: 145
  • +1
на tp://relizz.com/dle/huks/751-novyy-vid-modalnogo-okna-ajax-dle-9x.html тоже самое так что считаю человек решил заработать как можно, но это уже пройденый этат сожелению.......

#14Тимур

  • 24 октября 2011 18:51
  • Регистрация: 24.08.2011
  • Был(а) онлайн: 8.02.2014
  • Комментариев: 75
  • +1
Кто ни будь может в ЛС скинуть ?

#15Artpax

  • 24 октября 2011 19:00
  • Регистрация: 10.01.2011
  • Был(а) онлайн: 29.06.2014
  • Комментариев: 60
  • +1
serGUCCI,
Отлично! Буду теперь выкладывать гнилые темы
elis0280,
На блоге есть

#16victor200

  • 24 октября 2011 19:32
  • Регистрация: 30.01.2010
  • Был(а) онлайн: 14.04.2015
  • Комментариев: 145
  • +1
накрылся сайт флудильня задавила его, вот что значит не прислушиваться к словам людей

#17Artpax

  • 24 октября 2011 19:40
  • Регистрация: 10.01.2011
  • Был(а) онлайн: 29.06.2014
  • Комментариев: 60
  • +1
victor200,
Ты про что?

#18Basil_CHe

  • 24 октября 2011 22:27
  • Регистрация: 27.09.2011
  • Был(а) онлайн: 13.02.2016
  • Комментариев: 94
  • +1
serGUCCI,
+1. даже и ставить не хотел - интересно глянуть как и остальным, а тут хайт и началось обсуждение афтора а не материала ph34r

--------------------

#19strong-Flesh

  • 24 октября 2011 22:27
  • Регистрация: 28.01.2011
  • Был(а) онлайн: 31.10.2011
  • Комментариев: 21
  • +1
Да что вы на парня наехали. Написано же что окна переделанные под DLE. Он НЕПИСАЛ ЧТО СОЗДАЛ НОВЫЕ!! Читайте описание.
Они подогнаны под DLE из твитера.
Кому не нравится идите лесом.
Artpax, молодец хорошо постарался.

#20Alexey270588

  • 25 октября 2011 00:47
  • Регистрация: 1.10.2010
  • Был(а) онлайн: 30.04.2017
  • Комментариев: 79
  • +2
Не хочется показаться грубым, но это пиздец ужас... Делов на 10 минут с кофе и сигаретой... а тут еще хайд... хахахахах

1 2
Предыдущая    Следующая
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.

Архив новостей
Ноябрь 2024 (9)
Октябрь 2024 (169)
Сентябрь 2024 (13)
Август 2024 (60)
Июль 2024 (12)
Июнь 2024 (30)

Последние комментарии: