Кнопки соц сетей

[tvq12]

Подскажите пожалуйста, как применительно к phpBB вставить кнопки соц сетей? За основу взял информацию вот отсюда https://inter-net.pro/css/knopki-sotssetej-dlya-sajta На сайт всё стало без проблем, а для форума пока не получается.

[DesignerMix]

Эту тему смотрели? - viewtopic.php?t=981

[tvq12]

Это не то, что я хочу. Там устанавливаются кнопки с функцией "поделиться". А мне надо что-то типа такого: "Мы в соцсетях" и по кнопке переход на мою страницу в соцсетях. Кроме всего во всех расширениях отсутствует Инстаграм, а мне он нужен.

[DesignerMix]

tvq12, не знаю как на счет расширений, но то, что вы сказали можно сделать правкой файлов темы оформления, если например используется тема на основе prosilver и если в этой теме не собственный файл overall_header.html то можно открыть его по пути папка_с_форумом\styles\prosilver\template\overall_header.html и после строк:

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

			</div>
			<!-- EVENT overall_header_headerbar_after -->
		</div>
		<!-- EVENT overall_header_navbar_before -->
		<!-- INCLUDE navbar_header.html -->
	</div>

добавить нужный вам код с картинками соцсетей и ссылками на них.

[tvq12]

Кнопки вставились, но я не знаю, как применить к ним стили. На сайте в стили добавлял такой код:
.social__button {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.social a {
display: flow-root;
width: 46px;
height: 46px;
margin: 0 10px 10px 0;
padding: 6px;
text-align: center;
background: #fff;
color: #000;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);

[DesignerMix]

В какой файл стилей добавляли код (нужно имя и путь до файла)? И очищали-ли кэш браузера и форума сэпосле изменения файла стилей?

[tvq12]

В тот-то и дело, что ни в какой. Не знаю куда добавить для форума.
И ещё, если добавляю код кнопок в overall_header.html (как посоветовали вы), то слова "Мы в соцсетях" отображаются нормально, если пробую в overall_footer.html (как хотелось бы мне), то отображаются кракозябриками.

Отправлено спустя 14 минут 8 секунд:
Что бы было понятнее о чём я говорю добавлю скрины.

Это header



Это footer



Отправлено спустя 3 минуты 43 секунды:
А задумано всё так:

[DesignerMix]

Дайте ссылку на форум, чтобы я сказал куда добавлять

[tvq12]

https://chudo-hata.pp.ua/forum/

[DesignerMix]

Я так подумал, а зачем париться вообще, просто оформите стили вот так:

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

<style type="text/css">
.social__button {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.social a {
display: flow-root;
width: 46px;
height: 46px;
margin: 0 10px 10px 0;
padding: 6px;
text-align: center;
background: #fff;
color: #000;
border: 1px solid #ccc;
border-radius: 6px;
box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 0 50px rgba(0,0,0,0.1);
</style>

Добавьте это в тот файл который я сказал ПОСЛЕ кода который я указывал и ПЕРЕД кодом кнопок к которым этот стиль должен применяться

[tvq12]

Спасибо. Стили сработали. И уже в принципе так можно жить
Осталось две небольшие проблемы. Первая - это не меняется цвет кнопок при наведении курсора (на сайте меняется). Вторая - если размещать в футере, то текст отображается кракозябриками.

[DesignerMix]

Первая - это не меняется цвет кнопок при наведении курсора (на сайте меняется)

А с чего ему меняться? В ваших стилях это не описано!

Вторая - если размещать в футере, то текст отображается кракозябриками.

Не в той кодировке сохраняете файл. Попробуйте UTF без BOM.

[tvq12]

Со сменой цвета извиняюсь. Потерял кусок кода стилей

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

.youtube a:hover {background: #c4302b; color: #fff;}
.twitter a:hover {background: #00acee; color: #fff;}
.instagram a:hover {background: #3f729b; color: #fff;}
.facebook a:hover {background: #3b5998; color: #fff;}

А вот с кодировкой не понял. Я открываю файл header и footer абсолютно одинаково через Notepad2, пишу эту надпись "Мы в соцсетях" руками и закрываю файл с сохранением. Где я теряю кодировку и как мне это поправить?

[DesignerMix]

Notepad2

Сам им не пользуюсь, но нашел в FAQ что это делается через меню File -> Encoding.

[tvq12]

Большое спасибо вам. Всё получилось.