Старый 02.02.2012, 20:43 #1 (Ссылка)
Аватар для Ночная странница
Профи
 
Регистрация: 30.01.2012
Моя смс: Нельзя сказать, что я пользуюсь какой-то одной, прошла все, от vB и XenForo до WordPress и OpenCart.
Возраст: 41
Сообщений: 1,861
Записей в дневнике: 6
Сказал(а) спасибо: 1,134
Поблагодарили 982 раз(а) в 591 сообщениях
Репутация: 1138
Ночная странница Ночная странница вне форума
Профи
Дополнительная информация
Сообщение

Создание индивидуального дизайна для vBulletin


Установив форум, русифицировав его и понаставив необходимых хаков, все админы рано или поздно задумываются о дизайне. Я пока ещё только начинаю вникать в особенности шаблонов vBulletin, но по мере возможности буду выкладывать в эту тему все советы по созданию своего стиля на vBulletin на основе существующих. По мере пополнения темы в первый пост буду добавлять ссылки на нижележащие посты, чтобы не приходилось искать по всей теме.
Вопросы мне задавать пока рано, я сама только осваиваю этот движок, но думаю, что мой опыт верстки поможет мне успешно справиться с этой задачей.
Итак, приступаем к дизайну.

Совет №1.
Не трогайте исходный стиль!

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

Теперь мы можем выбрать меню "Все опции стиля" и попробовать создать основу будущего индивидуального стиля.

Примечание: изображения будут использованы те же, что и на основном стиле до тех пор, пока вы не измените пути к ним. Однако, о настройках стиля - позднее.
Повторюсь:
Правило №1: Не трогайте исходный стиль! Создайте новый!


Не думаю, что найдутся те, кто спросит "почему", но я всё же отвечу: испортив дубликат, вам нужно будет всего лишь удалить его и создать ещё один. А ошибки случаются даже у самых опытных профи, так что не лучше ли подстраховаться?

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

Последний раз редактировалось Ночная странница; 12.03.2012 в 19:28.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
6 пользователя(ей) сказали cпасибо:
Boss (02.02.2012), inso (22.07.2014), Nyhsa (08.12.2013), Veter (03.02.2012), Viuga (03.12.2013), Аркадий 10 (03.02.2012)

Старый 03.02.2012, 08:19 #2 (Ссылка)
Аватар для Аркадий 10
Вебмастер
 
Регистрация: 06.01.2012
Сообщений: 680
Сказал(а) спасибо: 207
Поблагодарили 86 раз(а) в 52 сообщениях
Репутация: 105
Аркадий 10 Аркадий 10 вне форума
Вебмастер
Дополнительная информация
По умолчанию

Очень актуальная тема, спасибо.
Аркадий 10 вне форума   Ответить с цитированиемОтветить с цитированием
Старый 03.02.2012, 11:51 #3 (Ссылка)
Аватар для Ночная странница
Профи
 
Регистрация: 30.01.2012
Моя смс: Нельзя сказать, что я пользуюсь какой-то одной, прошла все, от vB и XenForo до WordPress и OpenCart.
Возраст: 41
Сообщений: 1,861
Записей в дневнике: 6
Сказал(а) спасибо: 1,134
Поблагодарили 982 раз(а) в 591 сообщениях
Репутация: 1138
Ночная странница Ночная странница вне форума
Профи
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Аркадий 10 Посмотреть сообщение
Очень актуальная тема, спасибо.
Теперь главное найти время и написать всего нужного побольше

Итак, стиль для экспериментов создан.
Как сделать так, чтобы создателю в любой момент можно было его просмотреть, но все остальные посетители его бы не видели? Легко.
Идем в админ-панель, Основные настройки-настройки стиля и языка
и проверяем следующие два пункта:
Стиль по умолчанию - ставим какой-то из уже готовых или обычный.
Разрешить пользователям выбирать стиль? - Да.

В опциях экспериментального стиля выбираем пункт "редактировать настройки" и ставим "Нет" в пункте "Разрешить выбор пользователей".
Внизу форума появится возможность одним щелчком менять стиль отображения форума, при этом недоделанные стили обычным пользователям видны не будут. Вуаля!

***
И ещё один момент. Раз уж вы взялись за дизайн, неплохо было бы включить функцию отображения в коде страниц названий шаблонов vBulletin. Делается просто:
Основные настройки-основные настройки (не опечатка, а подраздел основных настроек)
и пункт "добавление названий шаблонов в комментарии HTML..."
Для новичков незаменимое удобство. Как правильно воспользоваться, расскажу в следующий раз.

