[FAQ] Блоки со скругленными углами, как в prosilver

Есть любые вопросы, связанные со стилями/темами для phpBB 3.0.x? Задайте их здесь!
Правила форума
Местная Конституция | Шаблон запроса | Документация (phpBB3) | Переход на 3.0.6 и выше | FAQ-3 (phpbb3) | Как задавать вопросы | Как устанавливать моды

Ваш вопрос может быть удален без объяснения причин, если на него есть ответы по приведённым ссылкам (а вы рискуете получить предупреждение ;) ).
Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза

[FAQ] Блоки со скругленными углами, как в prosilver

Сообщение Rayden » 25.11.2008 16:59

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

В просилвере скругленные края делаются очень просто - в уголки помещаются маленькие рисунки на которых изображены уголки цвета фона.
По умолчанию в просилвере фон белый. Обычно, если мы изменяем цвет фона, на котором лежит наш блок, то достаточно сменить картинку с уголками.
Но что делать, если один блок у нас на белом фоне, другой на зеленом и т д?
естественно заготовить несколько наборов изображений углов, и для всех прописать соответствующие классы в файлах css.

1. В просилвере используются файлы corners_right.png и corners_left.png
На их основе делаем свои изображения и помещаем их в папку theme\images\
Лучше всего назвать их со смыслом: например corners_right_green.png и corners_left_green.png или например corners_red_right.png и corners_red_left.png
В моем примере они названы my_corners_right.png и my_corners_left.png

2. Код нашего блока будет выглядеть вот так:

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

<div class="myblock">
		<div class="inner"><span class="mycorners-top"><span></span></span>
Содержимое блока
		<span class="mycorners-bottom"><span></span></span></div>
</div>
рассмотрим поподробнее:
myblock - новый класс, в котором мы описываем параметры всего блока. У вас он будет называться как-то по другому.
mycorners-top класс, в котором описываются верхние уголки. У вас он будет называться по другому. Например corners-red-top
mycorners-bottom - аналогично
inner - оставляем как есть


3. Описываем эти классы в css :

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

.myblock {
	background-color: #ebebeb;
	padding: 0 10px;
}

span.mycorners-top, span.mycorners-bottom, span.mycorners-top span, span.mycorners-bottom span {
	font-size: 1px;
	line-height: 1px;
	display: block;
	height: 5px;
	background-repeat: no-repeat;
}

span.mycorners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
	background-image: url('./images/my_corners_left.png');
}

span.mycorners-top span {
	background-image: none;
	background-position: 100% 0;
	background-image: url('./images/my_corners_right.png');
}

span.mycorners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
	background-image: url('./images/my_corners_left.png');
}

span.mycorners-bottom span {
	background-image: none;
	background-position: 100% 100%;
	background-image: url('./images/my_corners_right.png');
}
.myblock span.mycorners-top, .myblock span.mycorners-bottom {
	margin: 0 -10px;
}
если в кратце прокомментировать, то внутри нашего блока myblock с отступом в 10пикс расположен блок inner с полезным содержимым.
Это содержимое начинается и заканчивается спанами с уголками. Спаны расширяются на всю ширину иннера, а благодаря отрицательным маргинам уголки уезжают наружу иннера и попадают в 10пиксельный промежуток между инннером и основным внешним блоком.
Это полностью рабочий пример, он работает даже в чистом html.
Но если вы будете использовать его в стилях на основе просилвера, то картинку на бекграунд лучше задавать другим способом:

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

background-image: url("{T_THEME_PATH}/images/my_corners_right.png");
phpBB2 FAQ
phpBB3 FAQ

bugor82
phpBB 1.0.0
Сообщения: 1
Зарегистрирован: 22.12.2008 21:52

Re: [FAQ] Блоки со скругленными углами, как в prosilver

Сообщение bugor82 » 22.12.2008 22:04

Подскажите пожалуйста, как сделать блок без фона, т. е. оставить одну рамку?

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза

Re: [FAQ] Блоки со скругленными углами, как в prosilver

