Доброго времени суток!

Пока начну разбирать все по порядку, хочу сказать, что иметь CSS стиль не обязательно и не влияет на уровень, который дает персонажу рецензент. Это лишь для тех, кто хочет " порадовать глаз ".

Доступ к редактированию CSS есть у тех, кто имеет роль Ролевик на сайте. А она дается подтвержденным ролевикам, или тем, кто уже поиграл на проекте Darkmoon как минимум неделю.

Правила по использованию CSS
5.6. Автопроигрывание музыки допустимо только тогда, когда проигрывание музыки можно отключить сразу же после захода в творчество игрока и музыка является «уместной». Отключение проигрывания музыки сразу же после захода обозначает, что в верху шапки или сбоку экрана располагается заметная глазу кнопка, при нажатии на которую отключается проигрывание музыки. «Уместность» музыки понятие субъективное, которое включает в себя громкость музыки, возможность соотнесение ее с творчеством, в котором оно располагается. Учитывая его субъективность, для автора творчества вначале оговаривается просьба заменить музыку или выключить автопроигрывание.

5.7. Не допускается использование CSS для скрытия важных элементов. К важным элементам относятся:
1) логотип Даркмуна, позволяющая вернуться на главную страницу.
2) Название творчества (анкеты, квенты, отчета, гильдии) в текстовом формате, которое можно выделить и скопировать в буфер обмена.
3) Оценка творчества и комментариев.
4) Кнопки действий — профиль пользователя, понижение и повышения репутации творчества и комментариев, написание комментария.
5) Число просмотров, тэги.
6) Кнопка редактирования творчества.

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

Как создать надпись
С левой стороны, на желтом фоне видите названия шрифтов. С правой стороны можете выбрать тот, который вам больше нравится. Я часто пользуюсь Старо Русскими Шрифтами.


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


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

Не все знают, что у каждого цвета есть соответствующий код, который нужно указать в CSS.
Я пользуюсь саитом color-hex где можно узнать коды всех цветов и саитом Artlebedev.

Разберем код, который поможет нам узнать как менять цвет основного фона

Вы видите, что в скобках указаны цифры rgba(192, 192, 192, 0.9); Если хотите изменить скажем цвет основного фона, но не хотите потерять прозрачность, сквозь которого видна картина на заднем фоне, то лучше использовать код rgba.

Если поменяете его на код, который выглядит таким образом #000000 то не сможете настроить прозрачность. А настроить прозрачность помогают цифры в конце: 0.9); Пример можете посмотреть в спойлере.

