X-Oleg

Местный
Сообщения
588
Симпатии
619
Баллы
93
#1
Всем привет !

Данная статья может-быть полезна новичкам, которые часто задают вопросы "Как передвинуть какой-то элемент", "Как изменить его цвет", "Как изменить ширину блока" и т.д.

1)Для начала скажу, что в XenForo есть огромный функционал настроек стиля, и ещё настройки отображения некоторых плагинов также "скрыты" там, поэтому рекомендую потратить несколько времени и поизучать эти настройки, часто всё делается именно там:

Внешний вид ->Стили->Настройки стиля

И последнее добавлю, что у некоторых стилей есть свои настройки, например у стилей от Арти, особенно если установить Артодиа Фреймворк, то появятся действительно уникальные возможности, начиная от настройки отображения разделов в виде книги например и заканчивая отображением сообщений как например в новой Vbulletin, штука действительно классная, правда идёт не со всеми стилями у Арти ! :)

2)Итак с этим разобрались, но что делать если нужной настройки нет, а нужно поменять элемент, рассказываю как это сделать проще всего, для этого нам понадобится "Инструменты разработки" в Мозилле, в Хроме есть похожее что-то, но я привык к Мозилле, можно также использовать и Файербаг:

upload_2015-12-21_23-34-41.png

Далее появляется панель и нажимаем выбрать элемент страницы:

upload_2015-12-21_23-35-36.png

Выбираем элемент на страницы и видим его код, справа CSS, которые можем менять...

upload_2015-12-21_23-40-24.png

Пример код Ёлочки на xenforotest:
HTML:
<div style="position:fixed;top:77px;right:-25px;width:94px;height:112px;z-index: 99999;background:url('https://xenforotest.ru/bg4.gif')"><img src="https://xenforotest.ru/flowers.png"></div>
Тут два варианта, либо ищим этот код в "Поиске шаблонов" (Внешний Вид->Стили->Поиск по шаблонам) и меняем на нужный нам, либо делаем правки в Extra.css:

Вот например настройки снега:
Код:
#snow {
    width: 100%;
    height: 100%;
    background-image: url("styles/RootSnowHeader/snow/snow_11.png"), url("styles/RootSnowHeader/snow/snow_12.png"), url("styles/RootSnowHeader/snow/snow_13.png");
    animation: 20s linear 0s normal none infinite running snow;
}
Достаточно прописать в Extra.css нужные параметры, такая правка более рекомендуемая, т.к. легче потом обновлять движок... :)
 

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.645
Баллы
266
#2
Тоже хочу добавить от себя пару ссылок, может, кому пригодится. :)

Первая "Firebug - учимся всяким премудростям. Как я с его помощью позаимствовала кнопки для чата ;)" https://xenforotest.ru/threads/fire...moschju-pozaimstvovala-knopki-dlja-chata.155/

И здесь https://xenforotest.ru/threads/post...-soobschenij-polzovatelej.79/page-2#post-3275 , как исправила таким образом один баг. :)
 

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.645
Баллы
266
#4
Антоха, здорово получилось!
Загрузил гифку на ргхост,так как здесь срабатывает клоудфларе при загрузке такого объёмного файла.
Странно, что у тебя не загружаются вложения, это изображение ведь совсем небольшое, всего 60,3кб :( ...
Но, может, кому-то пригодится, я загрузила, во вложении в архиве изображение Деда Мороза с оленем для чата. :)

Может, время выберу, в дополнение всё это заверну - ёлочку с гифкой снега, при нажатии на которую откроется новая страничка с поздравлением и украшение для чата. :) Душевно всё выглядит, спасибо! :)
 

Вложения

  • 60,3 КБ Просмотры: 7

SOUL

АдминкА
Администратор
Сообщения
7.440
Симпатии
10.645
Баллы
266
#5
Последнее редактирование:

improvs

Проверенный
Сообщения
47
Симпатии
6
Баллы
3
#6
#snow { width: 100%; height: 100%; background-image: url("styles/RootSnowHeader/snow/snow_11.png"), url("styles/RootSnowHeader/snow/snow_12.png"), url("styles/RootSnowHeader/snow/snow_13.png"); animation: 20s linear 0s normal none infinite running snow; }
Подскажите пожалуйста, по какой причине может не работать данный трюк?
Картинки все установлены, стили прописаны, div блок для них сделан.
Результат - изображения отображаются, но нет анимации.
 
Вверх Снизу