Как изменить стандартный логотип на phpBB 3.2 / 3.3

[Татьяна5]

1) Загрузить изображение в папку /styles/prosilver/theme/images/

2) Открыть файл /styles/prosilver/theme/colours.css
Найти

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

.site_logo {
	background-image: url("./images/site_logo.gif");
}

Заменить site_logo.gif на название изображения, которое загрузили

3) Открыть файл /styles/prosilver/theme/common.css
Найти

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

.site_logo {
	display: inline-block;
	width: 149px;
	height: 52px;
}

Заменить 149 и 52 на ширину и высоту загруженного изображения соответственно

Очистить кеш, на форуме и в браузере

[KEMnEP]

Подключить через font-face?

это загрузка шрифта и подготовка для устройств, где его нет.

[Leo Angel]

И как и где его подключать?

[KEMnEP]

Буду дома, покажу как примерно делается, если сами не поймёте, или раньше не подскажут.

[Leo Angel]

KEMnEP, Спасибо!

[KEMnEP]

Leo Angel, Подключать в css, чем раньше, тем лучше, в идеале самой первой строчкой.

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

@font-face {
  font-family: "Star Jedi Hollow";
  src: local("StarJediHollow"),
  url("../fonts/starjhol.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

где: font-family: "Star Jedi Hollow"; указать то же, что указали в font-family главным шрифтом у элемента,
src: url("../fonts/starjhol.woff2") format("woff2"); путь и сам файл с шрифтом (обязательно кодированным в woff2) относительно css папки главной темы, так если бы он лежал непосредственно в ней.
font-weight: 400; вес шрифта относительно названия, который можно посмотреть в таблице
font-style: normal; говорит, что шрифт не наклонный
font-display: swap;. говорит показывать резервный шрифт, пока не загрузится этот, после быстро поменять. Это будет только при первой загрузке до попадания в кэш устройства.
Если можете менять html для ускорения загрузки шрифта можно вставить в head сразу после title

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

<link rel="preload" href="fonts/starjhol.woff2" as="font" type="font/woff2" crossorigin>

Где путь до папки шрифта уже относительно файла html который лежал бы в корне стиля. Данный метод не обязателен, просто ускоряет загрузку шрифта.

Все пути в примере не касаются реального phpBB, так что скорей всего придётся править.

Отправлено спустя 4 минуты 32 секунды:
к примеру в самом движке так подключается FontAwesome

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

@font-face {
    font-family: 'FontAwesome';
    src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

подключение как и многое в phpBB уже устарело в движке. .eot шрифт интернет эксплоера

[Leo Angel]

KEMnEP, спасибо!
Частично разобрался сам, частично с Вашей помощью.
Опишу всё, может, кому-то понадобится.

Я делал так.
В папке стиля, например, styles/prosilver/theme/, создаём файл myfonts.css
После этого в файле stylesheet.css, находящимся в той же папке, прописываем снизу строку:
@import url("myfonts.css?v=3.3");
Далее заполняем файл myfonts.css своими шрифтами.
Как пример,

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

@font-face {
	font-family: 'Lightgraph';
	src: url('./fonts/Lightgraph.eot#') format('eot'), 
	     url('./fonts/Lightgraph.ttf') format('truetype'),
	     url('./fonts/Lightgraph.woff') format('woff'),
	     url('./fonts/Lightgraph.woff2') format('woff2');
	}
@font-face {
	font-family: 'Wolves Vs Monster DEMO';
	src: url('./fonts/Wolves Vs Monster DEMO.otf') format('otf'),
	     url('./fonts/Wolves Vs Monster DEMO.ttf') format('truetype'),	
	     url('./fonts/Wolves Vs Monster DEMO.woff2') format('woff2'); 
	}	

Необходимые шрифты нужно скачать в нужных форматах и положить в папку fonts, полный путь styles/prosilver/theme/fonts

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

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

<link rel="preload" href="{T_THEME_PATH}/fonts/Lightgraph.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="{T_THEME_PATH}/fonts/Wolves Vs Monster DEMO.woff2" as="font" type="font/woff2" crossorigin>

Проверил в нескольких мобильных браузерах, всё работает корректно и даже первый раз загружается быстро.
Ну и, естественно, нужно в стилях описать все нужные вещи - отступы, размеры шрифтов и т.д.

Спасибо за помощь ещё раз!

[KEMnEP]

Leo Angel, ненадо подключать eot и ttf - это точно, к вебу они отношения нынче не имеют, только вес добавят к странице, ниже скорость загрузки. Впрочем как и импорт. Я бы в нынешних реалиях выкинул бы и woff просто. Он тоже уже лишний в 2024 году. Подключайте только woff2, вполне хватает для веб сайта.

[Leo Angel]

А куда тогда бросить строки с @font-face?

[KEMnEP]

А куда тогда бросить строки с @font-face?

Хотя бы просто удалите лишние файлы шрифтов (не woff2) и их подключения в своём коде.
В идеале выполнить Re: [3.3] Самый лёгкий стиль (там только про нормалайз спорно), а подключение шрифта @font-face, как и говорил раньше, сделать в самом начале файла. Для красоты кода придумали предпроцессоры типа scss и сборщики, импорты только замедляют загрузку, но так мы точно далеко уйдём от темы топика.

[ФармакоМафия]

Добрый день.

После обновления до версии 3.3.12. решил обновить логотип сайта.

И опять вижу пустой placeholder.

Сделал правку в colours.css:

.site_logo {
background-image: url("./images/site_logo-pharmacomafia_logo-2024.svg");
}

И в common.css:

.site_logo {
background-repeat: no-repeat;
display: inline-block;
width: 400px;
height: 133px;

файл логотипа на FTP:

...forum/styles/prosilver/theme/images/site_logo-pharmacomafia_logo-2024.svg

Кеш на форуме и в несколькких браузерах чистил.

Работаю из Украины через Линукс Убунту, Proton VPN и FileZilla, хостинг TimeWeb.Ru

адрес форума:

https://pharmacomafia.com/

[rxu]

ФармакоМафия, проверьте свои правки, сейчас код в colours.css выглядит так

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

.site_logosite_logo {
	background-image: url("./images/site_logo-pharmacomafia_logo-2024.png");
}

[ФармакоМафия]

Может не сразу обновляется, потому что используется CloudFlare?

[rxu]

У вас опечатка в коде вообще-то. .site_logosite_logo.

[ФармакоМафия]

Спасибо, исправлю

[ФармакоМафия]

Я через файл менеджер вижу участок кода в colours.css без задвоения:

.site_logo {
background-image: url("./images/site_logo-pharmacomafia_logo-2024.svg");
}

И через FileZilla тоже без задвоения.

Opera Snapshot_2024-06-17_215602_hosting.timeweb.ru.png

Отправлено спустя 4 минуты 26 секунд:
а в common.css вижу:

.site_logo {
background-repeat: no-repeat;
display: inline-block;
width: 400px;
height: 133px;
}

Отправлено спустя 26 секунд:
может CloudFlare неверно отображает?