Описание стиля CSS

Страница: 1

Сообщений 1 страница 4 из 4

Поделиться12012-08-03 10:50:52

Автор: SeekerSkywarp
Mortal Immortal
Откуда: Москва
Зарегистрирован: 2011-12-17
Приглашений: 0
Сообщений: 476
Уважение: +58
Пол: Мужской
Возраст: 36 [1988-02-15]
Провел на форуме:
5 дней 15 часов
Последний визит:
2016-04-18 17:15:33

Примечание: я не профессионал,
но постаралась собрать статью так,
чтобы она была удобной и понятной.
Источниками послужили статьи
Ше-рауфа, Скимитара, Zebra,
а так же материалы с других интернет-ресурсов.
Это то, чем я пользуюсь сама при создании стилей,
надеюсь, кому-нибудь эта тема поможет.

CSS - акроним для Cascading Style Sheets/Каскадных таблиц стилей (хотя правильным переводом является «Каскадные Листы Стилей»). Не буду углубляться в описание преимуществ использования CSS на форуме, достаточно лишь уточнить, что оформление через CSS предоставляет большие возможности, чем оформление через HTML.
Однако прежде чем приступать к созданию своего стиля, обратимся к самым азам.

Общий код делится на две части: структуру и цвета. Структура отвечает за каркас стиля, цвета – за его оформление. Обе части стиля пишутся в несколько разделов, имеющих свои заголовки и названия (латинская буква и порядковый номер). Оформляется это так:

/* название и заголовок раздела
-------------------------------------------------------------*/

Каждый раздел управляет какими-то параметрами оформления. Это может быть шрифт, рамки, положения различных элементов, отображение страниц форума.

Принцип построение кода:

Selector {
property1, property2: value1;
property3: value2 value3;
property4: value4;
}

Selector – номер и название элемента. Это может быть столбец, логотип, иконка и т.д.
Property – параметр из тех, что рассмотрены выше – фон, шрифт, рамки и т.д.
Value – условие для параметра – ширина, цвет, адрес изображения.

Единицы измерения
Абсолютные:
in дюймы (1 дюйм = 2.54 см = 25.4 мм = 72 точки = 6 пик)
cm сантиметры (1 см = 10 мм = 0.39 дюйма = 2.36 пики = 28.35 точки)
mm миллиметры (1 мм = 0.1 см = 0.039 дюйма = 0.24 пики = 2.84 точки)
pt точки (1 точка = 1/12 пики = 1/72 дюйма = 0.035 см = 0.35 мм)
pc пики (1 пика = 12 точек = 1/6 дюйма = 0.423 см = 4.23 мм)

Относительные:
em размер (font-size) соответствующего шрифта
ex высота строчных букв (x-height) соответствующего шрифта
px пиксели (размер зависит от устройства отображения)
% проценты (размер элементов зависит от того, что было взято за 100%)
Если размер равен 0, то единицу измерения можно не указывать.

Основные параметры:

Height - высота элемента
Width - ширина элемента

Background (фон)
background-color – цвет заливки (веб-значение)
background-attachment – прокрутка фона
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.
background-image – фоновая картинка
url ("...") – в скобках указываете адрес изображения (можно без кавычек)
none – отсутствие картинки
background-repeat – автоматическое размножение фона
no-repeat - не размножается
repeatx - размножается по горизонтали
repeaty - размножается по вертикали
repeatxy - размножается в обоих направлениях.
background-position – расположение фона. Сначала указывается расположение по вертикальной оси: top, center или bottom, затем - по горизонтальной: left, center или right.

Border (рамка)
border-color – цвет рамки (веб-значение)
border-width – толщина рамки (px)
border-style – стиль начертания
none – отсутствие рамки
dotted – пунктир (точки)
dashed – штрих-пунктир
solid - одинарная
double - двойная
groove – трехмерный эффект
ridge - трехмерный эффект возвышения
inset - трехмерный эффект углубления
outset - трехмерный эффект выпуклости фона
border-top – параметр верхней кромки
border-bottom – параметр нижней кромки
border-left – параметр левой кромки
border-right – параметр правой кромки

Color (цвет) – цвет шрифта элемента (веб-значение). Таблица цветов. Если нужна прозрачность, вместо #цвет прописываем transparent

