Иконка ресурса

Обучение Учимся создавать и подключать настройки в XenForo

На примере создания конкретного плагина по смене цветовой палитры форума учимся создавать настройки.

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#1
Пользователь SOUL разместил новый ресурс:

Учимся создавать и подключать настройки в XenForo - На примере создания конкретного плагина по смене цветовой палитры форума учимся создавать настройки.

Всегда легче понимать, вникая и перерабатывая что-то простое.

Вот и я решила сделать плагин для смены цветовой палитры форума http://xenforotest.ru/resources/xenforotest-ru-menjaem-cvetovuju-palitru-foruma.192/ на основе простого добавления настроек, а как это делать подробно опишу ниже.

Теперь по порядку.


  • Потом создала...
Узнать больше об этом ресурсе...
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#2
Кстати, здесь http://xenforotest.ru/threads/dnevnik-novichka-3-pishem-plagin-vmeste.192/#post-529 X-Oleg уже описывал создание настройки, но, думаю, мой мануал будет для закрепления информации тоже полезен.

Форумчанин КОТ спросил возможно ли выбирать конкретный стиль и разукрашивать, потом другой стиль. http://xenforotest.ru/threads/xenforotest-ru-menjaem-cvetovuju-palitru-foruma.354/#post-1638

А уважаемый dvp89 в лс мне подсказал:
По поводу этого, просто нужно вынести все опции в настройки стиля.
И тогда, всё будет настраиваться, только для определённого стиля.
Пробовала это сделать так, как я это понимаю, а именно в мастер-стиле создала группу настроек стиля, потом по аналогии создания настроек начала создавать новое свойство

11.jpg

Например, для смены цвета шапки так заполнила поля:
Имя свойства: Izmenit_cvet_shapki
Дополнение: [XenforoTest.ru] Меняем цветовую палитру форума
Заголовок: Изменить цвет шапки
Описание: Введите цвет в формате цветовой модели RGB или словом, например, "pink" без кавычек
Тип свойства: Скаляр со значением по умолчанию: @primaryMedium
А дальше так 13.jpg , потом модификация шаблона, но ничего не работает. Пробовала всякие варианты заполнения, но так ничего и не получилось, что-то, видимо, я не правильно понимаю..Scratch_One_S _Head_Girl
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#3
Может, кто подскажет, почему при создании настройки или нескольких настроек (пробовала по-разному) для изменения цвета фона или чтобы изображение фоном было, настройка с url'ом работает, а с цветом нет.
Пробовала чекбокс сделать для отключения одной из них, безрезультатно.. фон колор и ссылка.jpg
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
5.914
Симпатии
5.638
Баллы
266
#4
делаем настройку Имя свойства: fon_img, Скаляр со значением по умолчанию: url, Строка
потом fon_color, Скаляр со значением по умолчанию: какой надо цвет, Цвет
делаем чекбокс для отключения изображения, fon_img_onoff, Скаляр со значением по умолчанию: 1 или 0, Чекбоксы вкл./выкл.
В стиле, каком надо будем для удобства использовать css2:
Код:
<xen:if is="@fon_img_onoff == 1">
.vash_class {
    background-image: url(@fon_img);
    background-color: @fon_color;   
}
<xen:elseif is="@fon_img_onoff == 0" />
.vash_class {
    background-color: @fon_color;   
}
</xen:if>
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
5.914
Симпатии
5.638
Баллы
266
#5
Да, еще, при создании Чекбоксы вкл./выкл, параметры указывать не обязательно, они и так по умолчанию 1 - вкл, 0 - выкл, просто здесь где то видел в мануале.
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#6
делаем настройку Имя свойства: fon_img, Скаляр со значением по умолчанию: url, Строка
потом fon_color, Скаляр со значением по умолчанию: какой надо цвет, Цвет
делаем чекбокс для отключения изображения, fon_img_onoff, Скаляр со значением по умолчанию: 1 или 0, Чекбоксы вкл./выкл.
В стиле, каком надо будем для удобства использовать css2:
Код:
<xen:if is="@fon_img_onoff == 1">
.vash_class {
    background-image: url(@fon_img);
    background-color: @fon_color; 
}
<xen:elseif is="@fon_img_onoff == 0" />
.vash_class {
    background-color: @fon_color; 
}
</xen:if>
dvp89 мне показал, как правильно выглядит добавление нового свойства, сразу не отписалась здесь, то есть моя ошибка была в том, что в модификации я прописывала, к примеру заменить на
Код:
$0
#header
    {
background-color: {$xenOptions.Izmenit_cvet_shapki};
}
, а надо было
Код:
$0
#header
    {
background-color: @Izmenit_cvet_shapki;
}
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
5.914
Симпатии
5.638
Баллы
266
#7
Ну да, в настройках на главной
Код:
{$xenOptions.Izmenit_cvet_shapki}
а в настройках стиля
Код:
{xen:property Izmenit_cvet_shapki}
или
Код:
@Izmenit_cvet_shapki
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#8
А вот, если в стилях код отличается, например, в дефолтном
Код:
.navTabs .navTab.selected .tabLinks {
, а в soft responsive
Код:
.navTabs .navTab.selected .tabLinks, .selectedTabLinks .tabLinks {
?
То есть созданные настройки просто не будут применяться же.

Есть какие-то варианты решения этого?

Имею ввиду модификацию с этим кодом.
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
5.914
Симпатии
5.638
Баллы
266
#9
Так зачем создавать настройки если они уже есть :)
 

Skaiman

[SVG]ADD-ONS ™
Разработчик
Сообщения
5.914
Симпатии
5.638
Баллы
266
#10
Когда не видно всей задумки не очень понятно, там же их можно разделить, но и замену делать не обязательно, можно просто в EXTRA.css сделать этот же класс, но с большим приоритетом !important, да и сам шаблон EXTRA.css имеет в большинстве стилей больший приоритет чем другие.
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#11
Не успела ответить, наверное, более объёмное понимание придёт с опытом... :)
 

