Выбор стиля форума для пользователей (скрипт)

Выбор стиля форума самими пользователями из заданных администратором вариантов стиля

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



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://pmsc.free.fr/gb/ )

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





ПА - Модули - Управление страницами HTML
Cоздать страницу HTML


Дайте вашей странице название.

Для двух предлагаемых вам опций отметьте "Нет"



Теперь введите в качестве содержания вашей страницы html следующий код:

Код:

var type = getCookie('template1');
var temsel = document.getElementById('temsel');
temsel.innerHTML ='<select onchange="changeskin(this.options[this.selectedIndex].value);window.location.reload();"><option>Выбрать стиль</option><option value="valeur1"> Prosilver blue</option><option value="valeur2">Green Lucky Style</option><option value="valeur3"> Web 2.2 rose - Capucine </option></select>';




if (type == 'valeur1')
{
  document.write('<link rel="stylesheet" type="text/css" href="http://demoforum.forum2x2.ru/100183-ltr.css">');
}
else if (type == 'valeur2')
{
  document.write('<link rel="stylesheet" type="text/css" href="http://demoforum.forum2x2.ru/153688-ltr.css">');
}
else if (type == 'valeur3')
{
  document.write('<link rel="stylesheet" type="text/css" href="http://demoforum.forum2x2.ru/131817-ltr.css">');
}


function changeskin(change) {
  var scheme = change;
  var name = 'template1';
  var pathname = location.pathname;
  //var myDomain = pathname.substring(0,pathname.lastIndexOf('/')) +'/';
  var ExpDate = new Date ();
  ExpDate.setTime(ExpDate.getTime() + (180 * 24 * 3600 * 1000));
  setCookie(name,scheme,ExpDate,'/');
}
function getCookie(name){
  var cname = name + "=";
  var dc = document.cookie;
  if (dc.length > 0) {
      begin = dc.indexOf(cname);
      if (begin != -1) {
        begin += cname.length;
        end = dc.indexOf(";", begin);
        if (end == -1) end = dc.length;
        return unescape(dc.substring(begin, end));
      }
  }
  return null;
}
function setCookie(name, value, expires, path, domain, secure) {
  document.cookie = name + "=" + escape(value) +
  ((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
  ((path == null) ? "" : "; path=" + path) +
  ((domain == null) ? "" : "; domain=" + domain) +
  ((secure == null) ? "" : "; secure");
}

(Вам надо скопировать этот код и вставить его в качестве содержания вашей страницы:



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


Этот код состоит из трех частей:

Часть 1.

Внимание! в этой части кода, начиная с ее третьей строки, никогда не должно быть перехода на новую строку. Никогда не нажимайте на "Enter" в этой части кода.
Тщательно проверьте, что каждый переход на новую строку связан с тем, что строка не умещается в выделенном пространстве, а не с тем, что в вашем коде появился лишний пробел.
Единственное место, где вы можете вводить лишние пробелы - это место между названиями стилей :
<option> и </option>

Переход на новую строку вызовет исчезновение селектора стилей с вашего форума.

Часть 2.



Часть 3.



Внимание : Ни в коем случае не трогайте часть 3.
Эта часть кода содержит элементы, которые позволяют вашему скрипту управлять cookies: они отвечают за то, чтобы при каждом обновлении страницы форум "помнил" выбранные пользователем установки.



Теперь вы сможете вставить выбранные вами стили в этот скрипт.
Вам надо будет внести изменения в Часть 1 и Часть 2:

1) Часть 1
Дайте название вашему селектору. В исходном коде вам надо изменить текст "Changer le theme". Вы можете поставить здесь любой свой текст, который вам нравится: "Выберите стиль", "Выберите ваш стиль", "Сменить дизайн" и т.д.



2) Части 1 и 2
Теперь изменения надо будет вносить одновременно в часть 1 и в часть 2, шаг за шагом.

Строка option value 1 из первой части соответствует value 1 из второй части:

Вы должны изменить только следующие элементы, выделенные красным




1 - Поставьте здесь Название стиля
Внимание: не используйте кавычки или апострофы. Вводите только обычные символы. Символ " ' " вызовет исчезновение селектора с вашего форума.

2 - Здесь вы должны поставить URL вашего файла css (эти URL (адреса) вы старательно скопировали в свой блокнот на первом этапе, получив их на хостинге, которым вы воспользовались)



Селектор в нашем примере содержит 3 стиля на выбор, но вы можете добавить варианты стилей, добавив дополнительные строки используя одну и ту же модель.

Чтобы добавить стиль:
В Части 1, между закрывающим тегом последней опции

Код:

</option>

и закрывающим тегом всего селектора

Код:

</select>

Вставьте код :

Код:

<option value="value4"> Название вашего стиля 4 </option>

В части 2, в самом ее конце после } и до начала части 3 вставьте код:

Код:

else if (type == 'value4')
{
document.write('<link rel="stylesheet" type="text/css" href="vash_adres_sheet_css">');
}

*(естественно, вместо vash_adres_sheet_css вы должны подставить адрес файла css, соответствующего добавляемому стилю! )


Каждый раз, когда вы добавляете новый стиль, не забывайте повышать на 1 номер для valeur (valeur1 , valeur2 , valeur3 и т.д. )

Чтобы удалить стиль :

В части 1 удалите одну из "опций" :

Код:

<option value="valeur3"> Название стиля 3</option>

В части 2 удалите соответствующий кусок кода:

Код:

else if (type == 'valeur3')
{
document.write('<link rel="stylesheet" type="text/css" href="adres_sheet_css">');
}

Внимание : Для тех, кто использует стили Hitskin

- стили CSS, взятые с Hitskin не содержат информации о логотипе и меню навигации. Эти параметры регулируются в вашей Панели Администратора и будут общими для всех выбранных вами стилей. (Не забывайте об этом, когда будете выбирать логотип и меню - выберите что-то достаточно нейтральное!)

- отдавайте предпочтение названиям стилей, выбранным авторами этих стилей, и по возможности включайте в них также ники авторов. Не забывайте, что эти стили являются их созданиями!

Внимание!!! Если названия стилей включают в себя апострофы ' , удалите их. Измените название так, чтобы оно не включало в себя ни апострофов, ни других специальных символов - # ( ) . 7 ! ; " ' &



После того, как все изменения в скрипт внесены, сохраните вашу страницу html
Вернитесь к управлению страницами html
Скопируйте адрес вашей новой страницы


Версии phpbb3 и Invision - без доступа к шаблонам


ПА - Общие настройки - Форум - Конфигурация - Описание сайта

Вставьте в соответствующее поле следующий код:

Код:

<span id="temsel"></span><script type="text/javascript" src="Adres_page_HTML"></script>


В этом коде вместо Adres_page_HTML вы укажете адрес вашей страницы Html, созданной на этапе 2 и содержащей скрипт селектора.

Версии phpbb2 и punbb - с редактируемыми шаблонами.

Для простоты вы можете и на форумах этих версий поступить точно так же, как описано выше для phpbb3 и Invision : вставить код в Описание сайта.


У вас также есть возможность вставить этот код в Шаблоны.

ПА - Оформление - Шаблоны - Общие
overall_header_new --> Изменить




Найдите следующй код:

Код:


<td align="center" width="100%" valign="middle">
                    <a href="{U_INDEX}"><img src="{LOGO}" id="i_logo" border="0" alt="{L_INDEX}" vspace="1" /></a>

                    <div class="maintitle">{MAIN_SITENAME}</div>
                   

                    <span class="gen">{SITE_DEscriptION}</span>
                  </td>

И между

Код:

<span class="gen">{SITE_DEscriptION}</span>

и

Код:

</td>

вставьте следующий код:

Код:




<span id="temsel"></span><script type="text/javascript" src="http://themeselect.forumactif.com/css-selecteur-h1.htm"></script>

Сохраните и не забудьте опубликовать ваш шаблон.




Найдите следующий код:

Код:

<!-- BEGIN switch_desc -->
                  <p id="pun-desc">{switch_desc.SITE_DEscriptION}</p>
                  <!-- END switch_desc -->
              </div>
              <div id="pun-head">
                  <div id="pun-navlinks">
                    <ul class="clearfix">
                        <li>{GENERATED_NAV_BAR}</li>
                    </ul>
                  </div>
              </div>

и сразу после него вставьте :

Код:

<span id="temsel"></span><script type="text/javascript" src="http://themeselect.forumactif.com/css-selecteur-h1.htm"></script>

Сохраните и не забудьте опубликовать ваш шаблон.

Вы можете посмотреть, как работает этот селектор стилей на демонстрационном форуме : http://demoforum.forum2x2.ru/forum

Данный туториал является переводом туториала, опубликованного на французском форуме поддержки нашего сервиса. Автор туториала - Irina, туториал создан на основе комбинации скриптов, разработанных Etana и Sparrow-style (комбинация - niahoo)

Любая публикация этого туториала без нашего согласия запрещена.