Font (шрифт)
font-size – размер шрифта. Можно задавать в размерности, можно – по возрастающим значениям, методом научного тыка:
xx-small
x-small
small
medium
large
x-large
xx-large
font-style - начертание
normal - стандарт
italic - курсив
oblique - чуть менее наклонный, чем курсив
font-weight – толщина. Значения:
normal - стандарт
bold – полужирный

Text (текст)
text-align - выравнивание текста внутри элемента.
left - по левому краю
right - по правому краю
center - по центру
justify - по ширине
text-decoration - украшение текста
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

Display – отображение элемента. Значения:
none - отсутствует
block – обведено рамкой
list-item – элемент как часть списка, присваивается маркер
inline – вывод элемента в одну строку

Padding - линия отбивки материнского объекта
padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.

Margin - линия отступа дочернего объекта.
margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отступ
margin-right - правый отступ

Vertical-align - выравнивание элемента по вертикали
top - по верхнему краю
bottom - по нижнему
middle - посередине

Поделиться22012-08-03 10:51:04

Автор: SeekerSkywarp
Mortal Immortal
Откуда: Москва
Зарегистрирован: 2011-12-17
Приглашений: 0
Сообщений: 476
Уважение: +58
Пол: Мужской
Возраст: 36 [1988-02-15]
Провел на форуме:
5 дней 15 часов
Последний визит:
2016-04-18 17:15:33

Теперь проходим в админку и смотрим функцию «Свой стиль». Она у нас должна быть включена.
При создании форума нам дается базовая структура и цветовое решение стиля, далее можно его и редактировать, а можно поступить еще хитрее. Для этого проходим по этой ссылке. Это каталог стандартных стилей, думаю, многие бывали здесь, и не раз. Теперь выбираем нужный нам стиль из предоставленных и извлекаем его код для своего форума. Далее опишу, как это делается.
Открывается новая вкладка, в адресную строку вводится следующее:

http://XX1/style/XX2/XX2.css
http://XX1/style.XX2/XX2_cs.css

XX1 – адрес вашего форума. Будьте внимательны, следите за тем, чтобы протокол http: не был прописан более одного раза.
XX2 – название выбранного стиля. Оно прописано справа от кнопок выбора стиля: копируем его, а пробелы (если есть) заменяем знаком «_»

В ходе первой манипуляции мы получаем полный код структуры, в ходе второй – код цветового решения форума. Каждый код аккуратно переносим в соответствующее ему окошко (заменяем то, что было изначально). Чтобы как можно меньше тревожить код структуры, советую больше внимания уделять строению стиля, а не цветовой гамме (с ней работать проще). Я, например, всегда обращаю внимание на положение навигационных ссылок. Полученный вами код было бы неплохо сохранить где-нибудь на компьютере, а в дальнейшем сохранять изменения в стиле по одному – так легче будет отслеживать ошибки. Еще идеальным вариантом было бы создание тестового форума - научной лаборатории, так сказать. Уж лучше перестраховаться сразу.
Есть также такая штука, как генератор стилей, её использовать лучше не надо – иначе подвергните себя извращенной пытке.

Теперь смотрим код структуры. Ищем вот эту часть:

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
@import url(название стиля_cs.css);

Здесь нам следует произвести одну маленькую, но глобально важную замену:

/*************************************************************
A - SETUP
**************************************************************/

/* A1 Import the colour scheme
-------------------------------------------------------------*/

/* A1.1 */
@import url(style_cs.css);

Сохраняем изменения. Форум приобретает узнаваемые оттенки выбранного стиля оформления. Стандартные картинки нам не видны – не волнуйтесь, так оно и должно быть.

Можно также поставить на форум абсолютный помощник по дизайну CSS. Очень полезная штука, если надо найти название определенного элемента.

Ставим в HTML-низ:

Код:

<script type="text/javascript">
function cookCopy()
{document.cookie="helper=not"}
window.onunload=cookCopy
function helpCss()
{document.cookie="helper=letcopy"
var alls=document.getElementsByTagName("body")[0].getElementsByTagName("*")
var e=0
for (e=0; e<=(alls.length-1); e++)
{
var styl=new Array()
var styl2=new Array(0)
var k=0
styl[0]=alls[e]
styl2.splice(0, 0, makingCss(styl[0]))
k=1
while(k<=10)
{styl[k]=styl[k-1].parentNode
if (styl[k].nodeName=="BODY")
{break}
styl2.splice(0, 0, makingCss(styl[k]))

k=k+1}
alls[e].title=styl2.join(" ")
}}