Сообщение Rayden » 22.12.2008 23:01

Задать бордер в 1 пиксель блоку, а на уголках нарисовать скругление этого бордера.
phpBB2 FAQ
phpBB3 FAQ

DarkManChild
phpBB 1.4.1
Сообщения: 41
Зарегистрирован: 15.04.2009 15:19

Re: [FAQ] Блоки со скругленными углами, как в prosilver

Сообщение DarkManChild » 25.04.2009 19:27

Как убрать 1-2 пиксельный отступ с нижней часть блока?
Все пробовал, но что то не получилось разобраться.
Со всех сторон блока идет 1-2 пиксельный отступ, нужно убрать нижний.
Хочу с помощью этого блока сделать имитацию вкладок для навигационного меню, похожею на ту что в админке. (Стиль hermes grey основан на Subsilver2)

Сейчас это выглядит примерно так:

Изображение

Я не много увеличил скрин что бы было видно отступы в нижний части.
А вот код который я использую:

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

.myblock {
   text-align: center;
   background-image: url('./images/hdr_mid.gif');
   padding: 0 10px;
   margin: 0; 

}

span.mycorners-top, span.mycorners-bottom, span.mycorners-top span, span.mycorners-bottom span {
   font-size: 0px;
   line-height: 0px;
   display: block;
   height: 5px;
   background-repeat: no-repeat;
}

span.mycorners-top {
   background-image: none;
   background-position: 0 0;
   margin: 0 -10px;
   background-image: url('./images/my_corners_left.png');
}

span.mycorners-top span {
   background-image: none;
   background-position: 100% 0;
   background-image: url('./images/my_corners_right.png');
}

.myblock span.mycorners-top, .myblock span.mycorners-bottom {
   margin: 0 -10px;
и

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

	<!-- IF S_DISPLAY_SEARCH -->
	<td>
		<div class="myblock">
      <div class="inner"><span class="mycorners-top"><span></span></span>
<a href="{U_SEARCH}"><b>{L_SEARCH}</b></a><span class="mycorners-bottom"><span></span></span></div>
</div></td><!-- ENDIF -->
Помогите пожалуйста с этой задачкой.
И еще, может подскажите как сделать боковые рамки? Если в css добавлять border: solid 1px #393939; то получается совсем не то что хотелось.
А может уже есть готовые решения?

Аватара пользователя
Rayden
Former team member
Сообщения: 3739
Зарегистрирован: 27.06.2005 1:07
Поблагодарили: 44 раза

Re: [FAQ] Блоки со скругленными углами, как в prosilver

Сообщение Rayden » 25.04.2009 22:07

DarkManChild писал(а):Сейчас это выглядит примерно так:
Еще бы понять, о каком блоке на рисунке идет речь.
Попробуй прописать border:0; вдруг что-то изменится.
А может быть наоборот, нижний отступ это верхний маргин блока, который ниже?

Добавлено спустя 4 минуты 29 секунд:
DarkManChild писал(а):И еще, может подскажите как сделать боковые рамки? Если в css добавлять border: solid 1px #393939; то получается совсем не то что хотелось.
Т е я должен догадаться о двух вещах - что там у тебя получается и что тебе хочется. Прости, я не телепат.
phpBB2 FAQ
phpBB3 FAQ

Аватара пользователя
Палыч
Former team member
Сообщения: 9683
Зарегистрирован: 24.05.2006 23:20
Откуда: Питер
Благодарил (а): 3 раза
Поблагодарили: 453 раза

Re: [FAQ] Блоки со скругленными углами, как в prosilver

Сообщение Палыч » 25.04.2009 22:55

Насколько я понял "Личный раздел", "Новых ЛС", "FAQ" - должны упасть вплотную на "Предыдущее посещение".
Но без ссылки на страницу всё-равно точно не сказать.
Не все то WINDOWS, что висит... phpBB только учусь.
ICQ, email, ЛС - только для личных сообщений. Вопросы по phpbb только на форумах. По найму не работаю.

Вернуться в «Стили для phpBB 3.0.x»