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

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

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

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

</p><br /> <div class=»inner»><span class=»corners-top»><span></span></span>

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

<span class=»corners-bottom»><span></span></span></div><br /> <p>

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

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

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

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

span.corners-top {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_left.png»);<br /><br /> }</p><br /> <p>span.corners-top span {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_right.png»);<br /><br /> }</p><br /> <p>span.corners-bottom {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_left.png»);<br /><br /> }</p><br /> <p>span.corners-bottom span {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_right.png»);<br /><br /> }

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

span.corners-top {<br /><br /> }</p><br /> <p>span.corners-top span {<br /><br /> }</p><br /> <p>span.corners-bottom {<br /><br /> }</p><br /> <p>span.corners-bottom span {<br /><br /> }

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

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

#cp-main span.corners-top, #cp-menu span.corners-top {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_left2.gif»);<br /><br /> }</p><br /> <p>#cp-main span.corners-top span, #cp-menu span.corners-top span {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_right2.gif»);<br /><br /> }</p><br /> <p>#cp-main span.corners-bottom, #cp-menu span.corners-bottom {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_left2.gif»);<br /><br /> }</p><br /> <p>#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_right2.gif»);<br /><br /> }

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

#cp-main span.corners-top, #cp-menu span.corners-top {<br /><br /> }</p><br /> <p>#cp-main span.corners-top span, #cp-menu span.corners-top span {<br /><br /> }</p><br /> <p>#cp-main span.corners-bottom, #cp-menu span.corners-bottom {<br /><br /> }</p><br /> <p>#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {<br /><br /> }

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

/* Topicreview */<br /><br /> #cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_left.gif»);<br /><br /> }</p><br /> <p>#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_right.gif»);<br /><br /> }</p><br /> <p>#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_left.gif»);<br /><br /> }</p><br /> <p>#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {<br /><br /> background-image: url(«{T_THEME_PATH}/images/corners_right.gif»);<br /><br /> }

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

/* Topicreview */<br /><br /> #cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {<br /><br /> }</p><br /> <p>#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {<br /><br /> }</p><br /> <p>#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {<br /><br /> }</p><br /> <p>#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {<br /><br /> }

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

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

<br /><br /> span.corners-top, span.corners-bottom, span.corners-top span, span.corners-bottom span {<br /><br /> font-size: 1px;<br /><br /> line-height: 1px;<br /><br /> display: block;<br /><br /> height: 5px;<br /><br /> background-repeat: no-repeat;<br /><br /> }</p><br /> <p>span.corners-top {<br /><br /> background-image: none;<br /><br /> background-position: 0 0;<br /><br /> margin: 0 -5px;<br /><br /> }</p><br /> <p>span.corners-top span {<br /><br /> background-image: none;<br /><br /> background-position: 100% 0;<br /><br /> }</p><br /> <p>span.corners-bottom {<br /><br /> background-image: none;<br /><br /> background-position: 0 100%;<br /><br /> margin: 0 -5px;<br /><br /> clear: both;<br /><br /> }</p><br /> <p>span.corners-bottom span {<br /><br /> background-image: none;<br /><br /> background-position: 100% 100%;<br /><br /> }</p><br /> <p>.headbg span.corners-bottom {<br /><br /> margin-bottom: -1px;<br /><br /> }</p><br /> <p>.post span.corners-top, .post span.corners-bottom, .panel span.corners-top, .panel span.corners-bottom, .navbar span.corners-top, .navbar span.corners-bottom {<br /><br /> margin: 0 -10px;<br /><br /> }</p><br /> <p>.rules span.corners-top {<br /><br /> margin: 0 -10px 5px -10px;<br /><br /> }</p><br /> <p>.rules span.corners-bottom {<br /><br /> margin: 5px -10px 0 -10px;<br /><br /> }

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

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