ForumD.ru - Дизайн для форумов, скрипты для форумов, техническая поддержка

Объявление

Контакты:

Instagram: a.schmidt1895
WhatsApp: +7(938)116-19-35

Подробнее

Загадочный Дом «Кузнечик»

Форумные игры, кино, позитивное отношение и душевное общение!
Есть в мире место, где душе тепло...
Заходи, мы будем тебе рады!

Подробнее

Мийрон

Качественный пиар быстро и недорого.
Красивейшие дизайны по низким ценам.
Каталог ролевых игр.

Подробнее

Дизайн «Warlords of Draenor»

Детализированный rpg-дизайн для MyBB форума гильдии «Warlords of Draenor»
Стоимость при покупке эксклюзивно: 6300р
В стоимость входит настройка и корректировка дизайна под ваш проект.

Подробнее

Светлый дизайн в фентези стиле с аниме-графикой

Макет для светлого дизайна в фентези стиле с аниме-графикой.
Стоимость: 2600р*
Дизайн продается эксклюзивно (в одни руки).

Подробнее

Поддержать проект

Если у вас есть желание помочь нам сделать наш проект лучше:
Реклама на сайтеПредложения
Стать модераторомОтзывы

Подробнее
Открыта регистрация участников лотереи "Ролевые заявки" за июль. Не пропустите! Cрок регистрации до 10.08!

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

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



Гайд: FAQ по дизайну CSS на MyBB форуме

Сообщений 11 страница 20 из 20

1

Новый FAQ по дизайну форума в CSS

Составлен на основе "FAQ по дизайну форума в CSS" от Zebra

Копирование статьи разрешено только со ссылкой на эту страницу!

Основы дизайна css
О том, что такое дизайн css и как его применять.

Что по сути есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять вид удобный для чтения и восприятия информации. Например: на форумах визуально разделены разных "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако, дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.

Вся работа с дизайном форума через css коды будет представлять собой прописывание кодов для отдельных элементов.
Вставлять данные коды необходимо в Администрирование > Настройки > HTML-верх или можно редактировать стандартный дизайн-шаблон через Администрирование > Стиль

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

<style type="text/css">
тут будет код css
</style>

Вписав в HTML-верх эти два тега, между ними можно будет вставлять все необходимые для нового дизайна css коды.
Принципиальное правило которое нужно учитывать: размещайте их всегда МЕЖДУ тегами <style type="text/css"> и </style>

Общие понятия о css
Расшифровка css-кодов и схема их написания.

Что представляет собой css код для какого либо элемента?
Он состоит из СЕЛЕКТОРА, ПАРАМЕТРА и АРГУМЕНТА.

Селектор (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. мы указываем (выбираем), что будет изменено. (например: категории форума, форма ответа, поля профиля и т.п.)
Параметр - это свойство элемента. мы указываем, что в выбранном элементе надо поменять (например: фон, размер, границы и т.п.)
Аргумент - это значение свойства. мы указываем, какие именно изменения произойдут с выбранным свойством. (например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.)

Стандартный css код выглядит следующим образом:

#селектор {параметр: аргумент;}

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

#селектор {параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
параметр: аргумент;
....
}

Вот пример того, как выглядит код для меню навигации

#pun-navlinks {backgroud-color: #FF0000;}

#pun-navlinks {background-color: #FF0000; width: 400px; height: 200px;}

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

Например, мы придадим одинаковые фон, высоту и ширину меню навигации и меню пользовательских ссылок:

#pun-navlinks, #pun-ulinks {background-color: #FF0000; width: 400px; height: 200px;}

Параметры и значения CSS
О том, как производить изменения в выбранных селекторах.

Цвета в CSS
для всех параметров, которые требуют указания цвета, например, ФОНА и ЦВЕТА ШРИФТА, необходимо указывать веб-название соответствующего цвета.
Веб-названия для различных цветов можно посмотреть тут: Таблица HTML цветов (обновленная)
Например, вот так будет выглядит код для задания цвета:

#селектор {параметр: #FF0000;}