Как менять цвет
В целом код цвета выглядит таким образом, как видно на картинке снизу #0e2f44. Сразу хочу заметить, что не имеет значение буква заглавная, или нет. Главное, что-бы совпадали и буквы и цифры.
Если вам нужно поменять код, который задает цвет шрифту, то думаю заменить один код (#000000) на другой (#0e2f44) не проблема и не нужно обяснять.


Разберем второй код, который дает возможность менять прозрачность фона.
(14, 47, 68... в конце которого нужно добавить 0.5, или 0.9 к примеру. Где цифры 14, 47, 68 — это темно синий цвет, а 0.5 — прозрачность цвета.
Если взять к примеру код rgba(14, 47, 68, 0.5); то мы получим фон, которого можно увидить на картине.


Код rgba(14, 47, 68, 0.7); даст нам другой вариант.


Но, если вам не нравится прозрачный и хотите просто синий фон, то вам придется поменять код background: rgba(14, 47, 68, 0.7); на код — background-color: #0e2f44; И вы получите темно синий фон сквозь которого не будет видна картина на заднем фоне.

Стоит заметить, что в начале и в конце CSS обязательно должны быть <style> </style>. Без них ни один код не будет работать. Все коды должны быть в поле между ними.

► 1

Первый и наверно самый простой, это код, который дает возможность изменить задний фон анкеты/отчета.

body { — Название кода.
background: url(" Тут ссылка на картину которого по желанию можете менять ") no-repeat fixed;
background-size: cover; — Дает возможность растянуть картину на заднем фоне так, что-бы не было видно лишних белых мест.
background-position: center; — Дает возможность разместить картину в центре.

Спойлер для копирования кода
body {
background: url(" ") no-repeat fixed;
background-size: cover;
background-position: center;
}

► 2

Все наверно обратили внимание, что в некоторых анкетах/отчетах основной фон растянут и выглядит более красиво, чем стандартный размер.

section { — Название.
width: 980px !important; — Дает возможность растянуть основной фон анкеты/отчета.

Спойлер для копирования кода
section {
width: 980px !important;
}

► 3

Это код основного фона анкеты/отчета на котором пишется текст.

#body section article { — Название.
background: rgba(192, 192, 192, 0.9); — Позволяет ставить на основном фоне цвет, который более приемлимо смотрится. Прозрачность фона можно менять с помощю последних цифер. К примеру: 0.1 светлый, а 0.9 темный.
Вместо кода выше, можно поставить цвет в таком стиле - background-color: #330000; как в этом путеводителе, но этот код не позволяет менять прозрачность основного фона.
border: 3px solid #000000; — Рамка вокруг основного фона. По желанию можно менять 3px на 2px, или 4px.
box-shadow: 0 0 10px #b3b3b3; — Тень рамки основного фона. Цвет и размер тени можно менять по собственному желанию.

Спойлер для копирования кода
#body section article {
background: rgba(192, 192, 192, 0.9);
border: 3px solid #000000;
box-shadow: 0 0 10px #b3b3b3;
}

► 4

Код помогает задать размер, цвет и стиль шрифта на основной странице.

.content_item .field { — Название.
font-size: 24px; — Размер шрифта. К примеру: 16px на некоторых шрифтах смотрится некрасиво. На таких лучше использовать более большие размеры, как 18px, или 20px.
color: #000000; — С помощю этого кода задаем цвет текста.
font-family: gabriola; — Этот код дает возможность задать стиль шрифта.

Спойлер для копирования кода
.content_item .field {
font-size: 24px;
color: #000000;
font-family: gabriola;
}

► 5

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

Есть несколько варианта. Можно сделать фон прозрачным, или оставить как есть и задать ей цвет.

Код дает возможность задать прозрачный фон, что-бы поле более менее соответствовал основному фону.

Спойлер для копирования кода
#breadcrumbs {
background: rgba(0, 0, 0, 0);
}

► 6

Данный код помогает задать цвет основным характеристикам персонажа, таким, как: игровое имя, статус, раса, народность и т. п.

.content_item .field .title_left, .content_item .field .title_top, .content_list .field .title_left, .content_list .field .title_top { — Название кода.
color: #000000; — С помощю этого кода можно задать цвет.

Спойлер для копирования кода
.content_item .field .title_left, .content_item .field .title_top, .content_list .field .title_left, .content_list .field .title_top {
color: #000000;
}

► 7

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

.title_top { — Название.
display: none !important; — Дает возможность скрыть текст.

Спойлер для копирования кода
.title_top {
display: none !important;
}

► 8

Код дающий возможность менять стиль рамки, которую видим на картине, выглядет таким образом.

nav { — Название.
background: rgba(192,192,192,0.9); — Дает возможность менять цвет и прозрачность поля.
border: 3px solid #000000; — Дает возможность задать размер и цвет рамки. К примеру: 2px, 3px, или 4px по желанию. Или цвет рамки.
box-shadow: 0 0 10px #b3b3b3; — Дает возможность менять тень рамки.
font-size: 20px; — Размер шрифта в поле.
font-family: gabriola; — Стиль текста в поле.

Цвет текста в поле задается следующим образом:

nav .menu > li > a { — Название.
color: #000000; — Цвет текста.

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

Спойлер для копирования кода
nav {
background: rgba(192,192,192,0.9);
border: 3px solid #000000;
box-shadow: 0 0 10px #b3b3b3;
font-size: 20px;
color: #000000;
font-family: gabriola;
}

nav .menu > li > a {
color: #000000;
}

► 9

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

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

Спойлер для копирования кода
#layout footer {
background: rgba(192,192,192,0.9);
border: 3px solid #000000;
box-shadow: 0 0 10px #b3b3b3;
font-size: 20px;
color: #000000;
font-family: gabriola;
}

#layout footer a {
color: #000000;
}

► 10

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

.spoiler > input + label, .spoiler > .spoiler_body { — Название кода.
background: rgba(0,0,0,0); — Цвет фона спойлера, которого можно менять соответственно по желанию.
border: 2px double #000000; — Размер и цвет рамки спойлера.
box-shadow: 0 0 10px #ffffff !important; — Тень рамки где можно менять цвет по желанию.

Спойлер для копирования кода
.spoiler > input + label, .spoiler > .spoiler_body {
background: rgba(0,0,0,0);
border: 2px double #000000;
box-shadow: 0 0 10px #ffffff !important;
}

► 11

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

Ролик будет расположен с левой стороны и зафиксирован на фоне таким образом, что его всегда будет видно и при желании легко можно будет включать, или выключать. С вас лишь требуется вставить видео с www.youtube.com в поле анкеты/топика. Лучше выбрать в анкете поле — Дополнительно, или в отчете свтавить в самом низу.

Или восползуйтесь путеводительем от игрока.

Пример

Особенно не буду обяснять как можно редактировать код потому, что его лучше не трогать. Поверьте, это самый оптимальный CSS для всех видов анкет/отчетов. От вас лишь требуется скопировать его.

Спойлер для копирования кода
.video_frame {
height: 48px;
width: 48px;
}
.video_wrap {
height: 48px;
width: 48px;
position: fixed;
background: black;
left: 16px;
top: 186px;
padding-bottom: 0%;
}
.video_wrap:hover {
box-shadow: 0 5px 0.5em -1px #b3b3b3;
}

► 12

Не часто встречаются анкеты/отчеты где можно увидеть удаленные комментарии. Они смотрятся не особо красиво. Данный код поможет скрыть лишь удаленные комментарии, точнее те белые пятна, что от них остались.

А так же, вы можете поменять цвет текста с помощю этого кода.

#comments_list .comment .content { — Название кода.
font-size: 20px; — Размер текста.
color: #ffffff; — Цвет текста.
text-shadow: 4px 4px 2px #000000; — Тень текста.

Спойлер для копирования кода
#comments_list .comment .deleted {
display: none !important;
}

#comments_list .comment .content {
font-size: 20px;
color: #ffffff;
text-shadow: 4px 4px 2px #000000;
}

► 13

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

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

#body aside { — Название кода.
background-color: rgba(192,192,192,0.9); — Задает цвет основному блоку над которым распологаются остольные блоки отдельно.
width: 975px !important; — Дает возможность растянуть поле так, что-бы оно соответствовало основному фону выше. Лучше взять оптимальный вариянт 975px.
border: 3px solid #000000; — Задает размер и цвет рамке.
color: #000000; — Цвет текста.
font-size: 20px; — Размер текста.
font-family: gabriola; — Стиль текста.

.widget_user_avatar .user_info { — Название кода который меняет поле, где расположен аватар.
background: rgba(0, 0, 0, 0); — Самый оптимальный вариянт задать прозрачный фон.

#body aside .menu, #body aside .menu li, #body section .menu, #body section .menu li { — Название кода который меняет фон поля.
background: rgba(0, 0, 0, 0); — В данном поле тожесамое. Лучше задать прозрачный фон.

aside .widget { — Название кода.
background: rgba(0, 0, 0, 0); — Не буду повторять, что лучше оставить прозрачный фон… или все таки повторила? :)

#body aside .menu li { — Лучше вам не знать сколько белых полей в этом меню и сколько из них нужно скрывать.
border-bottom: solid 1px rgba(0, 0, 0, 0); — Тут тожесамое. Да, прозрачный, как и все остольные.

#body aside .menu a, #body aside .menu span.item, #body section .menu a, #body section .menu span.item { — Название.
color: #000000; — Дает возможность менять цвет текста в полях.

Спойлер для копирования кода
#body aside {
background-color: rgba(192,192,192,0.9);
width: 975px !important;
border: 3px solid #000000;
color: #000000;
font-size: 20px;
font-family: gabriola;
}
.widget_user_avatar .user_info {
background: rgba(0, 0, 0, 0);
}
#body aside .menu, #body aside .menu li, #body section .menu, #body section .menu li {
background: rgba(0, 0, 0, 0);
}
aside .widget {
background: rgba(0, 0, 0, 0);
}
#body aside .menu li {
border-bottom: solid 1px rgba(0, 0, 0, 0);
}
#body aside .menu a, #body aside .menu span.item, #body section .menu a, #body section .menu span.item {
color: #000000;
}

► 14

В моих анкетах/отчетах некоторые из вас могли заметить как темнеют картинки, когда на них наводят курсор. Этот код в подарок тем, кому понравились такие картины.

Данный код не буду особенно разбирать по пунктам. Надеюсь, что вполне хватит и спойлер для копирования CSS. А особо заинтересованные могут сами «калечить» проценты :)

Спойлер для копирования кода
.content_item .ft_image img, .ft_html img {
-webkit-filter: contrast(110%);
filter: contrast(110%);
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
}
.content_item .ft_image img:hover, .ft_html img:hover {
-webkit-filter: contrast(130%);
filter: contrast(130%);
}

Полезности:

123

На этом пожалуй все. Если вспомню еще полезные CSS, непременно разберу в путеводителе. Спасибо за внимание и уделенное время. С любовью, Ирина ;)