Замена стандартной шапки форума на свой рисунок

[JoteRuso]

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

что-нибудь вроде вот этого:

На данный момент я предлагаю Вам зафиксировать ширину своего форума, чтобы не гадать, как сделать так, чтобы ваш рисунок удлинялся или укорачивался вместе с форумом. Если вы используете мод портала, то рекомендуемая минимальная ширина - 1280 пикселей. Больше - можно. Меньше - нельзя (модули портала съедут в сторону и будет, мягко говоря, некрасиво)

Ширина вашего рисунка расчитывается просто: От ширины форума отнимайте 40 пикселей (20 справа и 20 слева). То есть, если вы выбрали ширину в 1400 пикс., то ширина вашего рисунка должна быть 1360 пикс. Но я буду использовать пример с шириной форума в 1280 пикс.

Итак.
1) Идём в Админку и задаём все необходимые значения: фиксируем ширину форума и отключаем отображение названия и описания сайта (чтобы они не накладывались на наш рисунок).

2) Подготавливаем свой рисунок с учётом его ширины (высоту рисунка определяйте сами на свой вкус).
Формат рисунка - любой распространённый (но чем меньше будет "весить" ваш рисунок, тем быстрее он будет загружаться при открытии вашего форума.
Если рисунок полноцветный (как в моём примере), то предпочтительнее (на мой взгляд) использовать формат .jpg Название рисунка - на ваш вкус.
Допустим, что мы назвали его myheader.jpg И размеры нашего рисунка - 1240 на 200 пикс.

3) Загружаем готовый рисунок на сервер в папку styles/prosilver/theme/images/

4) Потом идём в папку styles/prosilver/theme/ и открываем в ней файл common.css
Ищем в нём

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

.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   padding: 0 5px;


И после этого фрагмента добавляем height: 200px; (в соответствии с высотой используемого в нашем примере рисунка - 200px).

Должно получиться:

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

.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   padding: 0 5px;
   height: 200px;

Сохраняем и закрываем файл.

5) В этой же папке открываем файлик colours.css
В нём ищем фрагмент:

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

.headerbar {
   background-color: #092a5d;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;

Меняем в этом фрагменте название рисунка шапки bg_header.gif на название нашего рисунка - myheader.jpg.
Соответственно, должно получиться:

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

.headerbar {
   background-color: #092a5d;
   background-image: url("{T_THEME_PATH}/images/myheader.jpg");
   color: #FFFFFF;

Сохраняем и закрываем файл.

6) Обновляем шаблоны, темы и чистим хэш.

7) Идём в Админку и отключаем изображение стандартного логотипа:

В принципе, это можно сделать и сразу после первого шага (пока вы не вышли из Админки)

Вот, собственно, и всё. Теперь у вашего форума новая шапка, сделанная согласно вашему высокому вкусу!

Ну, или согласно моему низкому вкусу:

Так выглядит страница портала

Страница галереи

Страница форума

Как видим, всё везде точно подогнано и нигде ничего не вылезает. :)

В течение какого-то времени можете посмотреть на это "живьём" по адресу www.joteruso.ru
Сразу предупреждаю, что это моя тестовая площадка и там постоянно происходят какие-то изменения!

[KDit]

А как с отображением на различных расширениях экранов?

[JoteRuso]

KDit, сейчас мало у кого остались экраны с разрешениями меньше чем:
HD 720p — 1280×720 (16:9)
WXGA — 1280×768 (5:3)
SXGA — 1280×1024 (5:4)

Если кто-то думает о нормальном отображении форума на "доисторических" мониторах (с меньшим разрешением), то об установке портала ему думать не стОит, так как портал на таком низком разрешении отображаться правильно не будет. А если без портала (и я об этом написАл выше), то можно и меньшую ширину использовать. Вплоть до поддерживаемой phpBBex (v1.5.2) минимальной ширины.

Если ширину форума не зафиксировать, то рисунок (при увеличении ширины форума) начнёт повторяться с правой стороны.
Лично мне ширина в 1280 пикс. кажется оптимальной даже для моего монитора (Full HD).

