Переключатель стилей и маштаб

Различные модификации основанные на html и css.
Интересные дополнения и украшения для вашего стиля.
Помощь при доработке шаблонов вашего стиля.
Аватара пользователя
Ангелочек

Переключатель стилей и маштаб

Ангелочек 26 янв 2013, 20:12 Сообщение

Увидела на поддержке гетбб такую замечательную вещь как переключатель стилей и изменение размера шрифта Изображение
Тоже себе такое хочу Изображение :lol:
Возможно ли это реализовать в стиле eTech? И если у меня дополнительных 3 стиля все ли они могут переключаться или там ограниченное количество?
За ранее спасибо за ответ и помощь :Rose:
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
CabinetAdmin

Re: Переключатель стилей и маштаб

CabinetAdmin 26 янв 2013, 21:18 Сообщение

Смена размера шрифта, это стандартная фишка стилей prosilver.

Переключатель стилей в виде выпадающего списка:

Код: Выделить всё

<h3>Сменить стиль:</h3> <script type="text/javascript"> <!-- // borrowed from forumimages.com !! function jumpMenu(targ, selObj, restore) { eval(targ + ".location='" + selObj.options[selObj.selectedIndex].value + "'"); if (restore) selObj.selectedIndex = 0; } //--> </script> <form method="get" action="./portal.php" onsubmit="if(document.jumpbox.f.value == -1){return false;}"> <fieldset class="style_change"> <select name="demo" id="demo" onchange="jumpMenu('parent',this,0)"> <option selected="selected" disabled="disabled">Выберите стиль</option> <option value="./index.php?style=1"> Стиль 1 </option> <option value="./index.php?style=2"> Стиль 2 </option> <option value="./index.php?style=3"> Стандартный стиль </option> </select> </fieldset> </form>


В виде кнопки:

Код: Выделить всё

