WildSide

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » WildSide » Скрипты » Описание стиля CSS


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

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

1

Примечание: я не профессионал,
но постаралась собрать статью так,
чтобы она была удобной и понятной.
Источниками послужили статьи
Ше-рауфа, Скимитара, 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 - посередине

+1

2

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

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» Если нажать на неё, а потом навести на на какой-нибудь элемент форума, можно увидеть полный код этого элемента. Подробнее об этом написано на едином форуме поддержки.

0

3

Структура

текст

/* 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;
  }

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

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

0

4

Цвета

/* 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;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

.punbb li.isactive a, .punbb li.isactive a:link, .punbb li.isactive a:visited {
  color: #000;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

/* CS3.2 */
.punbb a:hover, .punbb a:focus, .punbb a:active,  .punbb-admin #pun-admain .nodefault,
.punbb-admin #punbb-admain a:hover, .punbb-admin #punbb-admain a:focus, .punbb-admin #punbb-admain a:active {
  color: #000;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

/* CS3.3 */
#pun-navlinks a {
  color: #000;
  text-decoration: none
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

/* CS3.4 */
#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #000;
  text-decoration: underline
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background-color: #000;
  color: #000;
  }

color: #000; - цвет ссылок в спокойном состоянии. Лучше задавать близким или одинаковым с цветом текста на форуме.

.post h3 span a:link, .post h3 span a:visited {
  font-weight: normal;
  font-size: 0.9em;
  text-decoration: none;
}

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

#pun-navlinks a:hover, #pun-navlinks a:focus, #pun-navlinks a:active {
  color: #000;
  text-decoration: underline;
  background: url("ссылка на фон") repeat-x;
  }

#pun-pagelinks a:active, #pun-pagelinks a:focus {
  background: url("ссылка на фон") repeat-x;
  color: #000;
  }

И проставить тут необходимый вам фон.


/* CS4 Post status icons
-------------------------------------------------------------*/

В данном разделе мы с вами наконец-то проставим картинки иконок, для которых освободили место в коде структуры.

Иконка простой темы:

div.icon {
        background: url(ссылка на картинку) no-repeat;
}

Иконка активной темы:

tr.inew div.icon {
        background: url(ссылка) no-repeat;
}

Иконка закрытой темы:

tr.iclosed div.icon {
        background: url(ссылка) no-repeat;
}

Иконка перемещенной темы:

tr.iredirect div.icon {
        background: url(ссылка) no-repeat;
}

Иконка выделенной (важной) темы:

tr.isticky div.icon {
        background: url(ссылка) no-repeat;
}

Заливка блока статистики:

#pun-stats ul.container {
        background: transparent url(ссылка) no-repeat 12px 10px;
        padding-left: 71px;
}

10px 10px; - эти параметры задают отступ слева и сверху
padding-left: 66px; - а вот этот - справа. Его необходимо расчитывать по принципу - ширина иконки + как минимум 10 пискселей до начала строки "Активны".

Иконка около статистики:

#pun-stats div.statscon {
   background:  #F0F0F0;
}

Также надо обратить внимание на значки около ссылки на последнее сообщение на главной странице форума. Настроить данное изображение вы можете вот тут:

td.tcr a{
        background: transparent url(ссылка на картинку) no-repeat 0px 0px;
        padding-left: 16px;
        padding-bottom: 4px;
        pading-top: 7px;
}

0


Вы здесь » WildSide » Скрипты » Описание стиля CSS


Рейтинг форумов | Создать форум бесплатно © 2007–2017 «QuadroSystems» LLC