tood

Местный
Сообщения
104
Симпатии
72
Баллы
28
#12
SOUL, а как в настройках сделать вот такие разделительные полосы?
11111.png
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#13
SOUL, а как в настройках сделать вот такие разделительные полосы?
Я, если честно, не знаю. Это ж чат Siropu, он у меня сейчас нигде не установлен, но по идее ж можно включить режим отладки и посмотреть, как это реализовано.

Если в ближайшее время будет возможность установить этот чат, я посмотрю и отпишусь, если пойму суть :) ...
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#14
SOUL, а как в настройках сделать вот такие разделительные полосы?
Всё оказалось просто. :)

При создании настроек их можно упорядочивать в подгруппы, прописав в поле "Подгруппа" одинаковое название для настроек, которые хотим отделить от другой группы.

Вот, к примеру, на скрине 6 верхних настроек имеют подгруппу с одинаковым названием "Images", а у настроек ниже прописано другое имя подгруппы, а именно "Animation".

полосочка.jpg

полосочка1.jpg

полосочка2.jpg
 

tood

Местный
Сообщения
104
Симпатии
72
Баллы
28
#15
SOUL, так это Вы про настройки стиля... А я спрашивал про настройки
222222.png
 

SOUL

АдминкА
Администратор
Сообщения
6.560
Симпатии
9.825
Баллы
266
#16
tood, я думала, там по этой же аналогии, сейчас глянула, нет, и не пойму реализацию. :(

Root обязательно подскажет, когда появится, он знает, в его дополнениях есть такие полосочки. :)
 

tood

Местный
Сообщения
104
Симпатии
72
Баллы
28
#18
Опытным путём разобрался
9999.png
Разделяется при нумерации через 100
порядок нумерации: 1,2,3,10,20,30 и т.д, это одна группа, а вот если для настроек которые надо разделить то надо нумерацию назначить 200,210,220 и т.д. Dance4_man5
 
Вверх Снизу