Последний раз редактировалось Ночная странница; 14.03.2012 в 16:10.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
2 пользователя(ей) сказали cпасибо:
Boss (03.02.2012), Viuga (03.12.2013)
Старый 03.02.2012, 17:32 #4 (Ссылка)
Аватар для Boss
Чёрный кардинал
 
Регистрация: 19.06.2010
Адрес: Pirate Bay
Моя смс: Pirate vBulletin
Сообщений: 1,702
Записей в дневнике: 1
Сказал(а) спасибо: 205
Поблагодарили 390 раз(а) в 237 сообщениях
Репутация: 410
Boss Boss вне форума
Чёрный кардинал
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Fiesta Посмотреть сообщение
Разрешить пользователям выбирать стиль? - Да.
Fiesta, а вот это необязательно
Если ты в админке кликнешь на свой экспериментальный стиль (ну это где в стилях и шаблонах список стилей ) то на новой вкладке он и откроется. Ты его будешь видеть, а все остальные нет
Boss вне форума   Ответить с цитированиемОтветить с цитированием
Старый 03.02.2012, 17:55 #5 (Ссылка)
Аватар для Ночная странница
Профи
 
Регистрация: 30.01.2012
Моя смс: Нельзя сказать, что я пользуюсь какой-то одной, прошла все, от vB и XenForo до WordPress и OpenCart.
Возраст: 41
Сообщений: 1,861
Записей в дневнике: 6
Сказал(а) спасибо: 1,134
Поблагодарили 982 раз(а) в 591 сообщениях
Репутация: 1138
Ночная странница Ночная странница вне форума
Профи
Дополнительная информация
По умолчанию

Boss, я и это уже нашла, ага, знаю. Только если дополнительных стилей больше, чем один, эта функция становится довольно важной... Вдруг пользователи захотят оставить стандартный стиль, а эксперименты дизайнера им не понравятся? Да и просто в любой момент и на любой страничке переключиться и посмотреть, как это смотрится в свежем/старом стиле, бывает удобно.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
Старый 03.02.2012, 18:00 #6 (Ссылка)
Аватар для Boss
Чёрный кардинал
 
Регистрация: 19.06.2010
Адрес: Pirate Bay
Моя смс: Pirate vBulletin
Сообщений: 1,702
Записей в дневнике: 1
Сказал(а) спасибо: 205
Поблагодарили 390 раз(а) в 237 сообщениях
Репутация: 410
Boss Boss вне форума
Чёрный кардинал
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Fiesta Посмотреть сообщение
Вдруг пользователи захотят оставить стандартный стиль
А юзерам не хрен в стилях ковыряццо
Есть один общий и хорош


Fiesta, кста. Есть куча хаков которые требуют изменения шаблона. И? Ты будешь десять шабов ковырять чтоб хак поставить?

Вот эсли это форум разработчиков стиля на воблу, то да. Для демок самое оно. Хочешь шаблон, выбрал - посмотрел. Да и вааще. В плане узнаваемости форум должен иметь лицо
Boss вне форума   Ответить с цитированиемОтветить с цитированием
Старый 06.02.2012, 22:12 #7 (Ссылка)
Аватар для Ночная странница
Профи
 
Регистрация: 30.01.2012
Моя смс: Нельзя сказать, что я пользуюсь какой-то одной, прошла все, от vB и XenForo до WordPress и OpenCart.
Возраст: 41
Сообщений: 1,861
Записей в дневнике: 6
Сказал(а) спасибо: 1,134
Поблагодарили 982 раз(а) в 591 сообщениях
Репутация: 1138
Ночная странница Ночная странница вне форума
Профи
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Boss Посмотреть сообщение
Fiesta, кста. Есть куча хаков которые требуют изменения шаблона. И? Ты будешь десять шабов ковырять чтоб хак поставить?
Я сначала поставила все необходимые хаки, если вы обратили внимание, а потом уже взялась за дизайн. А клонируя измененные шаблоны, автоматически для этих стилей подключаются и хаки. По крайней мере у меня всё работает.
Да, если потом надумаю ставить ещё что-нибудь, буду вручную, куда деваться...

Цитата:
Сообщение от Boss Посмотреть сообщение
В плане узнаваемости форум должен иметь лицо
Он и будет иметь, просто пользователи могут выбрать и другой стиль, если захотят. К Новому году я их буду радовать снежным, а летом... хотела сказать "солнечным" но передумала - лучше прохладным...


Но вернусь к теме.

Цвета своего экспериментального стиля все и без моих подсказок найдут, где изменить (Админ-панель --> стили и шаблоны --> Управление стилями --> Все опции стиля.)
Вообще там очень много интересного можно задать. Например, отдельные директории для изображений стиля, это пригодится, если вы надумаете менять иконки. Чтобы у разных стилей они не дублировали друг-друга, смените в опциях стиля директории, не забыв создать нужные папки на хостинге и залить в них нужные изображения.

