Role Club

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

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


Вы здесь » Role Club » CSS » Краткое руководство по функции "Свой Стиль"


Краткое руководство по функции "Свой Стиль"

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

1

Я хотела бы предложить вашему вниманию краткое, на сколько это возможно, руководство. Оно поможет новичкам освоить функцию "Свой Стиль".

Начнём с верхнего окошка Стиля, а точнее с пункта Структура style.css

Немного прокручиваем и видим вот такой кусочек кода:

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

Это шрифты вашего форума. Разберем этот раздел поподробнее:
Сразу стоит заметить, кто ко всем пунктам можно добавить пункты:
font-family: Georgia,serif; - это шрифты, которыми будет написан текст;
color: #05030d; - это цвет шрифта.

Пункты, которые можно заменить:

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

Шрифт, которым мы печатаем текст в окне сообщения.

/* A3.4 */
.punbb h1, .punbb h2, .punbb h3, .punbb h4, .punbb table, .punbb th {
  font-size: 1em;
  font-weight: normal;
  }

Текст в объявлении и в описаниях форумов.

/* A3.5 */
.punbb h1 span, .punbb h2 span, .punbb legend span {
  font-size: 1.1em;
  }

Шрифт текста в категориях.
На заметку:не делайте текст слишком большой или слишком маленький. Размер 1em Вам вполне подойдет. И не переборщите с разнообразием шрифтов. Один, максимум два вида на целый форум - и достаточно!

Далее не трогаем и прокручиваем вниз, пока не наткнёмся на вот такие буковки:

/* A5.2 */
.punbb {
  float: left;
  width: 100%;
  height: auto;
  }

Это размер и положение вашего форума.
float: left; - положение. Можно заменить на right; или center;, тогда ваш форум соответственно передвинется в право или встанет по центру станицы.
width: 100%; - ширина форума. Можно указать в процентах, как в примере, или же в пикселях (что в большинстве случаев гораздо удобнее). В последнем случаи это будет выглидеть так : width: 900px;
На заметку: 900px - самый распространённый и часто используемый размер форума.

Это:

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

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

Итак, один из самых излюбленных кусочков многих админов:

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

Границы форума.
border-style: solid; - как именно будет обведена таблица форума (штрих, жирной или тонкой полоской и тд)
border-width: 1px; - ширина обводки (не советую делать слишком большую, так как это будет бросаться в глаза)

Вот этот пункт:

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

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

Листаем вниз. Следуйщий пункт не заставил нас долго ждать и показался уже после 3 абзацев. Что ж, приступим к нему:

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

Он не мало важен, так как регулирует, как будет отображаться границы между постом и подписью пользователя.
solid #888; - цвет этой самой границы.
width: 250px; - её ширина.
На заметку: Ни в коем случаи не делайте эту границу такого же цвета, как и фон. получиться смазано и разобрать что где будет невозможно. Так же мы не рекомендуем делать разделительную линию стишком длинной, будет смотреться неаккуратно.

Далее прокрутим достаточно большую часть кода, пока не наткнёмся на вот это:

/* C2 Table layout
-------------------------------------------------------------*/

Абзацы этого раздела регулируют положение и размер граф "Форум", "Тем", "Сообщений" и, конечно же, "Последнее сообщение".
Преступим:

Это:

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

Отображение графы "Форум".
text-align: left; - положение. Напоминаю, что можно поменять на  right; или center; соответственно.
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%; - ширина.

Далее опускаемя, пока не увидим вот такую штуку:

/* C2.14 */
.punbb tbody.hasicon td.tcl {
  padding-left: 3.2em
  }

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

Теперь:

/* C2.15 */
.punbb div.icon {
float: left;
    display: block;
    width: 30px;
    height: 30px;
    padding-top: 1px;
    margin-top: 1px;
}

Это в свою очередь расположение, высота и длинна иконок.
width: 30px;
height: 30px;
- меняем на нужный.

Далее нет особо необходимых пунктов, их мы прокручиваем и видим это:

/* D1.2 */
#pun-title h1 {
  display : block;
  height : 40px;
  padding: 2em 1em 0 1em;
  }

height : 40px; - высота вашего логотипа.

Это тоже оче6нь важный пункт

#pun-title TABLE {
        border: none;
        height: 105px;
        width: 100%;
        border-top: solid 1px #636496
}

Высота графы, в которой расположен ваш логотип (шапка)
На заметку: Высота этой графы должна соответствовать высоте логотипа (шапки).
В принципе это всё. Так как наше руководство краткое. Всех заморочек я не расписывала.

+3

2

А вот и пришло время второй части нашего занимательного, надеюсь, руководства. Цвета style_cs.css!

Начнём же!
Первый и, наверное, самый важный пункт:

body {

        background: url(ссылка) #цвет repeat fixed !important;

}

Это фон вашего форума!
Если хотите, чтобы фон был одноцветным - ваш код будет выглядеть вот так:

body {
background-color: #цвет;
}

Этот параметр:

/* CS1.2 */
.punbb .main .container, .punbb .post .container, .punbb .post h3, .punbb-admin #pun-admain .adcontainer {
  background-color: #цвет;
  color: #333;
  }

Отвечает за заливку пользовательских ссылок форума.
background-color: #цвет; - фон
color: #333; - цвет текста
На заметку: В данном случаи цвета текста не стоит менять, так как #333 и другие подобные цвета означают заливку стандартный цветом.

Это тоже очень важный параметр:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-color: #1474C3;
  color: #fff;
  }

Заливка поля категорий.
Если вы хотите, чтобы тут была фоновая картинка - код будет таким:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2, .punbb-admin #pun-admain h2 {
  background-image: url(ссылка); height : 20px;
  color: #342832;
  font-weight: normal;
font-style: italic;
  }

height : 20px; - менять на свою.
На заметку: ширина фона (картинки) не должна превышать ширину форума.

Теперь установим на наш форум шапку. Для этого нам нужен вот такой параметр:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #FFFFFF;
  color: #333333;
  }

#pun-title table {background: url(http://ссылка на шапку);
}

#pun-title .title-logo span {display: none;}

Данный параметр:

/* CS1.4 */
#pun-title, #pun-title .container, .punbb .modmenu .container {
  background-color: #E1EDF7;
  color: #333;
  }

Отвечает за заливку фона меню модератора и активных в данной теме.

Это:

/* CS1.5 */
.punbb legend span, #viewprofile h2 span, #profilenav h2 span, .punbb-admin #pun-admain legend span {
  background-color: #f7f7f7;
  color: #005EAB
  }

Заливка категорий в профиле.

Этот параметр:

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

Отвечает за заливку цитаты и кода.

А этот:

/* CS1.8 */
#pun-navlinks .container {
  background-color: #0F5995;
  color: #f1f1f1;
  }

Ответственный за меню навигации.

Весь пункт:

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

Отвечает за цвет границ.
На заметку: Все границы лучше делать одного цвета.

Весь пункт:

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

определяет цвет ссылок.
На заметку: Лучше чтобы все ссылки были одного цвета.

Теперь перейдём к иконкам форума:

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

div.icon {
        background: url(http://старая тема) no-repeat;
}
tr.inew div.icon {
        background: url(http://новая тема) no-repeat;
}
tr.isticky div.icon {
        background: url(http://важная тема) no-repeat;
}
tr.iclosed div.icon {
        background: url(http://закрытая тема) no-repeat;
}
tr.iredirect div.icon {
        background: url(http://переадрессация) no-repeat;
}

Заполняем соответственно.

Ну вот, наше руководство подошло к концу. Всем спасибо за внимание. Надеюсь мы смогли вам помочь. Если у вас возникли вопросы - обращайтесь.

Отредактировано Шептунья (2011-10-18 21:45:05)

+2

3

Шептунья написал(а):

/* CS1.8 */#pun-navlinks .container {  background-color: #0F5995;  color: #f1f1f1;  }

Вы уверены, что это отвечает за заливку цитаты? )) Это же меню навигации.

Но вот честно - на ЕТП правильно указали - не стоит новичкам в первое окошко соваться, наворотят черти чего.

В самой статье море ошибок, вот честно... Может, просто скопировать вариант Зебры и дополнить его?

Отредактировано Zillah (2011-10-18 21:42:13)

0

4

Zillah,

Шептунья написал(а):

/* CS1.7 */.punbb .quote-box, .punbb .code-box {

вот это заливка цитаты. Я этот пункт имела ввиду.
Но Вы правы, написала немного неясно, сейчас разделю эти пункты.

0

5

Шептунья
Честно говоря, ни за что не порекомендовал ваше руководство начинающему или продолжающему стилесобирателю (те, кто долго заморачивается - обычно сами уже все расписали по пунктам где-нибудь на тестовике ;) ). Не в обиду сказано будет, но очень, очень недоработанное и корявенькое.

0

6

Zillah написал(а):

те, кто долго заморачивается - обычно сами уже все расписали по пунктам где-нибудь на тестовике

Эта статья и создана для того, что бы меньше людей заморачивалось.
Возможно, кому-то оно и поможет, откуда Вам знать)

Zillah написал(а):

Не в обиду сказано будет, но очень, очень недоработанное и корявенькое.

Тут не на что обижаться. Это Ваше мнение, спасибо Вам за него)
Здоровая критика - это всегда хорошо. Возможно, это подстегнет меня и я, когда появиться время, доработаю эту статью.

Отредактировано Шептунья (2011-10-18 21:53:06)

+2

7

Лично мне статья помогла.

0

8

Фианна написал(а):

Лично мне статья помогла.

Очень рада это слышать)

0

9

Я с СSS неплохо умею работать, однако кое-что нашла для себя полезного! Спасибо)))

0

10

так же нашла, но все равно остаются вопросы, которые никак не поддаются логическому обоснованию.)
спасибо)

0


Вы здесь » Role Club » CSS » Краткое руководство по функции "Свой Стиль"


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