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

Шаблоны vBulletin Шаблоны для форумов vBulletin

Ответ
 
LinkBack Опции темы
Старый 02.02.2012, 22:43 #1 (Ссылка)
Профи
Дополнительная информация
Сообщение

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


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

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

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

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

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


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

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

Последний раз редактировалось Ночная странница; 12.03.2012 в 21: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)

Старый 26.06.2013, 01:22 #61 (Ссылка)
Вебмастер
Дополнительная информация
По умолчанию

Так на этом и учится все: изменяя под себя какой либо из дизов скачанных из интернета. И только потом, делают своё, с нуля.
Прометей вне форума   Ответить с цитированиемОтветить с цитированием

Старый 19.08.2013, 22:22 #62 (Ссылка)
Вебмастер
Дополнительная информация
По умолчанию

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


Сперва на быструю руку просто закрасил края картинки полоской белого цвета. Все хорошо.
Теперь взялся основательно. Покопался изменил table border="0"
выставил нужную ширину и теперь любая картинка выравнивается правильно, но.. это место закрасилось другим цветом. По диогонали серо-черным..
менял cellpadding="0" но картинка ужимается внутрь
Поменял cellspacing="0" - то что нужно, но...
появилась полоска в центре, между картинками. И это понянто. Бордюр ведь вокруг картинки. Выравнивание влево-вправо непомогает.
Похоже надо вернуться к "table border", но как убрать закрашенность?..


обозначил красным место соприкосновения серой и черной полоски.
Как их убрать? Картинка стоит ровно, как надо.
koil вне форума   Ответить с цитированиемОтветить с цитированием

Старый 19.08.2013, 23:07 #63 (Ссылка)
Администратор
Дополнительная информация
По умолчанию

Цитата:
Сообщение от koil Посмотреть сообщение
к примеру здесь логотип форума вылезает налево, за край..
Здесь ничего не вылезает за край, тк здесь переделанный дефолтный стиль, и следовательно все таблицы, сама их структура изначально правильная.
То есть, если посмотреть например тестовый форум, то на дефолтном стиле вообще хорошо видна структура таблиц, и те кто делает собственные стили, неважно в паблик они попали, или строго индивидуальные, все равно придерживаются данной структуры. Все остальное уже от лукавого, и кривизна или прямота верстки зависит от кодера.
Veter вне форума   Ответить с цитированиемОтветить с цитированием

Старый 20.08.2013, 12:45 #64 (Ссылка)
Вебмастер
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Veter Посмотреть сообщение
Здесь ничего не вылезает за край, тк здесь переделанный дефолтный стиль, и следовательно все таблицы, сама их структура изначально правильная..
С этим не спорю, на дефолте все правильно..
Просто "индивидуальный дизайн" шапки диктует свое.
Здесь это не заметно, черное на черном и краев не видно..
не очень заметно как буква W из логотипа слегка вываливается налево.
А тестовом форуме очень грамотно подравняли с белым краем фона.

А в случае который я привел, когда в шапке темная картинка на белом фоне, создается впечатление вылезания за край..


вот в каком случае шапка смотрится более аккуратно?

первый вариант





второй вариант



может криво и от лукавого, но первый вариант мне кажется более лучше.

Добавлено через 59 минут
Цитата:
Сообщение от Veter Посмотреть сообщение
Здесь ничего не вылезает за край
в качестве совета, только для пробы..
попробуйте в админке, в стилях..
там где Body и есть окошко "Дополнительные атрибуты CSS"
выставить "border: 1px solid #FFCC00;"
во-первых будет красивее (имхо)
во-вторых увидите разницу между "краем" и логотипом..

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

Последний раз редактировалось koil; 20.08.2013 в 12:32.
koil вне форума   Ответить с цитированиемОтветить с цитированием
2 пользователя(ей) сказали cпасибо:
Veter (21.08.2013), Прометей (21.08.2013)

Старый 21.08.2013, 21:49 #65 (Ссылка)
Администратор
Дополнительная информация
По умолчанию

Цитата:
Сообщение от koil Посмотреть сообщение
но первый вариант мне кажется более лучше
Смотря какой дизайн форума собственно. В одном случае лучше, в другом без разницы... Так что каждый случай индивидуален. Если вам так больше нравится, то переверстывайте шаблон.



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

Я вообще заметил, что у нас с вами очень разное видение дизайна
Veter вне форума   Ответить с цитированиемОтветить с цитированием

Старый 22.08.2013, 13:03 #66 (Ссылка)
Вебмастер
Дополнительная информация
По умолчанию

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

Добавлено через 22 минуты
Цитата:
Сообщение от Veter Посмотреть сообщение
Если вам так больше нравится, то переверстывайте шаблон
Зачем переверстывать шаблон? я просто изменил размер рисунка и все.
все стало ровно, просто хотелось бы сделать средствами форума..

А вам нравится второй вариант?
koil вне форума   Ответить с цитированиемОтветить с цитированием

Старый 22.08.2013, 18:05 #67 (Ссылка)
Администратор
Дополнительная информация
По умолчанию

Цитата:
Сообщение от koil Посмотреть сообщение
а попробовали?
Конечно.

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

Старый 18.07.2014, 09:18 #68 (Ссылка)
Супермодератор
Дополнительная информация
По умолчанию

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

Кто не верит - ставлю эксперимент на живом форуме.
Вот кнопка в png



Заменяю свою кнопку...скажем, новая тема в разделе

Вот она в Файлзилле в формате png,


тут же переименовываю ее в gif и закидываю на сервер.

Вот результат, она же без потери качества



Знаете, вот скрин не очень оставлю ненадолго кнопку вместо старой, заходите, сами посмотрите - http://muz-forum.com/forumdisplay.php?f=99

Последний раз редактировалось Viuga; 18.07.2014 в 09:20.
Viuga вне форума   Ответить с цитированиемОтветить с цитированием
Пользователь сказал cпасибо:
Veter (18.07.2014)

Старый 18.07.2014, 21:04 #69 (Ссылка)
Администратор
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Viuga Посмотреть сообщение
Наверняка, все давно об этом знают, давно и благополучно используют, а вот для меня это стало открытием
В некоторых стилях есть такое. Тупо измененные расширения кнопок, иконок. Но это как бы неправильно...
Veter вне форума   Ответить с цитированиемОтветить с цитированием

Старый 18.07.2014, 21:19 #70 (Ссылка)
Супермодератор
Дополнительная информация
По умолчанию

Цитата:
Сообщение от Veter Посмотреть сообщение
Тупо измененные расширения кнопок
Тупо, говоришь. Ну ок. Не поленюсь, поставлю на живой форум еще десяток стилей и в каждый тупо загружу новые кнопки - посмотрим.
От стиля ли это зависит?
Viuga вне форума   Ответить с цитированиемОтветить с цитированием

Ответ

Опции темы

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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Услуги веб-дизайна html/css/js CDesign Дизайн и верстка 6 15.08.2019 14:15
Услуги дизайна сайтов lex86 Дизайн и верстка 33 27.08.2018 09:50
Посоветуйте вариант дизайна Nyhsa Вопросы по дизайну 10 31.07.2016 01:52
Предлагаю услуги веб-дизайна Web_Site_Design Дизайн и верстка 3 25.11.2015 16:16
Стоит ли идти на курсы дизайна? konstantin42 Web дизайн 1 24.04.2010 21:43


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

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

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

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

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