Кстати, об иконках сегодня и хотела немного рассказать.
С иконками на разделы очень просто - есть куча хаков, предлагающих индивидуальные иконки каждому разделу и даже категориям. Гораздо хуже с иконками тем. Нет, не с теми, что можно поменять через Админ-панель --> Иконки для сообщений --> Управление иконками сообщений (меняйте-меняйте, это тоже придаст вашему форуму индивидуальности), а теми унылыми конвертиками, что по умочанию украшают все темы в разделах и оповещают нас о наличии новых сообщений в той или иной теме.
Единственное, что я откопала в сети в отношении их - это совет заменить файлы на сервере другими, но тоже в формате ".gif".
"Не хочу" - подумала я и решила написать о том, что их можно и нужно менять на красивые, объемные, с тенями и градиентами ".png" .
Никакого хака на этот счет не нашла, поэтому будем править шаблоны вручную. Для начала приготовьте все необходимые иконки на замену конвертиков, и обязательно с теми же названиями:

thread_dot.png
thread_lock.png
thread_hot.png
thread_hot_new.png
thread_new.png

и все остальные...
Ищутся в папке /images/statusicon/

и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?) Если не имеется, то расскажу, как это сделала я.

А пока два маленьких секрета для предыдущих этапов, наработанных за несколько лет сайтостроительства:
1) Вам пригодится программка Pixie, найдите и скачайте, это очень удобное средство чтения цвета с экрана. Вам понравился основной цвет какого-нибудь сайта? Не теряйтесь и не лазьте по вражеской CSS, просто скопируйте этот цвет с помощью Pixie прямо с любого места экрана. Вам нужно в фотошопе задать цвет букв в точности, как на том градиенте с кнопок? без проблем! Ctrl+Alt+C и цвет уже в буфере обмена, откуда легко копируется в форму фотошопа. Программка крошечная, много места и памяти не займет, но вы скоро так привыкнете к этой малышке... что-то я разошлась))) Мне в рекламные агенты пора переквалифицироваться
2) Вы не дизайнер, но хотите, чтобы цвета вашего сайта гармонично сочетались? Самое известное средство - Kuler --> Visit Kuler now от Адоб, но есть еще и наши, отечественные сайты для этой цели, не менее удобные. Например, Цветогенератор. Принцип один - выберите симпатичную вам цветовую схему и придерживайтесь её в своём дизайне.
3) А кнопки где вы делаете? Заказываете знакомому дизайнеру? Выпрашиваете на форумах в разделах дизайна? О, ужас! Любые кнопки на любой вкус могу сделать "генераторы кнопок". Ищите в гугле. Лично я люблюделать их тут.

Да, а иконки в формате .png тоже не просите - всевозможные бесплатные коллекции просто наводнили интернет. Да, у меня, разумеется, есть любимый сайт, где я их выбираю из тысячи коллекций, но... это уже совсем другая тема. Должна же у женщины оставаться загадка?
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
3 пользователя(ей) сказали cпасибо:
Boss (07.02.2012), Veter (07.02.2012), Viuga (27.11.2013)
Старый 07.02.2012, 23:15 #8 (Ссылка)
Аватар для Boss
Чёрный кардинал
 
Регистрация: 19.06.2010
Адрес: Pirate Bay
Моя смс: Pirate vBulletin
Сообщений: 1,702
Записей в дневнике: 1
Сказал(а) спасибо: 205
Поблагодарили 390 раз(а) в 237 сообщениях
Репутация: 410
Boss Boss вне форума
Чёрный кардинал
Дополнительная информация
По умолчанию

Fiesta, блин я думал что все знаю, а век живи век учись
Пикси супер!


Цитата:
Сообщение от Fiesta Посмотреть сообщение
и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?)
Для иконок сообщений нет хака
Есть хак для иконок категорий, но с ним могут быть косяки
И есть хак для индивидуальных иконок разделов
Boss вне форума   Ответить с цитированиемОтветить с цитированием
Старый 10.03.2012, 10:18 #9 (Ссылка)
Аватар для Ночная странница
Профи
 
Регистрация: 30.01.2012
Моя смс: Нельзя сказать, что я пользуюсь какой-то одной, прошла все, от vB и XenForo до WordPress и OpenCart.
Возраст: 41
Сообщений: 1,861
Записей в дневнике: 6
Сказал(а) спасибо: 1,134
Поблагодарили 982 раз(а) в 591 сообщениях
Репутация: 1138
Ночная странница Ночная странница вне форума
Профи
Дополнительная информация
По умолчанию