function makingCss(to)
{if (to.id)
{if ((to.id.indexOf("forum")!=-1)||(to.id.indexOf("category")!=-1))
{if (to.className.indexOf(" ")!=-1)
{var ret="."+to.className.substr(to.className.lastIndexOf(" ")+1)}
else
{var ret="."+to.className}}
else
{var ret="#"+to.id}}
else if ((!to.id)&&(to.className)) 
{if (to.className.indexOf(" ")!=-1)
{var ret="."+to.className.substr(to.className.lastIndexOf(" ")+1)}
else
{var ret="."+to.className}}
else if ((!to.id)&&(!to.className))
{var ret=to.nodeName.toLowerCase()}
return ret}

</script>
<input id="csshelper" type="button" value="Помощь в css" onclick="helpCss()" />

Внизу должна появиться кнопочка «Помощь в css» Если нажать на неё, а потом навести на на какой-нибудь элемент форума, можно увидеть полный код этого элемента. Подробнее об этом написано на едином форуме поддержки.

Поделиться32012-08-03 10:51:21

Автор: SeekerSkywarp
Mortal Immortal
Откуда: Москва
Зарегистрирован: 2011-12-17
Приглашений: 0
Сообщений: 476
Уважение: +58
Пол: Мужской
Возраст: 36 [1988-02-15]
Провел на форуме:
5 дней 15 часов
Последний визит:
2016-04-18 17:15:33

Структура

текст

/* A3 Text setup
-------------------------------------------------------------*/

/* A3.1 */
body {
font-size: 100.01%;
}

/* A3.2 */
.punbb {
font: normal 68.75% verdana, arial, helvetica, sans-serif;
}

/* 3.3 */
.punbb textarea, .punbb input, .punbb select, .punbb optgroup {
font: 1em verdana, arial, helvetica, sans-serif
}

/* A3.6 */
.punbb pre {
font: 1.1em/140% monaco, "bitstream vera sans mono", "courier new", courier, monospace
}

Регулирует размер шрифта и шрифты вашего форума. Если хотите оформить ваш форум в одном шрифте - поменяйте все семейства шрифтов тут на избранное вами.

положение страниц и размеры форума

/* A5 Basic page layout and borders
-------------------------------------------------------------*/

/* A5.1 */
/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 90%;
padding: 0px 5px 0px 5px;
}
}

Первая строка – кодировка пункта, А5.1.
Вторая строка - #pun – поясняет, что параметры распространяются на все страницы ресурса, эдакую базисную сетку, где располагаются все остальные элементы.
Третья строка – margin. Сверяясь со шпаргалкой, мы понимаем, что это линия отбивки дочернего объекта. Именно этот параметр и обеспечивает положение страницы форума относительно границ окна вашего браузера. Можно задавать значения как в пикселях, так и в процентах, варьируя положение как вашей душе будет угодно.
Четвертая строка – width – ширина. Параметры можно задавать как в пикселях, так и в процентах. Тут уже вы сами решаете - что лучше. Выберете проценты - избавитесь от проблемы с отображением форума, ведь разрешения мониторов разные бывают. Тогда ширина форума будет зависеть от разрешения монитора. Если проставите значение в пикселах, то ширна форума будет фиксированной. Второй способ выглядит аккуратнее, да шапку (иногла и фон) под него легче сделать.
Пятая строка нашего кода – padding – линия отбивки материнского объекта. По сути своей, не углубляясь в ужасы профессиональной верстки – лучше его не трогать. По крайней мере, в данном случае.

/* A5.3 */
#pun-redirect, #pun-maint {
margin: 50px 20% 12px 20%;
width: auto;
float: none;
}

Этот кусочек кода регулирует положение сообщения о переадресации.
То есть - margin: 50px 20% 12px 20%; то, на каком расстоянии от границ монитора она будет отображаться.
width: auto; - какой будет ширины. Можно задать автоматическое определение (как в данном случае), можно самим проставить ширину.

границы

/* A5.9 */
.punbb .container {
border-style: solid;
border-width: 1px;
}

Обводка таблицы форума.
Тут все очевидно - border-style - как именно вы желаете, чтоб отображалась граница основной таблицы форума,
border-width - какой ширины эта граница должна быть.