<script type="text/javascript"> <!-- function jumpStyle() { ttt=window.location.search; if (ttt.indexOf('style=1') == -1) { if (ttt=='') {ttt=ttt+'?style=2';} else {ttt=ttt+'&style=2';} } if (ttt.indexOf('style=1') != -1) ttt=ttt.replace('style=1', 'style=2'); //sss=window.location.hostname+window.location.pathname+ttt+window.location.hash; window.location.href=window.location.protocol+"//"+window.location.hostname+window.location.pathname+ttt+window.location.hash; } //--> </script> <a href="" onclick="jumpStyle();return false;"><img src="Иконка" width="14" height="14" title="Переключить стиль"></a>


style=1 - номер стиля на котором в данный момент находимся
style=2 - номер стиля на который переключаемся

На другом стиле, на который переключились, скрипт будет выглядеть так:

Код: Выделить всё

<script type="text/javascript"> <!-- function jumpStyle() { ttt=window.location.search; if (ttt.indexOf('style=2') == -1) { if (ttt=='') {ttt=ttt+'?style=3';} else {ttt=ttt+'&style=3';} } if (ttt.indexOf('style=2') != -1) ttt=ttt.replace('style=2', 'style=3'); //sss=window.location.hostname+window.location.pathname+ttt+window.location.hash; window.location.href=window.location.protocol+"//"+window.location.hostname+window.location.pathname+ttt+window.location.hash; } //--> </script>


Здесь уже переключение на style=3, соответственно на третьем стиле вместо style=2 будет style=3, а вместо style=3 - следующий или первый стиль.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
CabinetAdmin

Re: Переключатель стилей и маштаб

CabinetAdmin 26 янв 2013, 21:29 Сообщение

По поводу смены размера шрифтов. Если есть установленные стили на основе prosilver, то можно сделать так.
В шаблоне overall_header.html перед закрывающим тегом </head> ставим:

Код: Выделить всё

<link href="/styles/prosilver/theme/normal.css" rel="stylesheet" type="text/css" title="A" /> <link href="/styles/prosilver/theme/medium.css" rel="alternate stylesheet" type="text/css" title="A+" /> <link href="/styles/prosilver/theme/large.css" rel="alternate stylesheet" type="text/css" title="A++" /> <script type="text/javascript" src="/styles/prosilver/template/styleswitcher.js"></script>


В нужное место ставим:

Код: Выделить всё

<a href="#" onclick="fontsizeup(); return false;" class="fontsize" title="{L_CHANGE_FONT_SIZE}">{L_CHANGE_FONT_SIZE}</a>


В тему стиля добавляем:

Код: Выделить всё

a.fontsize { background-image: url("./styles/prosilver/theme/images/icon_fontsize.gif"); } a.fontsize:hover { background-position: 0 -20px; text-decoration: none; }


Должно работать без проблем.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Ангелочек

Re: Переключатель стилей и маштаб

Ангелочек 27 янв 2013, 14:32 Сообщение

CabinetAdmin писал(а):Переключатель стилей в виде выпадающего списка:

а что нужно писать там где
CabinetAdmin писал(а):<option value="./index.php?style=1"> Стиль 1 </option>

???? Ссылку прописывать или что?
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
CabinetAdmin

Re: Переключатель стилей и маштаб

CabinetAdmin 27 янв 2013, 15:34 Сообщение

Ангелочек
CabinetAdmin писал(а):<option value="./index.php?style=1">  Стиль 1  </option>

Вместо цифры 1, ставим номер нужного стиля. Вместо Стиль 1 можно написать, например, его название...

Ну и соответственно не забыть поставить переключатель на все стили, на которые будет переключение.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Ангелочек

Re: Переключатель стилей и маштаб

Ангелочек 27 янв 2013, 16:54 Сообщение

Может нужно к каждому стилю прописывать ссылки определенные?
Я вставила в шаблон forumlist_body
вот так
Развернуть

и выбивает ошибку "Общая ошибка. Could not get style data" :(
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
CabinetAdmin

Re: Переключатель стилей и маштаб

CabinetAdmin 27 янв 2013, 17:27 Сообщение

Ангелочек
А у тебя стиль eTech установлен как первый? Следующий второй и так прямо все по порядку?

Например здесь стандартный prosilver установлен как ?style=34
Изображение
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Ангелочек

Re: Переключатель стилей и маштаб

Ангелочек 27 янв 2013, 18:04 Сообщение

CabinetAdmin спасибо. Я ж не знала, что так нуно смотреть. :) Получилось :Yahoo!:
Наверное, я тебе уже надоела. Но хочется чтобы все ж было гармонично, можно еще чуток помучатся со мной? :oops:

как сделать, что эта менюшка была чуть выше колонки на главной станице форума, я сделала скрин куда хочу вставить:
Изображение

И еще у меня вылазит обводка возле менюшки можно ее убрать или сделать невидимой?
вот указала стрелочками чтобы было понятно о чем я говорю:

Изображение
За ранее спасибо за помощь и терпение :Rose:
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
CabinetAdmin

Re: Переключатель стилей и маштаб

CabinetAdmin 27 янв 2013, 20:07 Сообщение

Ангелочек писал(а):Наверное, я тебе уже надоела.

Да нее...

Не совсем понял куда, поэтому предложу сразу несколько вариантов.
В правой колонке в самом верху. В шаблоне forumlist_body.html, находим:

Код: Выделить всё

  <!-- IF SCRIPT_NAME eq 'index' --> <td valign="top" width="10%">


Вставляем наш код сразу после найденного.

Без обводки и на всю ширину колонки:

Код: Выделить всё

<h3>Сменить стиль:</h3> <script type="text/javascript"> <!-- // borrowed from forumimages.com !! function jumpMenu(targ, selObj, restore) { eval(targ + ".location='" + selObj.options[selObj.selectedIndex].value + "'"); if (restore) selObj.selectedIndex = 0; } //--> </script> <form method="get" action="./index.php" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="padding-bottom: 10px;"> <fieldset style="border: 0;"> <select name="demo" id="demo" onchange="jumpMenu('parent',this,0)" style="width: 200px;"> <option selected="selected" disabled="disabled">Выберите стиль</option> <option value="./index.php?style=1"> Стиль 1 </option> <option value="./index.php?style=2"> Стиль 2 </option> <option value="./index.php?style=3"> Стандартный стиль </option> </select> </fieldset> </form>


Если не нужен пробел, до нижней колонки, то:

Код: Выделить всё

style="padding-bottom: 10px;"

Можно удалить.


И ещё как вариант, в полосу навигации, после часового пояса. В шаблоне breadcrumbs.html, найти:

Код: Выделить всё

<p class="datetime">{S_TIMEZONE}</p>


Вставить перед найденным:

Код: Выделить всё

<script type="text/javascript"> <!-- // borrowed from forumimages.com !! function jumpMenu(targ, selObj, restore) { eval(targ + ".location='" + selObj.options[selObj.selectedIndex].value + "'"); if (restore) selObj.selectedIndex = 0; } //--> </script> <form method="get" action="./index.php" onsubmit="if(document.jumpbox.f.value == -1){return false;}" style="padding-left: 5px; float: right; height: 15px; margin-top: -3px;"> <fieldset style="border: 0;"> <select name="demo" id="demo" onchange="jumpMenu('parent',this,0)"> <option selected="selected" disabled="disabled">Выберите стиль</option> <option value="./index.php?style=1"> Стиль 1 </option> <option value="./index.php?style=2"> Стиль 2 </option> <option value="./index.php?style=3"> Стандартный стиль </option> </select> </fieldset> </form>
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Ангелочек

Re: Переключатель стилей и маштаб

Ангелочек 03 фев 2013, 17:17 Сообщение

CabinetAdmin, спасибо огромное за помощь все получилось и вариант вставить это в полосу навигации после часового пояса оказалась удачнее, чем придумала я. Спасибки. :Yahoo!:
А что нужно написать, чтобы гостям не видно было выбора стиля? Только чтобы зарегистрированные пользователи могли пользоваться этой функцией?
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
CabinetAdmin

Re: Переключатель стилей и маштаб

CabinetAdmin 03 фев 2013, 17:19 Сообщение

Просто оберни код в:

Код: Выделить всё

<!-- IF S_USER_LOGGED_IN --> ... Это покажется только зарегистрированным пользователям ... <!-- ENDIF -->
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Ангелочек

Re: Переключатель стилей и маштаб

Ангелочек 03 фев 2013, 17:46 Сообщение

Спасибуличички :Yahoo!:
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
Ангелочек

Re: Переключатель стилей и маштаб

Ангелочек 08 янв 2014, 18:23 Сообщение

CabinetAdmin, заметила еще один косяк, когда во вкладке переключаю стиль, например на розовый, потом закрываю браузер и снова включаю браузер захожу на форум то выбранный розовый стиль сбивается и устанавливается стандартный фиолетовый. Может что то забыли прописать ?
П.с. почему на этом форуме справа на против окна ответа где написано смайлики стоит гиф-анимация 8 марта??? Так надо?
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/

Аватара пользователя
CabinetAdmin

Re: Переключатель стилей и маштаб

CabinetAdmin 08 янв 2014, 19:20 Сообщение

Потому что переходите по стандартной ссылке http://forum.ru, сохранённой в виде вкладки в браузере, без ?style=1. У этого переключателя нет функции сохранения изменений в куках.
Создать форум бесплатно на http://luckbb.ru/
Хочешь поблагодарить? Есть способы Поддержать проект

Аватара пользователя
Ангелочек

Re: Переключатель стилей и маштаб

Ангелочек 08 янв 2014, 20:35 Сообщение

Понятно спасибо за разъяснения :Rose:
... Я Ангел только крылья в стирке и нимб на подзарядке ....
http://forymo4ek.ru/



Вернуться в «HTML модификации»

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и 1 гость