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

Цитата:
Сообщение от Ночная странница Посмотреть сообщение
Для начала приготовьте все необходимые иконки на замену конвертиков, и обязательно с теми же названиями:
thread_dot.png
thread_lock.png
thread_hot.png
thread_hot_new.png
thread_new.png
и все остальные...
Ищутся в папке /images/statusicon/

и так далее... а я подожду денек, может быть, e Boss'а и на это случай имеется какой-нибудь хак?) Если не имеется, то расскажу, как это сделала я.
Давненько я обещалась, но вот видите, как получилось - только сейчас "руки дошли".
Ничего, файлы не протухли, я надеюсь, можно приступать.

Заливаем их на хостинг, в ту папку стиля, в которой они и должны быть - в statusicon вашего нового стиля.
Залили? Теперь идём в админку и начинаем колдовать:

в шаблоне FORUMDISPLAY ищем полные названия файлов старых иконок:

thread_hot_new.gif
thread.gif
thread_hot.gif
thread_lock.gif
thread_new.gif...

и заменяем расширения на .png

Заменили? Сохраняем. Думаете, всё? А вот не тут-то было! Не отобразятся пока ваши красивые иконки, разве что в легенде.
Почему?
Потому что ещё нужно пойти в шаблон threadbit и там аккуратненько заменить

/thread$thread[statusicon].gif"

на

/thread$thread[statusicon].png"

Только пожалуйста, не трогайте другие gif, которые есть в этом шаблоне...

Если у вас почему-то пропала кнопка "новая тема" - для создания тем, значит, вы заменили newthread.gif на newthread.png... Возвращайтесь и меняйте. B в дальнейшем будьте внимательны...

оффтоп...
Я не знаю, почему я тут пишу таким менторским тоном... простите уж. Мне сегодня поворчать охота)


Но иконочки-то встали, как миленькие! Красивенько стало...


Последний раз редактировалось Ночная странница; 09.12.2012 в 16:43.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
4 пользователя(ей) сказали cпасибо:
Boss (18.12.2012), Veter (09.12.2012), джинася (09.12.2012), Прометей (10.12.2012)

Старый 09.12.2012, 15:28 #12 (Ссылка)
Аватар для джинася
Вебмастер
 
Регистрация: 13.03.2012
Сообщений: 552
Сказал(а) спасибо: 439
Поблагодарили 228 раз(а) в 117 сообщениях
Репутация: 247
джинася джинася вне форума
Вебмастер
Дополнительная информация
По умолчанию

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

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

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

Резиновая шапка "по-быстрому".

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

В шаблоне header немного модифицируем дефолтную табличку, находящуюся между комментариями

Код:

Блок отключен
То, что ниже - не трогаем.

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


Тем не менее, вернусь к табличке.
Допустим, у нас есть три изображения:
1) левый край шапки (left.png) ширина 100px, высота 30px
2) правый край шапки (right.png) ширина 150px, высота 50px
3) лого в центре (logo.png)

Я специально взяла разную ширину и высоту картинок, чтобы в коде было видно, что и куда прописывать, хотя на практике они чаще симметричные. При таком раскладе наша табличка должна выглядеть так:

Код:

Блок отключен

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

Код:

Блок отключен
Сам адрес картинки лого прописывается в пункте "Все опции стиля" - "Изображение заголовка" или прямо ссылкой в шапке.

Тогда табличка будет выглядеть так:

Код:

Блок отключен
Вот и всё. С такой шапкой справится даже новичок. Если будут вопросы - пишите!
В дальнейшем сделаю и более сложные макеты шапок, только пинайте


Пересмотрела код... Хочу добавить: если logo.png не фон центральной части, а именно картинка, то вставлять её следует так же через тег img.

Последний раз редактировалось Ночная странница; 17.12.2012 в 09:32.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
8 пользователя(ей) сказали cпасибо:
Allex (31.03.2013), Boss (18.12.2012), inso (13.01.2015), Usta (21.08.2015), Veter (17.12.2012), Viuga (17.07.2014), Автоспец (17.12.2012), Прометей (18.12.2012)
Старый 17.12.2012, 13:05 #15 (Ссылка)
Местный
 
Регистрация: 12.09.2012
Сообщений: 101
Сказал(а) спасибо: 54
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 17
Автоспец Автоспец вне форума
Местный
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Ночная странница Посмотреть сообщение
Сначала рисуем шапку в фотошопе таким образом, чтобы она состояла как минимум из трех частей: левого края, центрального элемента и правого края, которые могли бы как сближаться, так и удаляться друг от друга.
У меня уже есть цельная картинка, её просто разрезать на три равные части?

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

Цитата:
Сообщение от Автоспец Посмотреть сообщение
У меня уже есть цельная картинка, её просто разрезать на три равные части?
Нет. Надо смотреть на конкретной картинке, где и как лучше разрезать. Если не хотите показывать на форуме, можете кинуть мне эскиз в ЛС?

Цитата:
Сообщение от Автоспец Посмотреть сообщение
Как создать дочерний стиль?
Админка - управление стилями - создать новый стиль. И в окошке родительского указать необходимый.
Ночная странница вне форума   Ответить с цитированиемОтветить с цитированием
Старый 18.12.2012, 00:54 #17 (Ссылка)
Аватар для Прометей
Вебмастер
 
Регистрация: 15.08.2012
Адрес: Планета Земля
Моя смс: vBulletin 3.8.4 PL2
Возраст: 56
Сообщений: 888
Сказал(а) спасибо: 564
Поблагодарили 210 раз(а) в 147 сообщениях
Репутация: 230
Прометей Прометей вне форума
Вебмастер
Дополнительная информация
По умолчанию

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

На дефолтном стиле трешки нет картинки фона.
Boss вне форума   Ответить с цитированиемОтветить с цитированием
Старый 18.12.2012, 02:37 #19 (Ссылка)
Аватар для Прометей
Вебмастер
 
Регистрация: 15.08.2012
Адрес: Планета Земля
Моя смс: vBulletin 3.8.4 PL2
Возраст: 56
Сообщений: 888
Сказал(а) спасибо: 564
Поблагодарили 210 раз(а) в 147 сообщениях
Репутация: 230
Прометей Прометей вне форума
Вебмастер
Дополнительная информация
По умолчанию

Верно: там картинка vbulletin3_logo_white.gif и фон, цвет которого задан через css. Фон в виде, если Вы это видели когда, вертикальной черты. Длину которой задают через проценты.
Прометей вне форума   Ответить с цитированиемОтветить с цитированием
Старый 18.12.2012, 11:00 #20 (Ссылка)
Местный
 
Регистрация: 12.09.2012
Сообщений: 101
Сказал(а) спасибо: 54
Поблагодарили 0 раз(а) в 0 сообщениях
Репутация: 17
Автоспец Автоспец вне форума
Местный
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Прометей Посмотреть сообщение
там картинка vbulletin3_logo_white.gif и фон, цвет которого задан через css.
Я взял свою картинку, назвал её "vbulletin3_logo_white.gif" и заменил ей существующую.
Автоспец вне форума   Ответить с цитированиемОтветить с цитированием
Ответ
v.partners

Опции темы

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

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


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


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

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

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

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

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