Размеры в CSS
для всех параметров, имеющих отношение к размерам, длине или ширине чего-либо значения представляют собой число и двухбуквенное обозначение единицы измерения

em - высота шрифта (текущий кегль)
ех - высота буквы х для текущего кегля;
рх - пикселы (относительно координат окна).
in - дюймы;
cm - сантиметры;
mm - миллиметры;
pt - пункты;

ШИРИНУ ДОПУСТИМО ОБОЗНАЧАТЬ В ПРОЦЕНТАХ

Красным отмечены те единицы измерения, которые мы вам рекомендуем к применению.

Например, так мы задаем ширину и высоту элемента

#селектор {height: 200px; width: 70%;}

Параметры CSS

ФОН

background-color 
Цвет фона элемента. Значением может быть веб-название цвета.

background-attachment
Определяет, будет ли прокручиваться фон.
Значения:
scroll - фон поддается прокрутке
fixed - не поддается прокрутке.

background-image
Фоновая картинка
Значения:
url ("...") - где в скобках адрес картинки
none - никакой картинки

background-repeat
Определяет, будет ли размножаться фоновая картинка
Значения:
no-repeat - Не размножается
repeat-x - размножается по горизонтлаи
repeat-y - размножанется по вертикали
repeat-xy - размножается в обоих направлениях.

background-position
Расположение фоновой картинки на странице
Сначала указывается расположение по вертикальной оси: top (верх), center(центр) или bottom(низ), затем по горизонтальной: left(слева), center(центр) или right(справа)

Пример:

#селектор {
background-color: #FF0000;
background-image: url("http://forum.mybb.ru/viewtopic.php?pid=40#p40.jpg");
background-attachment: fixed;
background-repeat: repeat-y;
background-position: top left;
}

расшифровать это можно так:

#элемент форума {
цвет фона: #красный; //(если картинка меньше, чем элемент форума, цвет будет такой)
фоновая картинка: ссылка на картинку;
прокрутка фоновой картинки: не прокручивается, фон зафиксировали;
Повторение фона: Повторить по вертикали;
позиция фона: начинается сверху слева;
}

Границы (рамки)

border
Все параметры рамки, например, толщина, цвет и т.д.

border-color
Цвет рамки

border-width
Толщина рамки

border-style
Стиль оформления рамки всех сторон рамки
Значения:
none - указывает на то, что рамки нет.
dotted - задает пунктирную рамку из точек
dashed - задает штрих - пунктирную рамку
solid - задает одинарную сплошную рамку
double - задает двойную сплошную рамку
groove - создает трехмерный эффект впадающей рамки
ridge - создает трехмерный эффект возвышающейся рамки
inset - создает трехмерный эффект заглубленности фона
outset - создает трехмерный эффект выпуклости фона

border-top
Все параметры верхней рамки
border-bottom
Все параметры нижней рамки
border-left
Все параметры левой рамки
border-right
Все параметры правой рамки

Пример №1:

#селектор {border: #FF0000 dashed 2px;}

Все границы элемента красные, пунктиром и шириной в 2 пикселя

Пример №2:

#селектор {border-color: #FF0000;
border-width: 2px;
border-style: none dashed none double;
}

Все границы элемента красного цвета, шириной в 2 пикселя, левая граница пунктиром, а нижняя двойной линией

Пример №3

#селектор {border-top: #FF0000 dashed 0px;
border-bottom: #FF0000 dashed 0px;
border-left: #FF0000 dashed 2px;
border-right: #FF0000 dashed 2px;
}

Справа и слева границы есть - они красные, пунктиром и толщиной 2 пикселя, а сверху и снизу их нет.

ШРИФТ И ТЕКСТ

color
Цвет шрифта в элементе

font-size
Размер шрифта.
Размер может быть установлен несколькими способами. Допускается использовать любые допустимые единицы CSS: em (высота шрифта элемента), ex (высота символа х), пункты (pt), пикселы (px), проценты (%) и др.
Или можно использовать константы (стандартные размеры): xx-small, x-small, small, medium, large, x-large, xx-large.

font-style
Начертание шрифта.
Значения:
normal - соответствует основному начертанию
italic - курсив
oblique - чуть менее наклонный, чем курсив