Небольшой обзор возможностей фона вашего стиля:

1. Просто цвет. Задается в Админпанель - Управление стилями - Все опции стиля - вкладка Body или Фон страницы (можно и там и там, у меня, например, они отличаются, если вы хотите прозрачный, укажите вместо цвета параметр transparent)

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

Код:

Блок отключен
или
Код:

Блок отключен
(зависит от того, на какой слой вы поставите картинку)

Последний раз редактировалось Ночная странница; 14.03.2012 в 16:12.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
Пользователь сказал cпасибо:
Boss (11.03.2012)
Старый 24.09.2012, 17:52 #10 (Ссылка)
Аватар для Ночная странница
Профи
 
Регистрация: 30.01.2012
Моя смс: Нельзя сказать, что я пользуюсь какой-то одной, прошла все, от vB и XenForo до WordPress и OpenCart.
Возраст: 41
Сообщений: 1,861
Записей в дневнике: 6
Сказал(а) спасибо: 1,134
Поблагодарили 982 раз(а) в 591 сообщениях
Репутация: 1138
Ночная странница Ночная странница вне форума
Профи
Дополнительная информация
По умолчанию

Давненько я тут не писала... Сегодня решила вернуться к теме иконок, правда, пока не иконок сообщений, а всего лишь иконок разделов. Не знаю, как вам, а мне удобнее делать их в формате .png, смотрится он лучше, чем .gif и прозрачность не хуже поддерживает... А уж выбор их огромен! Просто заменить их на сервере не получится, нужно править шаблоны. Этим и займемся.
Чтобы понятно было, какие иконки будем менять на .png, откройте главную страницу вашего форума и взгляните на иконки, обозначающие наличие новых тем и сообщений в разделах... Видите? На этом форуме, например, они выглядят так:





Итак, меняем.

Шаг 1.
Приготовим замену иконкам (в формате .png, разумеется), названия оставляем те же самые:
forum_new
forum_old
forum_new_lock
forum_old_lock

Шаг 2.
Заливаем их на сервер, в папку images/statusicon (или любую другую папку с вашим стилем)

Шаг 3.
В шаблоне FORUMDISPLAY и FORUMHOME ищем их названия и меняем расширения на .png
После этого внизу главной страницы (в легенде) их изображения сменятся, но возле форумов будут оставаться прежние иконки.

Шаг 4.
В шаблонах
forumhome_forumbit_level1_post
и
forumhome_forumbit_level2_post

ищем строки:

Цитата:
img src="$stylevar[imgdir_statusicon]/$forum[imageprefix]forum_$forum[statusicon].gif"
и тоже меняем расширение на нужное.

***
Всё. Ничего не забыла, кажется... Наслаждаемся новыми красивыми иконками!

Один нюанс!
Для особых педантов...
Эти иконки используются еще в одном месте, на странице вв-кодов... Можно заменить их и там:

Шаблон help_bbcodes

заменить расширения на .png (в шаблоне искать по названиям)

Напомню, что страница вв-кодов находится тут:
http://ваш сайт.ru/misc.php?do=bbcode
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
3 пользователя(ей) сказали cпасибо:
Veter (24.09.2012), Viuga (06.12.2013), джинася (27.09.2012)
Ответ
v.partners

Опции темы

Ваши права в разделе
Вы не можете создавать новые темы
Вы не можете отвечать в темах
Вы не можете прикреплять вложения
Вы не можете редактировать свои сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.
Trackbacks are Вкл.
Pingbacks are Вкл.
Refbacks are Вкл.


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Какие средства для веб-дизайна используете? tepka Вопросы по дизайну 15 15.10.2012 14:42
Нужен совет для начинающих в сфере web дизайна vlc Web дизайн 24 06.05.2012 01:02
есть идея дизайна...вопрос в реализации.... Multimate Web дизайн 4 21.05.2010 03:43
Как расставить мебель в картинке дизайна? OlgaSafonova Вопросы по дизайну 3 10.05.2010 17:31
Стоит ли идти на курсы дизайна? konstantin42 Web дизайн 1 24.04.2010 20:43


Текущее время: 04:57. Часовой пояс GMT +3.

Powered by vBulletin®
Copyright ©2000 - 2018, WMboard.
Перевод: zCarot
 

Форум вебмастеров

Здесь делают сайты, учатся на них зарабатывать. Ты новичёк, и ничего не понимаешь в создании сайтов и в интернет заработке? Не знаешь ответа на вопрос по сайтостроению? Мучают вопросы сео оптимизации?

Не беда, присоединяйся к сообществу вебмастеров, и зарабатывай вместе с нами!