В рамках федеральной программы по развитию полезных навыков и чувства меры в среде нашего чатика, при поддержке министерства простых решений этот пост.
Для удовлетворения жажды по улучшайзингу наших ресурсов на 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;
}Готово.ЗЫ. Несмотря на простоту затеи, она хороша для новобранцев, в ней всего в меру, сразу очевидна логика, а где нет, там гуглится или обсуждается )