font-weight
Толщина начертания
Значения:
bold — полужирное начертание
bolder — жирное начертание
lighter — светлое начертание
normal — нормальное начертание
число от 100 (минимальная жирность) до 900 (максимальная)
Браузеры обычно не могут адекватно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в браузерах обычно ограничено всего двумя вариантами: нормальное начертание и жирное начертание.

font-family
Семейство шрифта
Список шрифтов может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.
Как это работает: Когда браузер встречает первый шрифт в списке, он проверяет его наличие на компьютере пользователя. Если такого шрифта нет, берется следующее имя из списка и также анализируется на присутствие. Поэтому несколько шрифтов увеличивает вероятность, что хотя бы один из них будет обнаружен на клиентском компьютере. Заканчивают список обычно ключевым словом, которое описывает тип шрифта — serif, sans-serif, cursive, fantasy или monospace. Таким образом, последовательность шрифтов лучше начинать с экзотических типов и заканчивать обобщенным именем, которое задает вид начертания.

font
Все вышеперечисленные параметры шрифта вместе

Пример №1:

#селектор {font: #FF0000 small bold;
}

Красный маленький жирный шрифт.

Пример №2:

#селектор {font-family: Georgia, 'Times New Roman', Times, serif;
font-weight: bold;
font-style: italic;
font-size: small;
color: #FF0000;
}

Шрифт Georgia (если нет такого на компе пользователя, отобразится Times New Roman, если не будет таймс нью роман, отобразится Times, если нет всех вышеупомянутых, отобразится serif).

text-align
Выравнимание текста внутри элемента.
Значения:
left - по левому краю
right - по правому краю
justify - по ширине
center - по центру

Пример:

#селектор {text-align: center;
}

text-decoration
Украшение текста
Значения:
underline - подчеркивание
overline - верхнее подчеркивание
none - никакого
blink - мигание

Пример:

#селектор {text-decoration: underline;
}

ССЫЛКИ

Если вы хотите изменить внешний вид ссылок внутри какого-лиюбо элемента, достаточно в коде после названия элемента добавить букву "a" (латинскую!!!).
Пример:

#селектор a {color: #FF0000;}

Можно также поставить разное оформление для ссылки в нормальном состоянии, после посещения и при наведении.
a:link - для нормальной ссылки
a:visited - для ссылки после посещения
a:hover - для ссылки при наведении мышкой
Пример:

<style type="text/css">
#селектор a:link, #селектор a:visited {color: green;}
#селектор a:hover {color: red;}
</style>

Этот код сделает ссылки в выбранном месте до и после посещения зелеными, а при наведении - красными.

ВАЖНО! Забегая вперед, следует отметить, что если вы не хотите назначать разное оформление ссылок для каждого из возможных селекторов форума, то следует пользоваться универсальным кодом:
цвет все ссылок в обычном состоянии:

.punbb a:link, .punbb a:visited {color: ...;}

цвет всех ссылок при наведении:

.punbb a:hover {color: ...;}

ОТОБРАЖЕНИЕ ЭЛЕМЕНТА

float
Отображение растекающегося объекта
Значения:
left - отображает растекающийся объект на левой стороне
right - отображает растекающийся объект на правой стороне
none - отображает объект вставленным в страницу
Пример (отображение слева):

#селектор {float: left;
}

display
Способ отображения элемента
Значения:
none - элемент вообще не виден
block - выдает элемент в рамке
list-item - выдает элемнт как часть списка и присваивает ему маркер
inline - выводит объект в одну строку.
Пример (не отображать):

#селектор {display: none;
}

vertical-align
выравнивание элемента по вертикали
Значения:
top - по верхнему краю
bottom - по нижнему
middle - посередине
Пример (отображение по верхнему краю):

#селектор {vertical-align: top;
}

height
высота элемента
width
ширина элемента
См. пункт "Размеры в CSS".
Пример (высота - 20 пикселей, ширина - 400 пикселей):

#селектор {
height: 20px;
width: 400px;
}

ОТСТУПЫ

