Бесплатный форум: форум поддержки
Добро пожаловать на форум поддержки сервиса Forum2x2 !

Для полноценной работы с форумом,
пожалуйста, войдите на форум под своим логином (если вы уже зарегистрированы) или же зарегистрируйтесь.


С нашей помощью вы можете создать форум,
похожий на этот!
Мы в социальных сетях

Правила форума

для обязательного прочтения!


Внимание! Важная информация для РЕГИСТРАЦИИ на форуме:

Пожалуйста, не регистрируйтесь на этом форуме с электронными адресами mail.ru, bk.ru, inbox.ru, list.ru - вам может не прийти письмо со ссылкой активации!
Вы можете воспользоваться адресами типа yandex.ru, rambler.ru, gmail.com и т.д.
Последние темы
» Убрать значок
автор Леший Вчера в 12:15

» Свечение для группы а не для юзера
автор Kuzbas63 Вчера в 9:01

» Оформить имя
автор Kuzbas63 Вчера в 8:59

» Красивый путь по сайту
автор Kuzbas63 Вчера в 7:05

» Как убрать надписи в низу форума
автор Kuzbas63 Ср 16 Авг - 13:51

» Как сократить расстояние
автор Lory Ср 16 Авг - 10:12

» Искрящийся ник у групп
автор Kuzbas63 Ср 16 Авг - 8:23

» Как отредактировать цвет на кнопках
автор Lory Вт 15 Авг - 23:58

» Как настроить конфиденциальность
автор катарсис Вт 15 Авг - 21:29

» Проблема с правами
автор Havva Вт 15 Авг - 19:30

Интересные решения
Быстрый переход к сервисам: j-p-g.net Видео фоторедактор Транслит

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

Предыдущая тема Следующая тема Перейти вниз

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

Сообщение автор Luz в Пн 9 Сен - 13:03


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

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

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





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

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



Первый этап : Подготовка стилей для селектора



Cамый простой метод, с использованием стилей Hitskin
Если у вас нет знаний по 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 : вы можете  создать внешний стиль css, изменяющий всего несколько элементов стиля (или всего навсего один) - например, фон вашего форума.

Пример.

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


Напишите в блокноте
Код:
body {
background-color:#000000;
}
Сохраните этот файл под именем  Chernyi_fon.css


Напишите в блокноте
Код:
body {
background-color:#ca2c2d;
}
Сохраните файл  Krasnyj_fon.css


После того, как ваши внешние стили будут готовы, вам надо будет  разместить их на каком-то хостинге, принимающем файлы css, например:
http://www.patmax.eu
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 ! ; " ' &





© Данный способ разработан штатом французского форума поддержки FORUMACTIF.COM (и в особенности Etana на основе туториала Irina).  Любая публикация этого материала без разрешения администрации help.forum2x2.ru запрещается.



Где находится CSS?
Па > Оформление > Цвета > Каскадная таблица стилей CSS


Где искать основные шаблоны?
ПА > Оформление > Шаблоны > Общие настройки


Где находится раздел для подключения скриптов
ПА > Модули > Управление кодами Javascript


avatar
Luz
Администратор
Администратор

Женщина

Сообщения : 16467
Возраст : 43
Регистрация : 2005-03-01
Благодарности : 2563

Без предупреждений

http://help.forum2x2.ru

Вернуться к началу Перейти вниз

Предыдущая тема Следующая тема Вернуться к началу


 
Права доступа к этому форуму:
Вы не можете отвечать на сообщения