/* A5.10 */
.punbb .section h2, #pun-main h1, #pun-main h2, #pun-stats h2, #pun-debug h2 {
padding: 0.5em 1em;
border-style: solid;
border-bottom: none;
border-width:1px;
}

Этот параметр регулирует то же самое, только относительно границ категорий, полей профиля и.т.д.

А5.8 – отвечает за обводку элементов и непосредственно сообщений;
А5.10 – отвечает за обводку полос с названием локации на странице со списком тем, полосы статистики, категорий, полос профиля;
А5.11 – отвечает за обводку полос категорий.

border-width: 1px 1px 0px 1px; - толщина каждой линии из четырех, поскольку любой элемент вписывается в прямоугольник (верх - лево - низ - право)
border-style: solid solid none solid; - стиль каждой линии из четырех.
padding: 5px 1em 7px 1em; - линия отбивки материнского объекта.

Кроме того, одна из границ, что не входит в раздел А5, а принадлежит разделу В1 – полоска, разграничивающая текст в посте и подпись участника.

/* B1.2 */
.punbb .post-sig dt {
display: block;
border-top: 1px solid #fff;
width: 250px;
margin: 5px 0;
}

таблица форума
Если вам не нравится ширина граф таблицы форума "Форум", "Тем", "Сообщений", "Последнее сообщение", то используя эти параметры вы можете их изменить. Если вы задавали ширину форума в процентах, то лучше не прописывайте ширину граф в пикселях; если форум у вас в пикселях - задавайте как хотите, но учитывайте, что ширина вашего форума - это 100%.

/* C2.1 */
.punbb .main .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}

Первая графа - "Форум".
text-align: left; - отображение текста описания форума.
width: 50%; - ширина данной графы.

/* C2.2 */
.punbb .main .tc2, .punbb .main .tc3, .punbb .main .tcmod {
text-align: center;
width: 10%;
}

Вторая и третья графы - "Тем и "Сообщений"
text-align:center; - отображение цифр.
width: 10%; - ширина данной графы.

/* C2.3 */
.punbb .main .tcr {
overflow: hidden;
text-align: left;
width: 30%;
}

text-align: left; - отображение текста описания форума.
width: 30%; - ширина данной графы.

Сайты принято затачивать под 1024*768, в крайнем случае 1200*1024 (фозьмите на заметку, если делаете неразмножающийся фон одной картинкой), графа "Форум" - самая широкая - это общее правило.

К разделу С2 принадлежит также такая вариация границ, как рамки между графами нам главной странице форума.

/* C2.11 */
.punbb .main td {
border-style: solid none none solid;
border-width: 1px 0 0 1px;
padding: 0.8em 1em;
}

/* C2.12 */
.punbb .main th {
padding: 7px 1em 7px 1em;
border-left: 1px solid #цвет;
border-bottom: 2px solid #цвет;
border-top: 1px solid #цвет;
}

Этот пункт определяет цвет и стиль обводки вашего punbb .main th, а говоря обычным языком - той графы, где располагаются слова - "Форум", "Тем", "Сообщений", "Последнее сообщение".

Условия базовых элементов

В число базовых элементов форума входит все – от мала до велика: логотип, иконки, графы, строки, полоски… В общем. Все, что вы так или иначе видите на страницах форума. И практически все можно извратить и подогнать под свою концепцию дизайна.

Шапка и логотип

/* D1 Logo and description
-------------------------------------------------------------*/
Ключевые параметры логотипа: /* D1.2 */
#pun-title h1 {
display : block;
height: 120px;
margin: -1px 0px 0px -43px;
}

Параметры логотипа: /* D1.4 */

#pun-title TABLE {
border: none;
height: 120px;
width: 100%;
}

Высота height: в данных участках кодов должна соответствовать высоте изображение, которое вы ставите.

Объявление

/* D6 Announcement
-------------------------------------------------------------*/

Мы с вами можем узреть ровно три кода. Из них нас могут заинтересовать два:
D6.1 – заголовок объявления
D6.3 – окно объявления, где на форумах обычно расположена таблица.
Оперируя кодами внутри пунктов, мы добиваемся поставленных перед дизайном задач.

