- Совместимость с XenForo
- 1.0
- 1.1
- 1.2
- 1.3
- 1.4
- 1.5
Создаём новогоднюю атмосферу на форуме.
Добавим падающий снежок и снеговика в сугробе в нижней части экрана, который при клике на него, будет полностью показываться.
Маленькое отступление, рекомендую делать все изменения через ТМС (модификацию шаблонов), но здесь для простоты, будет описан способ с правкой шаблонов.
И так приступим, загружаем содержимое из каталога upload.
Затем открываем шаблон page_container_js_body и в самый низ добавляем.
Дальше открываем шаблон EXTRA.css.
И добавляем такой код.
Если у Вас уже подключён сторонний падающий снег, то
для вывода снеговика достаточно добавить код в EXTRA.css, приведённый выше.
И в шаблон page_container_js_body в самый низ добавить такой код.
Добавим падающий снежок и снеговика в сугробе в нижней части экрана, который при клике на него, будет полностью показываться.
И так приступим, загружаем содержимое из каталога upload.
Затем открываем шаблон page_container_js_body и в самый низ добавляем.
Код:
// Подключаем падающий снежок
<script type="text/javascript" src="js/snowmen/jQuery.snow.min.js"></script>
// Конец подключения падающего снежка
// Настройки падающего снега и показа снеговика при клике
<script>
$(window).load(function(){
$(document).ready( function(){
$.fn.snow({
minSize: 5,
maxSize: 25,
newOn: 350,
flakeColor: '#FFF'
});
$('.snowman').click(function() {
$(this).toggleClass('expanded');
});
});
});
</script>
<div class="snowBackground"></div>
<div class="snowman"></div>И добавляем такой код.
Код:
.snowBackground {
background: transparent url(styles/snowmen/snow-bg.png) bottom left repeat-x;
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 40px;
z-index: 99;
}
.snowman {
width: 187px;
height: 108px;
background: url(styles/snowmen/snowman.png) 0 0 no-repeat;
position: fixed;
bottom: 0;
right: 50px;
z-index: 9;
transition: all 500ms ease-in-out;
cursor: pointer;
}
.snowman.expanded {
background-position: 0;
height: 235px;
}для вывода снеговика достаточно добавить код в EXTRA.css, приведённый выше.
И в шаблон page_container_js_body в самый низ добавить такой код.
Код:
// Показ снеговика при клике
<script>
$(window).load(function(){
$(document).ready( function(){
$('.snowman').click(function() {
$(this).toggleClass('expanded');
});
});
});
</script>
<div class="snowBackground"></div>
<div class="snowman"></div>
