Селектор стилей для форума (новая версия)

С помощью данного туториала вы сможете установить на свой форум "селектор стилей" - выпадающее меню, позволяющее пользователям выбрать стиль  форума из нескольких предложенных администратором вариантов.  

КАК ЭТО ВЫГЛЯДИТ:

Внимание : Если вы уже используете на вашем форуме старую версию селектора стилей, предложенную в другом туториале, мы советуем вам воспользоваться данным методом. Старая версия скрипта, к сожалению, работает только в браузере Firefox.  Кроме того, новый метод гораздо проще, так как использует исключительно модуль "Управление кодами Javascript"

Установка данного селектора осуществляется в 2 этапа.

---

---

Если у вас нет знаний по CSS, но вы все-таки хотите предложить вашим пользователям выбор из нескольких стилей - используйте этот способ.

- Откройте сайт  Hitskin.com
- Выберите стиль, который вам нравится и откройте страницу с превизуализацией стиля
Вы обязательно должны выбрать стиль для своей версии форума. Стили для других версий вам не подходят.

Например, выберем стиль для версии phpbb3:
http://demo.nicetheme.com/index.htm?theme_id=138443

- Когда вы открыли эту страницу, в строке браузера высвечивается адрес с идентификационным номером стиля:

Благодаря этому номеру вы теперь можете получить адрес страницы CSS :

/138443-ltr.css

- Поставьте впереди адрес вашего форума:

Код:

http://demoforum.forum2x2.ru/138443-ltr.css

- Скопируйте в блокнот полученный адрес (а также название стиля, чтобы поставить его потом в селектор)
- Проделайте эту операцию  для всех стилей, которые вы хотите предложить на выбор вашим пользователям.

Теперь вы можете перейти ко второму этапу.



Если вы разбираетесь в CSS, вы можете воспользоваться этим способом.

- Откройте новый файл в вашем блокноте и введите ваш код CSS
- Сохраните ваш документ  в формате  .css , выбрав для него имя, благодаря которому вы легко его узнаете
(Избегайте пробелов в названии файла)
- Проделайте это для всех стилей, которые вы хотите предложить пользователям.

Внимание! Если вы не собираетесь дезактивировать базовую таблицу стилей CSS вашего форума, у вас нет никакой необходимости создавать полную CSS : вы можете  создать внешний стиль css, изменяющий всего несколько элементов стиля (или всего навсего один) - например, фон вашего форума.

Пример.

Если вы хотите предложить на выбор черный и красный фоны для вашего форума, вы сделаете следующее.


Напишите в блокноте

Код:

body {
background-color:#000000;
}

Сохраните этот файл под именем  Chernyi_fon.css


Напишите в блокноте

Код:

body {
background-color:#ca2c2d;
}

Сохраните файл  Krasnyj_fon.css


После того, как ваши внешние стили будут готовы, вам надо будет  разместить их на каком-то хостинге, принимающем файлы css, например:
https://patmax.error
https://www.dropbox.com
https://www.archive-host.com

Разместите ваши cssфайлы и сохраните в блокноте прямые ссылки на них, пометив, каким стилям они соответствуют.

---

---

В ПА > Модули > Управление кодами JS укажите Активировать управление кодами JS : да
Создайте новый файл и заполните следующим образом:
Название: любое, например, Cелектор стилей
Расположение: на всех страницах

Код Javascript (общий для всех движков):

Код:

$("head").append('<link rel="stylesheet" type="text/css" id="tstyle" />');

if(my_getcookie("sstyle")) { $("#tstyle").attr("href", my_getcookie('sstyle')); }

function addstyle(nom,lien) { $("#sstyle").append('<option value="'+lien+'">'+nom+'</option>'); }

$(function(){

  $("#frame_chatbox").load(function(){
    $("#frame_chatbox").contents().find("head").append($("#tstyle").clone());
  });

  $("iframe[name=smilies]").load(function(){
    $("iframe[name=smilies]").contents().find("head").append($("#tstyle").clone()).append('<style type="text/css">body{margin:0!important;}</style>');
  });

  $("body").prepend('<select id="sstyle" onChange="my_setcookie(\'sstyle\',$(\'#tstyle\')[0].href=this.value,1,0);$(\'#frame_chatbox,iframe[name=smilies]\').contents().find(\'#tstyle\').attr(\'href\',this.value);this.selectedIndex=0;"><option>Выбрать стиль</option></select>');

  addstyle("Стиль 1","http://url_css");
  addstyle("Стиль 2","http://url_css");
  addstyle("Стиль по умолчанию","");

});

СКРИНШОТ:

В этом коде вам нужно изменить только эту часть:

Код:

addstyle("Стиль 1","http://url_css");
addstyle("Стиль 2","http://url_css");

Вместо "Стиль 1", "Стиль 2" поставьте названия ваших стилей, именно эти названия пользователи будут видеть в выпадающем меню (селекторе).
Вместо http://url_css  подставьте ссылки на файлы CSS (см. первый этап.).  Если вы используете стили Hitskin, это будут ссылки вида  

Код:

http://demoforum.forum2x2.ru/138443-ltr.css

.

Вы можете сделать выбор из большего количества стилей, для этого просто добавьте в код дополнительные строчки вида

Код:

addstyle("Стиль 1","http://url_css");

Внимание : Для  тех, кто использует стили Hitskin Стили CSS, взятые с Hitskin не содержат информации о логотипе и меню навигации.  Эти параметры регулируются в вашей Панели Администратора и будут общими для всех выбранных вами стилей.  (Не забывайте об этом, когда будете выбирать логотип и меню - выберите что-то достаточно нейтральное!) Отдавайте предпочтение названиям стилей, выбранным авторами этих стилей, и по возможности включайте в них также ники авторов. Не забывайте, что эти стили являются их созданиями! Если названия стилей включают в себя апострофы  ' , удалите их.  Измените название так, чтобы оно не включало в себя ни апострофов, ни других специальных символов - # ( ) . 7 ! ; " ' &