Если хотите убрать слово "объявление", то не нужно ставить никакие скрипты в настройках форума. Достаточно произвести следующие изменения в части /* D6.2 */. А именно поставить значение none для параметра display в селекторе #pun-announcement h2 span. Остальную часть кода можно убрать. Вот так:

#pun-announcement h2 span {
display: none;
}

рекламный баннер
Кодировка: /* D1.4 */
Используемая часть кода:

#pun-title TD.title-logo-tdr {
border: none;
width: 468px;
vertical-align: top;
padding-right: 4%;
padding-top: 15px;
}

И ее мы переделываем вот в такой вид:

#pun-title TD.title-logo-tdr {
border: none;
width: 468px;
vertical-align: top;
padding-top: 2px;
position: absolute;
left: 31%;
top: 0;
}

Данный код перемещает баннер посередине форума над шапкой, не перекрывая ее никоим образом. После проделанной манипуляции с кодом мы возвращаемся к разделу А5 и ищем код А5.1, где мы задавали ширину и расположение наших страниц.

/* A5.1 */
#pun {
margin: 0px auto auto auto;
width : 90%;
padding: 0px 5px 0px 5px;
}

Теперь отступаем от границ окна браузера сверху чуть-чуть больше, освобождая место для, собственно, размещения рекламного баннера:

/* A5.1 */
#pun {
margin: 64px auto auto auto;
width : 90%;
padding: 0px 5px 0px 5px;
}

Основные элементы форума при переработке дизайна

Окно статуса пользователя: /* D5.1 */

Главная страница:
Графа с описанием и названием локации: /* C2.1 */
Графа с количеством тем и сообщений в локации: /* C2.2 */
Графа с указанием последнего сообщения: /* C2.3 */

Страница поиска и списка участников:
Первая графа – ники: /* C2.4 */
Вторая графа - /* C2.5 */

Списки модераторов в описании локаций: /* C2.10 */

Отображение иконок: /* C2.14 */
Внимание! Параметр margin-left должен иметь значение в пикселях на 5-6 единиц больше, чем ширина ваших иконок!

Параметры иконок: /* C2.15 */ - расположение, ширина и высота ваших иконок.

Сообщение: /* C3.1 */

Черточка-граница между временем отправки сообщения и профилем автора: /* C3.3 */

Форма ввода текста: /* C1.16 */

Статистика - раздел D7
Мы видим в нём пять пунктов. Из них в деле разметки дизайна нас будут интересовать всего лишь сам контейнер (окно) статистики, где размещены все данные: /* D7.1 */. Остальные четыре пункта предусмотрены для работы с самой статистикой.

Расположение и структира навигационных ссылок

/* D3 Forum navigation
-------------------------------------------------------------*/

Расположение и структура пользовательских сслылок ( активные темы - новые сообщения - темы без ответов...)

/* D4 User links
-------------------------------------------------------------*/

расстояния между блоками

/* A5.4 */
.punbb .section, .punbb .main {
margin-bottom: 0;
}

Расстояние между блоками форума: верхом (таблица, навигационные и пользовательские ссылки), объявлением, приветствием, таблицей форума, блоком статистики.

/* A5.5 */
.punbb .category, .punbb .post {
margin-top: 0;
}

Расстояние между блоками-категориями в таблице форума

/* A5.6 */
.punbb #pun-category1, .punbb .toppost, .punbb .topicpost {
margin-top: 0;
}

Расстояние между приветствием и таблицей форума

/* 5.7 */
#pun-post .topic {
margin-top: 0;
}

Расстояние между формой ответа и постами на странице ответа

Тут везде стоит нулевое значение, следовательно, форум получится сплошным, без промежутков между блоками.

Поделиться42012-08-03 10:51:38

Автор: SeekerSkywarp
Mortal Immortal
Откуда: Москва
Зарегистрирован: 2011-12-17
Приглашений: 0
Сообщений: 476
Уважение: +58
Пол: Мужской
Возраст: 36 [1988-02-15]
Провел на форуме:
5 дней 15 часов
Последний визит:
2016-04-18 17:15:33

Цвета

/* CS1 Background and text colours
-------------------------------------------------------------*/

html, body{
background-color: #000;
color: #fff
}

Этот параметр задает фоновый рисунок вашего форума.
В данном случае фоновый рисунок задан просто как заливка цветом. Чтобы поставить картинку, код нужно несколько изменить:

body {
background: url(ссылка на ваш фон) #цвет repeat fixed;
}

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

#pun-title TABLE {
background: url(ссылка на шапку вашего форума (или лого)) #цвет заливки no-repeat top center;
}

Если вы хотите, чтоб под таблицей форума был отдельный цвет или фон, отличный от бекграунда, то обязательно уделите внимание этому моменту:

#pun {
background: url(ссылка на фон) #цвет;
}

Если не хотите заливать - просто сотрите все параметры отсюда, если они тут есть, пропишите background: none и оставьте этот кусочек кода в покое.

Далее вы видите параметр, отвечающий за заливку всех основных элементов вашего фора.

.punbb .main .container,
.punbb .section .container,
.punbb .section .formal .container,
.punbb .formal fieldset,
#viewprofile li strong, #viewprofile li div,
#setmods dd,
.punbb .post-body,
.post-box,
.punbb .post-links,
.punbb-admin #pun-admain .adcontainer,
.punbb .info-box, .punbb #pun-main .info-box .legend {background: url(ссылка на фон) #цвет фона repeat;
color: #цвет шрифта;
}

Этот момент можно заливать фоновым цветом (не вставлять url(ссылка на фон). Ну или сделать прозрачным.

Строка категорий, профиля, темы, статистики:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
background: #6C0000;
color: #fff;
font-size: 1.1em;
text-align: left;
font-family: georgia;
}

Меню навигации (Форум – Участники – Поиск – Правила…):

/* CS1.8 */
#pun-navlinks .container {
background: transparent;
color: #006699;
}

Графа строки «Форум-Тем-Сообщений»:

.punbb th {
color: #4B4B4B;
background: #E8E8E8;
}

Заливка цитаты и кода в сообщениях:

/* CS1.7 */
.punbb .quote-box, .punbb .code-box {
background: #E5E5E5;
color: #111
}

Сразу за ним следует отрезок, отвечающий за заливку формы для ввода текста:

.punbb textarea, .punbb select, .punbb input {
background: #E5E5E5;
color: #111;
border: 2px solid #fff;
}

.punbb .post .container,
.punbb .post h3 {
background: url(ссылка на фон) #цвет repeat;
color: #цвет текста;
}

.punbb .post h3 span {
background: url(ссылка на фон) #цвет фона repeat;
color: #цвет текста;
}

Эи параметры определяют заливку графы с именем пользователя, информацией о нем, строки с номером и временем отправки поста. Можно его заливать как фоновым рисунком, так и цветом.

.punbb .post h3 strong {
font-size: 0.9em;
color: #000;
}

Размер время и дата написания поста, а также его номер.

/* CS2 Border colours
-------------------------------------------------------------*/

Раздел посвящен полностью всем обводкам. Здесь вы можете проставить исключительно цвета. Если цвета каких-то рамок вам не удается поставить, внимательно просмотрите код структуры - возможно, цвета для некоторых рамок были прописаны там.

Обводка шапки и панели навигационных ссылок:

#pun-title, #pun-navlinks {
border-color: #000;
}

Обводка основных элементов и сообщений:

/* CS2.1 */
.punbb .container, .punbb .post-body, .post h3 {
border-color: #240000
}

Обводка цитаты и кода в сообщениях:

/* CS2.6 */
.punbb .quote-box, .punbb .code-box {
border-color: #240000
}

Обводка пользовательских ссылок (Активные темы – Новые Сообщения…), элементов объявления, статистических данных и другого:

#pun-ulinks li, #pun-announcement h2 span, li#onlinelist, #pun-help .formal .info-box h3.legend span {
border-color: #E8E8E8
}

#pun-ulinks li a, #pun-announcement h2, li#onlinelist div, #pun-help .formal .info-box h3.legend {
border-color: #F7F7F7
}

Если вы хотите сделать каждую часть рамки своего цвета, проставьте им цвета по порядку:

border-color: #CC9900 #996600 #663300 #996633

Тогда значения будут устанавливаться так: верхняя граница - левая - нижняя - правая.

/* CS3 Links
-------------------------------------------------------------*/

/* CS3.1 */
.punbb a, .punbb a:link, .punbb a:visited,
.punbb-admin #pun-admain a, .punbb-admin #pun-admain a:link, .punbb-admin #punbb-admain a:visited {
color: #000;
}