3 replies to this topic

[ripcord]

Привет!
 
В рамках федеральной программы по развитию полезных навыков и чувства меры в среде нашего чатика, при поддержке министерства простых решений этот пост.
 
Для удовлетворения жажды по улучшайзингу наших ресурсов на Jbzoo вовсе не обязательно сразу накатывать 6990 строк стилей нового фрэймворка. Если заниматься чем-то таким, безопаснее начать с мелочей вроде этой:
 

 
 
Тут у нас системные сообщения, всплывающие сверху, они не изменяют пропорции и отображение остальных элементов страницы, их не пропустишь, а закрываются кликом.
Потестить можно тут:

ripcord.ru/

Кому интересно, вот пошаговый мануал.
 
По аналогии находим и редактируем файл из папки целевого шаблона:

ripcord.ru/templates/protostar/index.php

Нам нужна строка

<jdoc:include type="message" />

которую мы дополняем до и после следующим образом:

...
<div id="systmsg-wrap">
<div id="systmsg" onclick="this.className='hit';">

<jdoc:include type="message" />

</div>
</div>
...

В файл по соседству

ripcord.ru/templates/protostar/css/jbzoo.css

добавляем

#systmsg-wrap
{
    position: fixed;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
}
#systmsg.hit
{
    transform: translate3d(0,-60px,0);
    -webkit-transform: translate3d(0,-60px,0);
}
#systmsg
{
    transition: transform 200ms;
    -webkit-transition: -webkit-transform 200ms;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    z-index: 1;
    margin: 0 auto;
    display: table;
    width: auto;
}
#systmsg .alert
{
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    -webkit-box-shadow: 0 2px 40px rgba(0,0,0,.4);
    box-shadow: 0 2px 40px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
#systmsg H4
{
    display: none;
}
#systmsg A
{
    pointer-events: none;
    font-weight: normal;
}
#systmsg P
{
    white-space: nowrap;
    margin: 0;
    padding: 0 20px;
}
#aside LI
{
    position: relative;
    z-index: 1;
}

Готово.
 
 
ЗЫ. Несмотря на простоту затеи, она хороша для новобранцев, в ней всего в меру, сразу очевидна логика, а где нет, там гуглится или обсуждается )

[ripcord]

Если кто-то затруднится повторить, учитывая, что шаблоны могут отличаться, в случае неразберихи пишите сюда не раздумывая, зарулим на "раз", не вопрос )))

Edited by ripcord, 11 November 2013 - 04:42.

[i001]

отличное решение +1

[ripcord]

Скорее больше хохма )

Но подобные приемы не нужно забывать, иначе скороспелые фрэймворки зохватят все корованы, не успеем обернуться )

Edited by ripcord, 11 November 2013 - 10:26.