Закругленные уголки в prosilver

В prosilver практически все блоки имеют закругленные углы. Зачастую при работе с форумом требуется либо добавить новый элемент с такими уголками, либо наоборот, убрать закругления у блоков. Как правильнее это сделать, пишу ниже.

Добавление нового элемента с закругленными углами

Предположим, вы добавили в дизайн новый блок. Нужно, чтобы внешне он подходил под остальной дизайн, а для этого ему нужно сделать закругленные уголки. Делается это достаточно просто, нужно в html-коде перед началом блока добавить такой код:

<div class="inner"><span class="corners-top"><span></span></span>

а после конца блока вставить эту строчку:

<span class="corners-bottom"><span></span></span></div>

Не забульте обновить кэш.

Удаление закруглений у уголков блоков

Если вы решили сделать на основе стиля prosilver собственный стиль и не хотите видеть в нем закруглений у углов, то нужно их убрать. Но хитрость в том, что сделать это лучше в css, а не html, так как это будет более правильно и к тому же не приведет к трудностям при установке модов.

Откроем файл styles/prosilver/theme/colours.css. Находим в нем такой код:

span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.png");
}

и заменяем эти строки на такие:

span.corners-top {
}

span.corners-top span {
}

span.corners-bottom {
}

span.corners-bottom span {
}

Если критичен размер файлов, то можно и вовсе удалить все эти строки.

Далее находим такие строки:

#cp-main span.corners-top, #cp-menu span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left2.gif");
}

#cp-main span.corners-top span, #cp-menu span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right2.gif");
}

#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left2.gif");
}

#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right2.gif");
}

И заменяем их на такие:

#cp-main span.corners-top, #cp-menu span.corners-top {
}

#cp-main span.corners-top span, #cp-menu span.corners-top span {
}

#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
}

#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
}

Продолжаем. Находим строки

/* Topicreview */
#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}

#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
	background-image: url("{T_THEME_PATH}/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
	background-image: url("{T_THEME_PATH}/images/corners_right.gif");
}

и заменяем на такие строки

/* Topicreview */
#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
}

#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
}

#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
}

#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
}

Сохраняем и закрываем файл.

Открываем файл styles/prosilver/theme/common.css. Находим строки:

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

span.corners-top {
	background-image: none;
	background-position: 0 0;
	margin: 0 -5px;
}

span.corners-top span {
	background-image: none;
	background-position: 100% 0;
}

span.corners-bottom {
	background-image: none;
	background-position: 0 100%;
	margin: 0 -5px;
	clear: both;
}

span.corners-bottom span {
	background-image: none;
	background-position: 100% 100%;
}

.headbg span.corners-bottom {
	margin-bottom: -1px;
}

.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {
	margin: 0 -10px;
}

.rules span.corners-top {
	margin: 0 -10px 5px -10px;
}

.rules span.corners-bottom {
	margin: 5px -10px 0 -10px;
}

и удаляем эти строки.

Не забудьте обновить css в администраторском разделе.

Опубликовано: 21.12.08 20:05 | Просмотров: 1628 | [ + ] [ - ] | Печать