Добавлено спустя 26 минут 3 секунды:
Небольшое дополнение:

Если хотите, чтобы при клике на ваш рисунок происходил переход на главную страницу форума (как это происходило при использовании логотипа по умолчанию), то можно схитрить и создать свой логотип. Прозрачный. В формате .png
Размеры - на 6 пикселей меньше вашего рисунка (как по ширине, так и по высоте).
Я, например, сделал его размером 1234х194 (при размере картинки 1240х200). Его "вес" составил 4 kb.
Затем заливаете его в папку /styles/prosilver/imageset/.

После идёте в Админку /Стили/Наборы рисунков/Изменить и задаёте для Главного логотипа свой только что залитый рисунок с указанием (если помните), либо обнулением (для автоматического определения) его размеров.
Всё. :)
На шапке ничего не изменилось, но при наведении на неё мышкой появляется ладошка с возможностью перехода на главную страницу из любого места форума (будь то форум, портал или галерея (у кого они есть)).

Дёшево и сердито.

[VEG]

Маленькое замечание: если поставить минимальную ширину как 1280, то на экранах с разрешением 1280 по ширине будет появляться горизонтальный скроллбар. Чтобы его не было, нужно указывать размер с учётом вертикального скроллбара в браузере пользователя и наличия боковой панельки. То есть хотя бы пикселей 80 ещё стоит отнять.

Что касается разрешений в целом. Совсем недавно проводил анализ разрешений, браузеров и ОС у пользователей в рунете и на своих форумах.



Как видно, в целом по рунету разрешение 1024×768 — второе в общем зачёте! Оно установлено на каждом 6 компьютере, с которого выходят в интернет.



Сразу видно, что foobar2000.ru пользуются неравнодушные к мультимедиа люди. Самое популярное разрешение — это FullHD 1920×1080 (очевидно, на мониторах 23-24 дюйма, сам пользуюсь 1920×1200). Далее идёт 1280×1024 (очевидно, старые 19 дюймовые мониторы, у самого недавно такой был). Вообще статистика по этому сайту мало пересекается со статистикой по рунету. Зато если сравнивать статистику fb2k.ru со статистикой phpbbex.com или других ресурсов с IT уклоном — чётко прослеживаются общие тенденции среди айтишников.



А это сайт общего назначения, и он практически полностью повторяет статистику по СНГ. Так вот. В общем я бы не стал отбрасывать посетителей с дисплеями 1024×768. С учётом скроллбара и возможной боковой панельки нужно ориентироваться на 960 пикселей по ширине. Эту ширину можно даже рассматривать как стандартную.

[VEG]

Если ширину форума не зафиксировать, то рисунок (при увеличении ширины форума) начнёт повторяться с правой стороны.

Это можно легко избежать. Просто нужно заготовить изображение, которое будет хорошо отображаться как при ширине 960 пикселей, так и при 1280. Ну и соответственно прописать минимальную и максимальную ширину страницы. Если изображение в стиле как на ваших скриншотах, «заполнитель» стоит сделать по бокам, а само изображение отцентрировать при помощи background-position.

[JoteRuso]

VEG, это для меня уже непонятная "высшая математика" )))
Я же - "чайник" во всех этих кодах. До всего приходится доходить исключительно методом проб и ошибок.
И статья эта была написана для таких же "чайников", которые не знают как, но им очень хочется
Всё разжёвано и даже картинки прилагаются, чтобы скучно не было

За ссылку на статью - спасибо. Но я там мало чего понимаю...
Если для кого-то это просто и понятно, то лучше пусть сделают такую же "научно-популярную" статью на эту тему, с указанием "Где, Что и Как". Уверен, что многие будут благодарны за такую "разжёванную" информацию.
Я-то, уж, точно был бы благодарен.

[VEG]

Спасибо за ваши инструкции.

Там, где вы писали:

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

   background-image: url("{T_THEME_PATH}/images/myheader.jpg");

Добавьте ещё строку:

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

   background-position: center top;

Это выровняет фоновое изображение посередине.

[JoteRuso]

Это выровняет фоновое изображение посередине.

Если логика мне не отказывает, то при фиксированной ширине форума это лишено смысла. А при разной минимальной и максимальной ширине форума этого будет недостаточно, так как либо придётся дополнительно создавать элементы, заполняющие пустое пространство по бокам (Вы чуть выше назвали его "заполнителем"), либо как-то ещё настраивать автоматическое увеличение (или уменьшение) рисунка до максимально (минимально) установленной ширины, либо этот рисунок начнёт уже не двоиться, а троиться (справа и слева от зацентрованного изображения).
Или я опять чего-то недопонимаю?

Спасибо за ваши инструкции.

Не совсем понял, о чём сейчас шла речь... Если речь о собственно теме, то не за что )))
А если это был сарказм...
Я ведь не прошу делать такие "научно-популярные" статьи именно Вас.
Тут много и других людей, хорошо разбирающихся в кодах.
Если у них будет время и желание сделать что-нибудь подобное для нас - мы им только "спасибо" скажем.

[VEG]

А если это был сарказм...

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

так как либо придётся дополнительно создавать элементы, заполняющие пустое пространство по бокам

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

[JoteRuso]

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

Всё, что идёт на пользу пользователям этого движка, всегда только приветствуется! :)

[NO SWEAR]

спасибо за пост. только вот с лого ничего не вышло. как ссылка на главную работает только тот участок где размещается лого по дефолту. стоит минимальная ширина 980 пикс, максимальная 1280. так же добавлено

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

background-position: center top;

Добавлено спустя 11 минут 30 секунд:
всё разобрался. это протупил не изменил размер лого в настройках. еще раз спасибо за пост.

[JoteRuso]

NO SWEAR, попробуйте сначала сделать всё так, как я написал.
Зафиксировать ширину форума, установить свою шапку и наложить на неё прозрачный лого чуть меньшего (чем шапка) размера.
И проверьте, работает ли эта схема на вашем форуме.
Если работает - шаг за шагом вносите свои изменения и смотрите, на каком шагу появятся "проблемки". Так хоть будет понятно, на что надо обратить внимание.

P.S. Хотел дополнить свой второй пост (с дополнением по установке прозрачного лого) несколькими рисунками, но время правки уже истекло... Ну ладно, думаю, что и так всё должно быть понятно. :)

[NO SWEAR]

JoteRuso, всё работает. посмотреть

[JoteRuso]

всё работает.

Я очень рад )))

[VEG]

P.S. Хотел дополнить свой второй пост (с дополнением по установке прозрачного лого) несколькими рисунками, но время правки уже истекло... Ну ладно, думаю, то и так всё должно быть понятно. :)

На первое сообщение это ограничение не должно действовать. Проверьте, есть ли кнопка «Правка» в первом сообщении.

[JoteRuso]

Проверьте, есть ли кнопка «Правка» в первом сообщении.

Кнопка в первом сообщении есть. Но необходимости править первое сообщение - нет. Если перенести туда часть второго моего поста, то получится дублирование, так как во втором посте я уже удалить перенесённый текст не могу.
Ладно, это всё мелочи жизни.

[JoteRuso]

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

Это самый простой выход. =)

[NO SWEAR]

выход еще проще в colors.css меняете на свою картинку и снежинки будут в нижней части а шапка останется прежней.

было

стало

[JoteRuso]

Так и знал, что про этот способ тоже вспомнят )))
Просто для многих гораздо проще передвинуть точку в админке, чем лезть с исправлениями в css-шаблоны.

[madbatman]

Спасибо за автору подробный мануал!

У меня вопрос.
На одном форуме всё отлично получилось, на другом не очень.

Съехали менюшки вправо.

Если делаю без картинки - все ОК, опять на месте.

Три раза переделывал по инструкции и не получается никак.