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

Board index phpBBex 1.x Мастерская

Description: Только готовые решения! Статьи, заметки, моды и другие полезности для phpBBex 1.x и phpBB 3.0.x.
Moderator: Поддержка

Post #1by JoteRuso » 17.10.2012, 16:35

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


что-нибудь вроде вот этого:
17-10-2012 16-28-06.jpg


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

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


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


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

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

4) Потом идём в папку styles/prosilver/theme/ и открываем в ней файл common.css
Ищем в нём
Code: Select all
.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   padding: 0 5px;
И после этого фрагмента добавляем height: 200px; (в соответствии с высотой используемого в нашем примере рисунка - 200px).

Должно получиться:
Code: Select all
.headerbar {
   background: #ebebeb none repeat-x 0 0;
   color: #FFFFFF;
   padding: 0 5px;
   height: 200px;
Сохраняем и закрываем файл.

5) В этой же папке открываем файлик colours.css
В нём ищем фрагмент:
Code: Select all
.headerbar {
   background-color: #092a5d;
   background-image: url("{T_THEME_PATH}/images/bg_header.gif");
   color: #FFFFFF;
Меняем в этом фрагменте название рисунка шапки bg_header.gif на название нашего рисунка - myheader.jpg.
Соответственно, должно получиться:
Code: Select all
.headerbar {
   background-color: #092a5d;
   background-image: url("{T_THEME_PATH}/images/myheader.jpg");
   color: #FFFFFF;
Сохраняем и закрываем файл.

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

7) Идём в Админку и отключаем изображение стандартного логотипа:
17-10-2012 17-19-51.jpg

17-10-2012 17-21-20.jpg

17-10-2012 17-22-15.jpg

17-10-2012 17-23-10.jpg

17-10-2012 17-23-55.jpg

17-10-2012 17-24-41.jpg

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

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

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

Так выглядит страница портала
17-10-2012 16-16-28.jpg


Страница галереи
17-10-2012 17-43-44.jpg


Страница форума
17-10-2012 17-44-31.jpg


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

В течение какого-то времени можете посмотреть на это "живьём" по адресу www.joteruso.ru
Сразу предупреждаю, что это моя тестовая площадка и там постоянно происходят какие-то изменения!
Last edited by JoteRuso on 25.04.2013, 15:12, edited 5 times in total.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #2by KDit » 17.10.2012, 17:59

А как с отображением на различных расширениях экранов?
Internet Explorer - это программа, с помощью которой можно зайти на сайт www.google.com/chrome и скачать себе браузер.
KDit
Мастер
Avatar
Reputation: 65
With us: 5 years

Post #3by JoteRuso » 17.10.2012, 18:09

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/.

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

Дёшево и сердито.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #4by VEG » 17.10.2012, 19:01

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

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

Image

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

Image

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

Image

А это сайт общего назначения, и он практически полностью повторяет статистику по СНГ. Так вот. В общем я бы не стал отбрасывать посетителей с дисплеями 1024×768. С учётом скроллбара и возможной боковой панельки нужно ориентироваться на 960 пикселей по ширине. Эту ширину можно даже рассматривать как стандартную.
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 29
Location: Минск, Беларусь
Reputation: 1573
With us: 5 years 3 months

Post #5by VEG » 17.10.2012, 19:10

JoteRuso wrote:Если ширину форума не зафиксировать, то рисунок (при увеличении ширины форума) начнёт повторяться с правой стороны.
Это можно легко избежать. Просто нужно заготовить изображение, которое будет хорошо отображаться как при ширине 960 пикселей, так и при 1280. Ну и соответственно прописать минимальную и максимальную ширину страницы. Если изображение в стиле как на ваших скриншотах, «заполнитель» стоит сделать по бокам, а само изображение отцентрировать при помощи background-position.
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 29
Location: Минск, Беларусь
Reputation: 1573
With us: 5 years 3 months

Post #6by JoteRuso » 17.10.2012, 19:22

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

За ссылку на статью - спасибо. Но я там мало чего понимаю...
Если для кого-то это просто и понятно, то лучше пусть сделают такую же "научно-популярную" статью на эту тему, с указанием "Где, Что и Как". Уверен, что многие будут благодарны за такую "разжёванную" информацию. :smile:
Я-то, уж, точно был бы благодарен.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #7by VEG » 17.10.2012, 19:37

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

Там, где вы писали:
Code: Select all
   background-image: url("{T_THEME_PATH}/images/myheader.jpg");
Добавьте ещё строку:
Code: Select all
   background-position: center top;
Это выровняет фоновое изображение посередине.
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 29
Location: Минск, Беларусь
Reputation: 1573
With us: 5 years 3 months

Post #8by JoteRuso » 17.10.2012, 19:55

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

VEG wrote:Спасибо за ваши инструкции.
Не совсем понял, о чём сейчас шла речь... :eh: Если речь о собственно теме, то не за что )))
А если это был сарказм...
Я ведь не прошу делать такие "научно-популярные" статьи именно Вас.
Тут много и других людей, хорошо разбирающихся в кодах.
Если у них будет время и желание сделать что-нибудь подобное для нас - мы им только "спасибо" скажем.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #9by VEG » 17.10.2012, 20:20

