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

[Luz]

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

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

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


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

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



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

Щелкните здесь, чтобы открыть страницу со скриптом

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



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

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

Часть 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
Вернитесь к управлению страницами 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 --> Изменить

Для версии PHPBB2:

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

Код:


<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><br />
                    <div class="maintitle">{MAIN_SITENAME}</div>
                    <br />
                    <span class="gen">{SITE_DEscriptION}</span>
                  </td>

И между

Код:

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

и

Код:

</td>

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

Код:

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

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

Для версии PUNBB:

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

Код:

<!-- 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://themeselect.forumactif.com/forum.htm

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

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

супер пасибки

Спасибо, Luz, за перевод.
Я, правда, еще вчера попробовала по кривому гуглевскому переводу соорудить такое у себя на тестовом форуме.
Вот: http://foxlodge.2x2forum.com/forum.htm
Подключила несколько стандартных стилей с хитскина.
Но, честно говоря, мне не очень нравится, как это работает.

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

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

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

То есть если я, допустим, не буду использовать стили с хитскин, то есть какой-то способ задать через каскадную таблицу, как должны выглядеть иконки навигации? Какой?
И можно как-то на уровне каскадной таблицы задать изображения для иконок тем и форумов?

И как вообще можно вылечить все вышеперечисленные недочеты?

Глаза разбегаются.........

И как то сделано некрасиво.
Эту кнопку по смене стиля, нельзя ли вниз перенести?
Где Создать форум | © phpBB | Бесплатный форум поддержки | Сообщить о нарушении | Создать блог
И прямо её к левому краю.

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

И как то сделано некрасиво.

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

Эту кнопку по смене стиля, нельзя ли вниз перенести?

Нет... Читай тутор.
И еще во французской техподдержке комменты к нему. Там кто-то на английском жаловался, что у него селектор не работает нормально. Ему объяснили, что не работает, потому что втыкать скрипт селектора надо в описание сайта.

Ага. Нашла.
Вот примерно такая запись изменит положение селектора в шапке в ВВ3.

Код:

select {
margin-top:40px !important;
float: right !important;
}

Параметры, естес-но у каждого могут быть свои.
Еще вот такие особенности работы селектора обнаружила:
1. С отключенной базовой каскадной таблицей селектор не будет работать со шкурами с хитскина.
2. Если нужно, чтобы записи в дополнительной каскадной таблице не игнорировались при смене стиля, то везде, где заданы свои параметры, надо дописывать !important;

Остальное пока непонятно...

vash_adres_sheet_css

Еще неплохо бы сказать на каком хостинге можно хранить css а заодно и js.

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

vvo,

После того, как ваши внешние стили будут готовы, вам надо будет разместить их на каком-то хостинге, принимающем файлы css (например http://pmsc.free.fr/gb/ )

Спасибо

vvo

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

Во-первых, сделать возможность прикреплять файлы практически любых форматом сервисом планируется.
А во-вторых - любое "почему бы" упирается в массу разных факторов. Могу вас заверить, что если бы нам было легко таким образом осчастливить пользователей (а хотят такой возможности очень и очень многие), мы бы это сделали!

Умнички.)

блин, как всё сложно.....

а никак нельзя, сделать стили не с ХИТСКИНа, а одни из стандартных, вот этих:

Спойлер:

Можно извернуться конечно с кнопками. Например задать диву кнопки фоновый рисунок (саму кнопку задать фоновым рисунком для дива), а саму кнопку сделать пустышкой. Потом ещё поэкспериментирую, по результатам отпишусь. Кстати по логике таким образом можно сделать активные кнопки: например нарисовать несколько кнопок на ховер, актив итд.

Коды кнопок (phpbb3)

Код:

.i_post
.I_reply
.i_icon_quote
.i_icon_edit
.i_icon_delete
.i_icon_ip

насчёт мультицитаты не знаю, правда, получится или нет так сделать, у неё код какой-то странный, и кнопку "спасибо" что-то найти не могу.

Кнопка закрытой темы имеет тот же код, что и кнопка "ответить". Т.е. реализовать её вышеописанным образом невозможно.

аууу, ответьте плиз!

блин, как всё сложно.....

а никак нельзя, сделать стили не с ХИТСКИНа, а одни из стандартных, вот этих:

Спойлер:

Так они с хитскина и есть, насколько я понимаю.
Синий: http://ru.hitskin.com/search-a-skin/skin-100183.htm
Зеленый: http://ru.hitskin.com/search-a-skin/skin-100178.htm
Серый: http://ru.hitskin.com/search-a-skin/skin-100180.htm
Фиолетовый: http://ru.hitskin.com/search-a-skin/skin-100177.htm
Красный: http://ru.hitskin.com/search-a-skin/skin-100179.htm
Желтый: http://ru.hitskin.com/search-a-skin/skin-102783.htm
Розовый: http://ru.hitskin.com/search-a-skin/skin-100182.htm

Упс... А чей-то в профиле у автора скинов forum2x2 ссылка на такой страшный сайт стоит?

[quote="Luz"]vvo

Могу вас заверить, что если бы нам было легко таким образом осчастливить пользователей (а хотят такой возможности очень и очень многие), мы бы это сделали!

Так может спросите у коллег http://www.phpbbguru.net/downloads

Я не поняла, в какой блокнот сохранять коды, на форуме или на компьютере?

Я не поняла, в какой блокнот сохранять коды, на форуме или на компьютере?

В любой)

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

блин, как всё сложно.....

а никак нельзя, сделать стили не с ХИТСКИНа, а одни из стандартных, вот этих:

Спойлер:

Так они с хитскина и есть, насколько я понимаю.
Синий: http://ru.hitskin.com/search-a-skin/skin-100183.htm
Зеленый: http://ru.hitskin.com/search-a-skin/skin-100178.htm
Серый: http://ru.hitskin.com/search-a-skin/skin-100180.htm
Фиолетовый: http://ru.hitskin.com/search-a-skin/skin-100177.htm
Красный: http://ru.hitskin.com/search-a-skin/skin-100179.htm
Желтый: http://ru.hitskin.com/search-a-skin/skin-102783.htm
Розовый: http://ru.hitskin.com/search-a-skin/skin-100182.htm

ааааа.... спасибо) я их просто невидел чёт там)))

здраствуйте..
давно хотела такую функцию ))
меня интересует один вопрос..

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

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

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

Дайте мне табличку какую-нибудь, пожалуйста, подключаемую (которая не заменяет стандартую). Проверить, правда ли весь код придёся important'ами гадить, вдруг это не нужно. Не бойтесь, дизайны не ворую, они мне не нужны.

И ещё вопрос: можно ли добавить в список базовую подключаемую таблицу форума? В коде искал, она всегда разная.