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

CabinetAdmin 20 янв 2015, 15:57 Сообщение

Вроде того, что реализовано здесь?

Вся эта оборка сделана на псевдоэлементах :before и :after. То есть шаблон править не надо, можно обойтись стилями.

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

silver073000Василий 20 янв 2015, 16:44 Сообщение

CabinetAdmin писал(а): Вроде того, что реализовано здесь?
Во, точно, именно таким же образом :)
CabinetAdmin писал(а): Есть пару вариантов, создать расширение, которое будет добавлять дополнительный css файл, что мне кажется слишком муторным, править уже существующий или создать новый css файл, добавить его в конец stylesheet.css, что бы он обрабатывался последним и изменения записанные в нём работали.
С собственными расширениями вряд ли и получится, ведь хостинг не собственный и добавлять свои расширения вряд ли будет возможность. Ну а правка шаблонов и CSS доступна :)
  • 0

CabinetAdmin 20 янв 2015, 16:58 Сообщение

Вот например:

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

/* Main blocks */
#wrap {
	position: relative;
}

#page-header {
	position: relative;
	padding: 25px 20px 0;
}

#page-body {
	padding: 0 20px;
}

#page-footer {
	position: relative;
	padding: 0 20px 25px;
}

/* Pseudo-elements */
#wrap:before, #wrap:after {
	content: "";
	position: absolute;
	height: 100%;
	width: 25px;
	top: 0;
}

#wrap:before {
	left: -5px;
}

#wrap:after {
	right: -5px;
}

#page-header:before {
	content: "";
	position: absolute;
	padding: 0;
	height: 25px;
	width: 100%;
	top: -16px;
	left: 0;
}

#page-footer:before {
	content: "";
	position: absolute;
	height: 25px;
	width: 100%;
	bottom: -16px;
	left: 0;
}

/* Images */
#wrap:before {
	background: url("./images/wrap-left.png") repeat-y 0 0;
}

#wrap:after {
	background: url("./images/wrap-right.png") repeat-y 0 0;
}

#page-header:before {
	background: url("./images/header-top.png") repeat-x 0 0;
}

#page-footer:before {
	background: url("./images/footer-bottom.png") repeat-x 0 0;
}
При условии, что боковые картинки 25 пикселей в ширину, верхняя и нижняя 25 в высоту.
Код можно закинуть в новый css и подключить в stylesheet.css, а если правка стилей реализована как-то через админку, то просто в самый конец.
  • 1
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 20 янв 2015, 18:22 Сообщение

Благодарю за помощь да за совет добрый :drink: Примерно так хотел, но чтобы в верхних и нижних углах была своя картинка :) В приведённом примере используются 4 картинки, а так, как я хочу, 8. То есть, угловые картинки хочу сделать с закруглением :)
CabinetAdmin писал(а): если правка стилей реализована как-то через админку, то просто в самый конец.
Там правка сделана по аналогу того, как это сделано в предыдущей версии phpbb :)
  • 0

CabinetAdmin 20 янв 2015, 18:41 Сообщение

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

silver073000Василий 23 янв 2015, 01:01 Сообщение

А насколько сложно расположить картинки таким образом?
Изображение
Стрелки под номерами - это либо какая-то одна картинка, либо 4 разных, размещённых именно по углам и без повторения. Надо будет добавлять какие-то блоки или править шаблоны?
  • 0

CabinetAdmin 23 янв 2015, 15:35 Сообщение

Ну, так как вся оборка сделана на псевдоэлементах, то логично их же и использовать. Тогда понадобится ещё два блока, один перед <div id="page-header">, другой после закрывающего дива у <div id="page-footer">.

Например.
Сверху:

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

<div class="wrap-top"></div>
Снизу:

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

<div class="wrap-bottom"></div>
К теме:

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

.wrap-top:before, .wrap-top:after {
	content: "";
	position: absolute;
	padding: 0;
	height: 25px;
	width: 25px;
	top: 0;
	z-index: 1;
}

.wrap-top:before {
	background: url("./images/wrap-top-left.png") no-repeat 0 0;
	left: -5px;
}

.wrap-top:after {
	background: url("./images/wrap-top-right.png") no-repeat 0% 0;
	right: -5px;
}

.wrap-bottom:before, .wrap-bottom:after {
	content: "";
	position: absolute;
	height: 22px;
	width: 22px;
	bottom: 0;
	z-index: 1;
	
}

.wrap-bottom:before {
	background: url("./images/wrap-bottom-left.png") no-repeat 0 0;
	left: -5px;
}

.wrap-bottom:after {
	background: url("./images/wrap-bottom-right.png") no-repeat 0 0;
	right: -5px;
}
  • 2
Хочешь поблагодарить? Есть способы: заходи на форум, создавай темы, делись опытом и наработками, общайся!

silver073000Василий 24 янв 2015, 22:01 Сообщение

Благодарю за помощь :drink: Всё вышло, как и было задумано :drink:
  • 0

silver073000Василий 26 фев 2015, 17:26 Сообщение

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

Хочется лист бумаги с потрёпанными краями :) Можно как-то сделать вид сообщения наподобие того оформления, как Uzanka оформляла базу знаний у себя? И насколько сложно такое сделать? :) Картинку могу разрезать при надобности, осветлить, затемнить и так далее. Мне бы сам код вида сообщения :oops:
  • 0

CabinetAdmin 26 фев 2015, 19:09 Сообщение

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

silver073000Василий 26 фев 2015, 22:38 Сообщение

Сейчас попробую поковырять :milo: Интересно, до чего доковыряюсь? :D
  • 0

CabinetAdmin 26 фев 2015, 22:59 Сообщение

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

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

Что-то не получается осилить пока сию науку :oops: Картиночек навырезал, вроде не должно быть съезжаний, накладок и прочих артефактов :milo: А вот с кодом не получается :milo:
  • 0

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

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

Похожие темы