JoteRuso wrote:А если это был сарказм...
Нет, это ни в коем случае не сарказм. Как раз материалов для начинающих очень не хватает нашему движку. К сожалению, мои статьи в основном рассчитаны на уже подготовленного пользователя, и это их недостаток. Подробнейшие статьи наподобие вашей — большой плюс.
JoteRuso wrote:так как либо придётся дополнительно создавать элементы, заполняющие пустое пространство по бокам
Ну да, придётся наполнить изображение по бокам какими-то элементами, которые будут скрываться на маленьких разрешениях. Зато проблема с разрешениями таким образом будет решена :)
Не воспринимайте это как критику. Я просто пишу об этом здесь, чтобы читающие эту инструкцию смогли сделать резиновую версию при желании.
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 29
Location: Минск, Беларусь
Reputation: 1573
With us: 5 years 3 months

Post #10by JoteRuso » 17.10.2012, 22:31

VEG wrote:Не воспринимайте это как критику. Я просто пишу об этом здесь, чтобы читающие эту инструкцию смогли сделать резиновую версию при желании.
Всё, что идёт на пользу пользователям этого движка, всегда только приветствуется! :)
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #11by NO SWEAR » 18.10.2012, 11:38

спасибо за пост. только вот с лого ничего не вышло. как ссылка на главную работает только тот участок где размещается лого по дефолту. стоит минимальная ширина 980 пикс, максимальная 1280. так же добавлено
Code: Select all
background-position: center top;

Добавлено спустя 11 минут 30 секунд:
всё разобрался. это протупил :oops: не изменил размер лого в настройках. еще раз спасибо за пост.
NO SWEAR M
Гуру
Avatar
Age: 40
Reputation: 95
With us: 4 yaers 11 months

Post #12by JoteRuso » 18.10.2012, 11:53

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

P.S. Хотел дополнить свой второй пост (с дополнением по установке прозрачного лого) несколькими рисунками, но время правки уже истекло... Ну ладно, думаю, что и так всё должно быть понятно. :)
Last edited by JoteRuso on 18.10.2012, 14:45, edited 2 times in total.
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #13by NO SWEAR » 18.10.2012, 12:05

JoteRuso, всё работает. посмотреть
NO SWEAR M
Гуру
Avatar
Age: 40
Reputation: 95
With us: 4 yaers 11 months

Post #14by JoteRuso » 18.10.2012, 12:19

NO SWEAR wrote:всё работает.
Я очень рад )))
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #15by VEG » 18.10.2012, 13:05

JoteRuso wrote:P.S. Хотел дополнить свой второй пост (с дополнением по установке прозрачного лого) несколькими рисунками, но время правки уже истекло... Ну ладно, думаю, то и так всё должно быть понятно. :)
На первое сообщение это ограничение не должно действовать. Проверьте, есть ли кнопка «Правка» в первом сообщении.
С наилучшими пожеланиями, Евгений
VEG M
Администратор
Avatar
Age: 29
Location: Минск, Беларусь
Reputation: 1573
With us: 5 years 3 months

Post #16by JoteRuso » 18.10.2012, 14:50

VEG wrote:Проверьте, есть ли кнопка «Правка» в первом сообщении.
Кнопка в первом сообщении есть. Но необходимости править первое сообщение - нет. Если перенести туда часть второго моего поста, то получится дублирование, так как во втором посте я уже удалить перенесённый текст не могу.
Ладно, это всё мелочи жизни. :smoke:
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #17by JoteRuso » 14.12.2012, 21:06

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


Это самый простой выход. =)
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #18by NO SWEAR » 14.12.2012, 22:47

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

было

14.122.png


стало

14.12.png
NO SWEAR M
Гуру
Avatar
Age: 40
Reputation: 95
With us: 4 yaers 11 months

Post #19by JoteRuso » 15.12.2012, 00:58

Так и знал, что про этот способ тоже вспомнят )))
Просто для многих гораздо проще передвинуть точку в админке, чем лезть с исправлениями в css-шаблоны. :smile:
JoteRuso M
Topic author, Гуру
Avatar
Location: Москва, Россия
Reputation: 534
With us: 5 years 3 months

Post #20by madbatman » 10.02.2013, 13:58

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

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

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

Image

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

Image

Три раза переделывал по инструкции и не получается никак.
madbatman M
Бывалый
Avatar
Age: 47
Location: Москва
Reputation: 4
With us: 4 yaers 5 months

Next

Return to Мастерская