maestro-неудачник на выгуле;

Объявление

---> Эта запись наглядно демонстрирует отображение графы "объявления" в данном дизайне.

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

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

Вы здесь » maestro-неудачник на выгуле; » Небесная канцелярия » Помогиии мне...!

Помогиии мне...!

Страница: 1

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

1

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

Фигаро там, Фигаро тут... Фигари, Фигари, Фииигарооо! XDDD
Все шпаргалки сделаны на основе статьи Скимитара и со слов Принци Шипов!!!
Основы:

Размерности:
em – высота шрифта
ex – высота буквы
px - пикселы
in - дюймы
cm - сантиметры
mm - миллиметры
pt - пункты
% - проценты

Основные параметры:
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 (цвет) – цвет шрифта элемента (веб-значение)

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 - посередине

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

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

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

2

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

Полезные ссылки:

--> http://forum.mybb.ru/ (форум тех. поддержки)

--> http://ibtek.ru/mybb/index.php (абсолютный помошник CSS)

--> http://colorschemedesigner.com/ (генератор HTML-цветовой палитры)

3

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

Рамки блоков [border (right, left), border-width, border-...-width]
Что бы убрать все рамки - в первом окне стиля найти места с [border, border-width, border-...-width] и заменить их имеющееся |px|значение на нуль (0). На border-style, в этом случае, следует оставить без внимания!

4

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

Moderator menu (modmenu) - включает в себя "Тему просматривают", а так же, Модерирование тем + "Удалить, Перенести, Открыть или Закрыть темы; RSS • Atom ", одна полоса на странице тем и сообщений;
Термин принадлежит блоку:

/* C4 Moderator menu
-------------------------------------------------------------*/

5

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

Text setup - отвечает за текст на всем форуме;
Что бы изменить шрифт (курсив, жирный и т.п.) ищем font-weight (где normal - это обычный, где bold - жирный), чтобы сменить их на курсив надо ставить italic (или наоборот, в зависимости от желаемого результата и имеющегося в исходнике);
Название блока:

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

6

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

Блоки с названиями категорий - их можно отредактировать (цвет, фон, шрифт, текст) или же совсем изменить, вставив, к прмеру, свое собственное изображение;
Как выглядит: Второе окно своего стиля цсс:

/* CS1.3 */
#pun-stats h2, .punbb .main h1, .punbb .main h2, #pun-debug h2 {
  background: url(../../img/Mybb_Strict/h2.png) #babec3 repeat-x;
  color: #444;
  }

#babec3 - цвет она под картинкой;
(../../img/Mybb_Strict/h2.png) - картинко;
color: #444 - цвет надписи;

7

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

A5 Basic page layout and borders - положение страниц и размеры форума;
Выглядит так:

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

Первый код раздела А5.1 - отвечает за ширину форума, его расположение относительно окна браузера;

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

#pun - означает, что код охватывает все страницы форума;
margin - отвечает, как раз, за расположение блока форума отночительно окна браузера;
width - соответственно, ширина форума (можно в процентах, можно в пикселях)

А5.8 – отвечает за обводку  элементов и непосредственно сообщений;
А5.9 – отвечает за обводку элементов форума. Сами «контейнера», где и располагается всё остальное;
А5.10 – отвечает за обводку полос с названием локации на странице со списком тем, полосы статистики, категорий, полос профиля;
А5.11 – отвечает за обводку полос категорий;
border-width: 1px 1px 0px 1px; - толщина каждой линии из четырех;
border-style: solid solid none solid; - стиль каждой линии из четырех;
padding: 5px 1em 7px 1em; - линия отбивки материнского объекта.

В1 – полоска, разграничивающая текст в посте и подпись участника;

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

Всё те же параметры: ширина (width - протяженность полосы по странице сообщения), отступ (margin - отбивка), стиль (border-top - здесь описаны и толщина, и стиль, и цвет), отображение (display);

С2 - такая вариация границ, как рамки между графами нам главной странице форума;

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

8

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

Рекламный баннер: /* 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;
}

Возвращаемся в *A5, в код A5.1. Ловим код:

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

Двигаем основной блок вниз, меняя первую цифру в отбивке:

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

9

  • Автор: dragon747
  • витиевато глуп;
  • dragon747
  • Зарегистрирован: 2010-01-31
  • Приглашений: 0
  • Сообщений: 409
  • Провел на форуме:
    2 дня 22 часа
  • Последний визит:
    2011-06-26 19:26:35

ПОДЛОЖКА
В блоке A5 Basic page layout and borders все тот же код /* A5.1 */

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

Нам нужна строка padding - она определяет подложку, насколько та "выглядывает" из под блоков форума;
Ее код можно прописать одельно, в столбик:

padding-top: 0px;
padding-left: 10px;
padding-right: 10px,
padding-bottom: 0px;

В итоге получаем:

/* A5.1 */
#pun {
  margin: 20px auto auto auto;
  width : 898px;
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px,
  padding-bottom: 0px;}

Страница: 1

Вы здесь » maestro-неудачник на выгуле; » Небесная канцелярия » Помогиии мне...!