Как изменить лого форума

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 на ширину и высоту загруженного изображения соответственно

Очистить кеш, на форуме и в браузере.
NB! При обновлении движка рекомендованным способом Обновление phpBB 3.2.x to phpBB 3.2.x все эти изменения будут отменены.

Предпочтительный способ
Создать свой собственный стиль на основе prosilver
1. Создать папку, например green в папке styles
2. Создать в ней файл style.cfg следующего содержания

# General Information about this style
name = green
copyright = © phpbbguru.net
style_version = 3.2.7
phpbb_version = 3.2.7

# Parent style
parent = prosilver

2. Создать папку theme папке green
3. В папке theme создать папку images
3. Загрузить туда файл с изображением логотипа, например sibir-logotip.png
4. В папке theme создать файл stylesheet.css

@import url("../../prosilver/theme/normalize.css?v=3.2");
@import url("../../prosilver/theme/base.css?v=3.2");
@import url("../../prosilver/theme/utilities.css?v=3.2");
@import url("../../prosilver/theme/common.css?v=3.2");
@import url("../../prosilver/theme/links.css?v=3.2");
@import url("../../prosilver/theme/content.css?v=3.2");
@import url("../../prosilver/theme/buttons.css?v=3.2");
@import url("../../prosilver/theme/cp.css?v=3.2");
@import url("../../prosilver/theme/forms.css?v=3.2");
@import url("../../prosilver/theme/icons.css?v=3.2");
@import url("../../prosilver/theme/colours.css?v=3.2");
@import url("../../prosilver/theme/responsive.css?v=3.2");
@import url("green.css?v=3.2");

5. В папке theme создать файл green.css

.site_logo {
	display: inline-block;
	width: 204px;
	height: 90px;
	background-image: url("./images/sibir-logotip.png");
}

Заменить 204 и 92 на ширину и высоту загруженного изображения соответственно, если это необходимо
Заменить sibir-logotip.png, если вы загрузили файл с изображением под другим именем.
6. Установить стиль и назначить его используемым по умолчанию.

Изменить логотип форума, поменять лого на форуме, как сменить logotip на форумах, расположение логотипа форума

Прежде чем говорить об изменении логотипа на форуме, сделаем маленькое отступление от темы!

Как-то, на другом сайте, я уже писал о теме изменения логотипа на форуме.

Но вот, вышла новая версия форума, и эта статья стала не актуальна.

Если сейчас, я исправлю эту статью, то, когда выйдет новая версия, эту страницу опять надо исправлять! Но мало кто любит, что-то исправлять! Ну, по крайней мере не так часто!

Мы будем учиться искать логотип, где он находится! Лучше уметь ловить рыбу, чем иметь одну рыбу!

Начнём с того, что определим, что мы будем искать!

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

Тут надо отметить, что мы собственно увидели, когда нажали пр. кнопку мыши. Мы видим здесь то, что это не простая картинка поставленная на форуме, т.к. не строки скопировать изображение, и скопировать ссылку на изображение!

Из этого делаем вывод, что картинка сидит, скорее всего в background —  е, это сказано на будушее и мы вернёмся к этому!

В браузере Опера, примерно также…

В других браузерах, вам придётся разбираться самостоятельно.

Можно открыть код, как вам нравится, вот смотрим, что я поделил экран пополам.

Для наглядности я сделаю другой скрин и удалю все лишнее, чтобы вы смогли увидеть то, что мы ищем! А именно логотип форума. Мы видим, что  высветилась определённая строчка.

В выделенном состоянии нажимаем опять пр. кнопку мыши – Copy.

Вот эта строчка:

<span class=»imageset site_logo»></span>

Что она обозначает!? Что есть какой-то класс, который называется

imageset

, и вместе с ним в связке идёт другой класс

site_logo.

Далее нам нужно чтобы было свойство

background.

И скорее всего

img logo.

Если мы найдём такие совпадения, то это точно то, что мы искали!

Теперь вопрос, как искать!? Не перебирать же все файлы подряд… да представляю работёнку.

Для  этого мы будем использовать программу Dreamweaver, хоть многие отзываются плохо об этой программе, но я так не думаю! Они просто не умеют ею пользоваться!

Если мы забьем в поиск

