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

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

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

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

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

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

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

Я админ, не могу зайти!
(забыл / потерял пароль)


Общий FAQ по управлению форумом

FAQ: реклама на форуме

Туториалы по разным функциям ваших форумов

Алфавитный указатель

Интересные решения для форумов

Наши видео-туториалы

Условия пользования сервисом

Ссылки на полезные ресурсы

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


Yahoo! 
MSN 
AOL 
Netvibes 
Bloglines 


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

Перейти вниз

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

Сообщение автор Luz в Сентябрь 9th 2013, 13:03


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

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

КАК ЭТО ВЫГЛЯДИТ:
Селектор стилей для форума (новая версия) Select10

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

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

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

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



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



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

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

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

- Когда вы открыли эту страницу, в строке браузера высвечивается адрес с идентификационным номером стиля:
Селектор стилей для форума (новая версия) Theme_10
Благодаря этому номеру вы теперь можете получить адрес страницы CSS :

/138443-ltr.css

- Поставьте впереди адрес вашего форума:
Код:
http://demoforum.forum2x2.ru/138443-ltr.css
- Скопируйте в блокнот полученный адрес (а также название стиля, чтобы поставить его потом в селектор)
- Проделайте эту операцию  для всех стилей, которые вы хотите предложить на выбор вашим пользователям.

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



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

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

Селектор стилей для форума (новая версия) Warnin13Внимание! Если вы не собираетесь дезактивировать базовую таблицу стилей 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("Стиль по умолчанию","");

});

СКРИНШОТ:
Селектор стилей для форума (новая версия) Selekt10

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

Код:
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");

Селектор стилей для форума (новая версия) 64x64_13Внимание : Для  тех, кто использует стили Hitskin

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





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


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

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


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


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


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

Женщина

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

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

https://help.forum2x2.ru

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

Вернуться к началу


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