padding и margin
Это два на первый взгляд похожик параметра. Но между ними есть разница:
padding - линия отбивки материнского объекта
margin - линия отступа дочернего объекта
Для примера представьте себе окно Word. Само окно Word - материнский объект. А текст, который мы пишем - дочерний объект. Теперь, в данном случае линией отбивки для материнского объекта будет расстояние от края окна до краев листа. Потому что писать текст мы в любом случае можем только на листе. Поэтому padding - это некая граница, внутри которой в одном элементе могут располагаться другие элементы. Margin же в данном примере будут поля, которые мы установили для текста. Т.е. это простой отступ на котором располагается элемент, в данноом случае текст.

padding-top - верхняя отбивка
padding-bottom - нижняя отбивка
padding-left - левая отбивка
padding-right - правая отбивка.
padding - все стороны отбивки сразу.
Значения - См. пункт "Размеры в CSS".
Пример:

#селектор {
padding-top: 20px;
}

margin-top - верхний отступ
margin-bottom - нижний отступ
margin-left - левый отсуп
margin-right - правый отсуп
margin - все стороны отступа сразу.
Значения - См. пункт "Размеры в CSS".
ДЛЯ ОТСТУПОВ ДОПУСТИМЫ ОТРИЦАТЕЛЬНЫЕ ЗНАЧЕНИЯ
Пример:

#селектор {
margin-top: -20px;
}

Отредактировано Герда (30.10.2012 19:53:08)

+7

11

вот если бы вы, начиная со второго поста, писали бы в каком месте находиться все это (/* A2.1 */, /* C3.16 */, /* CS2.1 */ и т.д.), то вообще было бы супер!

0

12

Sharky
копируете селектор, идете в свой стиль, нажимаете Ctrl+F и ищете. Если такого селектора нет, просто вставляете в низ своего стиля без тегов <style>

0

13

mintemero
*чешет затылок*
эх, всегда забываю об этом f3)
ну-с, спасибо)

все, все, не флужу.

0

14

Хм... А как редактировать стиль подписи не сказано или я не нашла?

0

15

16

Герда
Спасибо!

0

17

Правда в указанной теме рассказывается только о разделителе. А как быть со стилем текста в подписи? Возможно ли сделать его меньше/больше основного текста, другого цвета и т.д.?

0

18

FoxEt

<style>
.post-sig {
*настройки стиля*
}
</style>

0

19

mintemero
Да, оно! Спасибо)))

0

20

как уменьшить размер строчки "старая тема"
тут: http://forymcats.mybb.ru/
У меня важно, закрыто уменьшается, а старая нет
Если есть ошибка, исправьте пожалуйста

код
Код:
/* CS4 Post status icons
 -------------------------------------------------------------*/


     div.icon {
     background: url(http://s2.ipicture.ru/uploads/20120812/UaTfZ14T.png) no-repeat;
     }
     height: 30px

    div.icon {
    background: url(http://s2.ipicture.ru/uploads/20120812/UaTfZ14T.png) no-repeat;
    height: 30px
    }

    tr.inew div.icon {
    background: url(http://s2.ipicture.ru/uploads/20120812/zjLRd36I.png) no-repeat;
    height: 30px
    }

    tr.iclosed div.icon {
    background: url(http://s2.ipicture.ru/uploads/20120812/PTPw2vIp.png) no-repeat;
    height: 30px
    }

    tr.isticky div.icon {
    background: url(http://s2.ipicture.ru/uploads/20120812/U1J5od41.png) no-repeat;
    height: 30px
    }

переадресации тут нет, я знаю

0

Быстрый ответ

Напишите ваше сообщение и нажмите «Отправить»


ВНИМАНИЕ! При обращении за техподдержкой и вопросами по скриптам/оформлению, оставляйте ссылку на форум/сайт с проблемой! Специалист должен вживую видеть проблему, чтобы подсказать как ее решить.

ВНИМАНИЕ! Гости (не зарегистрированные на форуме) могут писать сообщения, но не могут вставлять прямые ссылки! Чтобы оставить сообщение со ссылкой на сайт, форум или скриншот удалите символы: "http://", "https://" или "www."