<span class=»imageset site_logo»></span>

, то в принципе мало вероятно, что  такая запись существует. Не буду углубляться почему…

Нажимаем поиск – и правда. Смотрим в самом низу – не найдено.

Но поскольку я уже знаю, что искать, то скажу, что надо забивать в поиск:

.imageset.site_logo

Точка в стилях css обозначает класс.

И находится документ, и автоматически открывается страница, где прописаны все свойства данного элемента:

И тут мы видим строчку :

url(«./images/site_logo.gif»);

Которая нам говорит, что логотип находится на расстоянии в одну папку от открытого документа.

И так же видим наш

background.

Значит мы нашли то, что искали!

Теперь найдём наш документ, найдём логотип.

Наводим мышку на вкладку, и выходит местоположении страницы.

Ну вот мы и нашли этот документ,  в котором прописаны свойства логотипа, местоположение его!  Если вы посмотрите чуть выше, то увидите папку  images. Где, собственно, должен лежать логотип.

Но давайте удостоверимся, что именно в этой папке и лежит наш логотип!

Вот теперь вы знаете как найти, и где лежит логотип форума! Вы его можете изменить, вы можете его спрятать, сдвинуть, вообще убрать изменив стили.

Вы теперь можете изменить свой логотип на форуме так, как вам нарвится!

Изучайте код!

Пригодится!

Вот и всё!

Можете не благодарить, лучше помогите!

COMMENTS+

 
BBcode

Note: There is an extension to achieve this: Site Logo BUT for the moment, it is a Release Candidate.

1. Getting Started
2. Uploading your Logo
3. Configuring your Logo
4. Troubleshooting
5. Notes

This explains how to change the default logo on your phpBB 3.2.x board.

1. Getting Started
If you have not uploaded files before, or do not know how to use FTP or SSH, you will need to be able to do that. The Knowledge Base has a short guide FTP. See Tools needed to set up and customise phpBB for some client suggestions..

2. Uploading Your Logo
Using your FTP or SSH client, you need to upload the image to: /styles/prosilver/theme/images/. You can name your image the same as the default logo site_logo.gif or give it a different name.

You need to find yourself a logo to be uploaded which you are allowed to use or else create your own. Be aware that no browser will be able to display all image types, therefore, it is best to limit the image to one of the commonly supported types: png, jpg, or gif.

3. Configuring your logo
Download, backup, and open the file /styles/prosilver/theme/colours.css in a text editor (see Tools needed to set up and customise phpBB for some suggestions) and find:

colours.css wrote:.site_logo {
background-image: url(«./images/site_logo.gif»);
}

Edit the file name to match your new logo.

Download, backup, and open the file /styles/prosilver/theme/common.css in a text editor and find:

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

Edit the width, and height to match your new logo.

Save and upload the colours.css and the common.css files, to the same location on your server, using your FTP client (overwriting the existing files).

From the ACP, Purge the board cache. The button to do that is on the right side of the main screen.

Your new logo should now be displaying in the forums.

4. Troubleshooting
If the logo is not displaying properly:

1. Try refreshing your browser. A normal browser refresh reloads the page from the browser cache, you will need to reload the page from the server, also known as a hard refresh. Browsers vary but it can usually be accomplished:
   • For Windows and Linux using: Ctrl + F5 or Shift + Reload
   • For Mac using: ⌘ (Cmd) + F5 or Shift + Reload
2. Check all the edits again. A single mistyped character in the image name could prevent it from displaying.
3. If part of the image is not showing then you likely have not adjusted the padding settings correctly.
4. Double check that you’ve followed all the steps, and made the changes to the style you’re using and not a different one.

5. Notes (optional stuff)
The background-image: url is the path to the image is relative to the /styles/prosilver/theme/ directory. So, if your new board logo was called fish_heads.png and for some reason you put the image in to root of your board the path would be ../../../fish_heads.png.

If your image needs to be resized it is best to use an image editing application to resize it because that will, generally, result in a better quality image display. However, you can use a CSS property. On a new line below the background-image: property add the line:

background-size: 298px 104px; (width in pixels; height in pixels.) The width and height properties in common.css would also need to be similarly adjusted.
——————————————
Credit to P_I for pointing out the css changes.