здравствуйте, подскажите где править шапку форума http://forym.sait161.ru/index.php?sid=f ... 162ebacc6e
Чтобы оно было адаптивно
Как убрать логотип PHP BB?
Какие использовать размеры изображения по ширине?
За ранее спасибо
Комментарии: 8

CabinetAdmin 26 окт 2016, 20:53 Сообщение

roma писал(а): Как убрать логотип PHP BB?
За него отвечает вот эта строка в хедере:

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

<a id="logo" class="logo" href="<!-- IF U_SITE_HOME -->{U_SITE_HOME}<!-- ELSE -->{U_INDEX}<!-- ENDIF -->" title="<!-- IF U_SITE_HOME -->{L_SITE_HOME}<!-- ELSE -->{L_INDEX}<!-- ENDIF -->">{SITE_LOGO_IMG}</a>
Тут надо экспериментировать, можно воспользоваться background-size, до определённого размера экрана использовать background-size: cover;, а когда экран будет меньше чем изображение, то background-size: contain;. Всё это надо применять к тому же классу, на котором висит изображение.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

roma 26 окт 2016, 21:39 Сообщение

Спасибо, а можете полностью код написать, и куда его вставить. Естественно чтобы на всех устройствах отображался корректно
  • 0

roma 27 окт 2016, 11:36 Сообщение

На гуру вычитал в color.css

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

.headerbar {
	background-color: #EAEAD0;
	background-image: url("./images/bg_header.gif");
	color: #FFFFFF;
	/* background-position: center center; */
    background-size: cover;
    height: 300px;
Но не достиг того чего хотел http://forym.sait161.ru/
  • 0

Resistant 27 окт 2016, 13:55 Сообщение

roma писал(а): Как убрать логотип PHP BB?
imageset.css
удалить
.imageset.site_logo {
background-image: url("./images/site_logo.gif");
padding-left: 175px;
padding-top: 130px;
}
  • 0

CabinetAdmin 27 окт 2016, 18:33 Сообщение

roma писал(а): Но не достиг того чего хотел
В зависимости от результата. Можно раскомментировать /* background-position: center center; */, только второе значение указать 0.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

roma 31 окт 2016, 21:01 Сообщение

ребята, не получается. Посмотреть там же можно. Высоту 200 уже сделал. Кто поможет?
  • 0

roma 01 ноя 2016, 03:04 Сообщение

методом проб и ошибок, достиг результата , но не конечного.

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

headerbar {
	background-color: #EAEAD0;
	background-image: url("./images/bg_header.png");
	color: #FFFFFF;
	/* background-position: center center; */
    background-size: cover;
    height: 230px;
	background-size: contain;
на копмах, все отлично
а вот на мобилах появилась новая задача
Правка шапки форума - Screenshot_1.png
как ее править?
  • 0

CabinetAdmin 01 ноя 2016, 15:50 Сообщение

roma писал(а): на копмах, все отлично
Дык, изображение же повторяется, это вообще не отлично.
roma писал(а): а вот на мобилах появилась новая задача
Ну дык, а результат то вы какой хотите получить? Растянуть её по вертикали? Ну тогда так и напишите background-size: 100% 230px;.

background-size: cover; как раз и решает задачу заполнения изображением пространства. Если уж адаптировать, то так:

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

headerbar {
	background-color: #EAEAD0;
	background-image: url("./images/bg_header.png");
	color: #FFFFFF;
	background-size: cover;
	height: 230px;
background-size: contain; масштабирует картинку, чтобы она целиком поместилась. И так как изображение имеет всего 200 пикселей в высоту и 1200 в ширину, то получается такая пустота.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы