Обзавёлся и я форумом на phpbb 3.1.2 :) Правда, пока тестовый он, но после всех тестов обязательно конвертирую основной форум под новую версию :) И перед сменой версии хочу перекрасить стандартный prosilver для phpbb 3.1.2, чтобы потом залить его и и сделать его основным стилем. Как правильно заменить те белые полосы сверху, снизу и по бокам на свои картинки? По углам хочется разместить небольшие изображения, а далее повторяющиеся. Вот что хочется изменить:
Изображение
Комментарии: 22

silver073000Василий 27 фев 2015, 21:44 Сообщение

Вот это я имею в виду
Изображение

Хочется вокруг сообщения с минипрофилем обвести вырезанными кусочками, а фон заменить. Углы в сообщении можно либо закруглить с помощью CSS, либо в углах картинки расставить :) Что будет проще? :)
  • 0

CabinetAdmin 27 фев 2015, 22:19 Сообщение

Если использовать для всех углов свои картинки, то надо будет добавлять пару блоков.
Два блока есть:

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

	<div id="p{postrow.POST_ID}" class="post has-profile и тд...
		<div class="inner">
Добавляем свой класс к первому блоку и уже исходя из этого класса делаем фон. Например. Первый блок можно использовать для фона и левого и правого граней. Второй для верхнего и нижнего.
Могу так, на коленке, приблизительно расписать. Допустим мы дописали класс post-bg:

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

.post .post-bg {
	position: relative;
	background: url("./images/post-bg.png") repeat 0 0; /* Основной цвет */
}

/* Право и лево */
.post-bg:before, .post-bg:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 25px;
	top: 0;
}

.post-bg:before {
	left: -5px;
	background: url("./images/post-bg-left.png") repeat-y 0 0;
}
 
.post-bg:after {
	right: -5px;
	background: url("./images/post-bg-right.png") repeat-y 0 0;
}

/* Верх и низ */
.post-bg .inner:before, .post-bg .inner:after {
	content: "";
	position: absolute;
	height: 25px;
	width: 100%;
	left: 0;
}

.post-bg .inner:before {
	top: 0px;
	background: url("./images/post-bg-top.png") repeat-x 0 0;
}

.post-bg .inner:after {
	bottom: 0px;
	background: url("./images/post-bg-bottom.png") repeat-x 0 0;
}
Значения по месту, само собой...

Остаются только углы, тут нужны дополнительные блоки, по аналогии с http://cabinetadmina.ru/viewtopic.php?p=67547#p67547
Обозвать их только как нибудь по другому, например <div class="post-top"></div> и <div class="post-bottom"></div>

Получается так, что мы не затрагиваем основной код, те классы которые уже есть и могут использоваться и в других местах, где всё может выглядеть не так или оно там будет не к месту.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 01 мар 2015, 16:25 Сообщение

Интересно получается :milo: Фон опросов, уголки, стороны таким образом получилось заменить :) А вот в сообщениях ну никак не хочет меняться :milo: Вернее, уголки, стороны меняются, а фон нет. И плюс боковые и верхние картинки на аватарку и на картинку "В сети" наползают :milo:
  • 0

CabinetAdmin 01 мар 2015, 20:19 Сообщение

А фон опросов то почему?
BOJIK писал(а): А вот в сообщениях ну никак не хочет меняться
Добавить параметр !important к фону:

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

background: url("./images/post-bg.png") repeat 0 0 !important;
А чтобы картинки не заползали:

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

.post {
	padding: 5px 10px;
	...
можно отступы побольше сделать.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 03 мар 2015, 00:24 Сообщение

CabinetAdmin писал(а): А фон опросов то почему?
Это просто эксперименты провожу, как оно там отображаться будет :)

Да что-то не клеится оно, фон всё равно не отобразился ни в одном браузере. И при длинных сообщениях нижние картинки текст закрывают. Тоже во всех браузерах так. А попробовал все уголки и стороны убрать и оставить только фоновую картинку, то вместо моей картинки фоновым изображением стала картинка "В сети" :D Моя не воспринимается почему-то.
  • 0

CabinetAdmin 03 мар 2015, 00:46 Сообщение

BOJIK писал(а): Моя не воспринимается почему-то.
А имя картинки верное? Или тип?
Может быть потому что ты экспериментируешь с кодом в начале стиля. Как браузер строит картинку на мониторе? Он открывает последний из указанных стилевых файлов и начинает его читать снизу вверх, потом открывает тот, что стоит перед ним и всё повторяется снова, пока не кончатся стилевые файлы.
Например:

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

.block {
	background-color: #000;
	color: #FFF;
}

.block {
	background-color: #FFF;
	color: #000;
}
Два одинаковых имени. В итоге на странице блок будет белого цвета с чёрным шрифтом, потому что код с данными параметрами находится ниже в стилевом файле.

Поломать эту зависимость можно если добавить в путь дополнительный класс, либо параметр !important.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 03 мар 2015, 01:18 Сообщение

CabinetAdmin писал(а): А имя картинки верное? Или тип?
Да, всё верно. Даже несколько раз проверил уже. Кругом использую .png. Да и ещё интересно, почему фоном стала картинка "В сети", она же не post-bg.png? :milo: Незакрытых классов тоже нет.
  • 0

CabinetAdmin 03 мар 2015, 07:55 Сообщение

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

<div id="p{postrow.POST_ID}" class="post has-profile <!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF --><!-- IF postrow.S_UNREAD_POST --> unreadpost<!-- ENDIF --><!-- IF postrow.S_POST_REPORTED --> reported<!-- ENDIF --><!-- IF postrow.S_POST_DELETED --> deleted<!-- ENDIF --><!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF --><!-- IF postrow.POSTER_WARNINGS --> warned<!-- ENDIF -->">
Класс для него расположен в этой же строке и изображение применяется для этого же блока. Основной цвет:

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

<!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->
вернее чередующийся цвет. Используется просто цвет:

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

.bg1 {
	background-color: #ECF3F7;
}

.bg2 {
	background-color: #e1ebf2;
}
Картинка онлайн применяется для этого же элемента, но для того чтобы она была видна используется в таком виде:

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

.online {
	background-image: url("./en/icon_user_online.gif");
}
Если например у онлайн background-image заменить на background, то основные цвета фона из bg1 и bg2 не будут добавляться.

В принципе, раз фон меняется и чередование цветов не предусматривается, то

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

<!-- IF postrow.S_ROW_COUNT is odd -->bg1<!-- ELSE -->bg2<!-- ENDIF -->
можно удалить. Можно на время удалить и:

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

<!-- IF postrow.S_ONLINE and not postrow.S_POST_HIDDEN --> online<!-- ENDIF -->
Потом можно будет добавить.
  • 0
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

Похожие темы