Admin

Charscrolls Гайд по темизации

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

Все актуальные свойства CSS можно посмотреть и изучить на сайте Htmlbook. В этом гайде свойства будут рассмотрены только в качестве примеров. Базовый синтаксис CSS – элемент { свойство: значение; }. При нарушении синтаксиса темизация может не сработать, поэтому не забывайте лишний раз проверить его.

1. Элементы страницы персонажа
2. Элементы страницы сюжета
3. Элементы страницы рассказа
4. Примеры
5. Изменение шрифтов
6. Цвет

Элементы страницы персонажа

#char – основной контейнер
#char .info – контейнер информации об авторе и дате
#char .info .author – имя автора и ссылка на профиль
#char .info .date – дата публикации материала
#char .char-image – контейнер для изображения
#char .char-sett – контейнер для названия сеттинга и ссылки на него
#char .char-sett .char-project – название проекта и ссылка на него
#char h1.char-name – имя персонажа
#char .char-nation – народность

#char .char-table – контейнер верхней таблицы
#char .char-table .line – все строки таблицы
#char .char-table .line-title – название поля, левая часть таблицы
#char .char-table .line-value – значение поля, правая часть таблицы
#char .char-table .char-age – возраст в таблице
#char .char-table .char-age .line-title – название поля для возраста
#char .char-table .char-age .line-value – значение поля для возраста
#char .char-table .char-sex – пол в таблице
#char .char-table .char-status – статус в таблице
#char .char-table .line1 – первое дополнительное поле в таблице
#char .char-table .line2 – первое дополнительное поле в таблице
#char .char-table .line% – дополнительное поле под номером % в таблице

#char .longtext – все многострочные поля
#char .longtext h3.label – все заголовки многострочных полей
#char .char-look – внешний вид
#char .char-behavior – характер
#char .char-skills – способности
#char .char-world – место в мире
#char .char-family – семья и друзья
#char .char-other – дополнительно

#char .char-events – контейнер хронологии
#char .char-events .line – все строки хронологии
#char .char-events .line-text – все строки с текстом в хронологии
#char .char-events .line-date – все строки с датой в хронологии
#char .char-events .line1 – первая строка в хронологии
#char .char-events .line2 – вторая строка в хронологии
#char .char-events .line% – строка под номером % в хронологии

#char .char-roleplay – контейнер для информации о ролевой игре
#char .char-roleplay .label – метки полей внутри контейнера
#char .char-roleplay .value – значения полей внутри контейнера
#char .char-area – место отыгрыша
#char .char-url – название места отыгрыша и ссылка
#char .char-type – тип отыгрыша
#char .char-activity – активность
#char .char-search – поиск сюжетов

#char .char-roleplay h4.label – заголовки для полей со ссылками на другие материалы
#char ul.char-plot – список сюжетов
#char ul.char-plot li.plot1 – первый сюжет в списке
#char ul.char-plot li.plot% – сюжет номер % в списке
#char ul.char-story – список материалов из раздела творчества


Элементы страницы сюжета

#plot – основной контейнер
#plot .nright – сопроводительная информация, которая показывается справа
#plot .info – контейнер информации об авторе и дате
#plot .info .author – имя автора и ссылка на профиль
#plot .info .date – дата публикации материала
#plot .nright h4.label – заголовки полей сопроводительной информации
#plot .nright .value – значения полей сопроводительной информации
#plot .plot-status – статус сюжета
#plot .recruiting – набор участников
#plot ul.characters – список участников
#plot ul.characters li.char1 – первый участник
#plot ul.characters li.char% – участник номер %

#plot h1.title – общий заголовок сюжета
#plot h1.title .setting-link – название сеттинга и ссылка на него
#plot h1.title .setting-link .project-link – название проекта и ссылка на него
#plot h1.title .arrow – "стрелки" (→), используемые для оформления
#plot h1.title .post-title – название сюжета
#plot .full-text – описание сюжета
#plot ul.logs – список страниц, прикреплённых к сюжету
#plot ul.logs li.item1 – первая страница
#plot ul.logs li.item% – страница номер %


Элементы страницы рассказа

#story – основной контейнер
#story .info – контейнер информации об авторе и дате
#story .info .author – имя автора и ссылка на профиль
#story .info .date – дата публикации материала
#story .nright h4.label – заголовки полей сопроводительной информации
#story ul.plots – список сюжетов
#story ul.plots li.plot1 – первый сюжет в списке
#story ul.plots li.plot% – сюжет номер % в списке
#story ul.characters – список участников
#story ul.characters li.char1 – первый участник
#story ul.characters li.char% – участник номер %

#story h1.title – общий заголовок сюжета
#story h1.title .setting-link – название сеттинга и ссылка на него
#story h1.title .setting-link .project-link – название проекта и ссылка на него
#story h1.title .arrow – "стрелки" (→), используемые для оформления
#story h1.title .post-title – название сюжета
#story .full-text – описание сюжета


Примеры

#char h1.char-name {
font-size:24px;
color:#aa00ff;
}
изменяем размер и цвет шрифта для заголовка (имени) персонажа
#char .char-sett a {
color:#ffaa00;
}
изменяем цвет ссылки на сеттинг в листе персонажа
#char {
border:2px solid #ff5577;
border-radius:5px;
}
добавляем к листу персонажа цветную границу и закругляем её углы
#char .char-table .line-title {
font-weight:normal;
color:#ff8844;
}
изменяем цвет и толщину шрифта для всех названий полей таблицы в листе персонажа
#char .longtext h3.label {
margin-bottom:15px;
}
добавляем ко всем заголовкам многострочных полей нижний отступ размером в 15 пикселей
#char .longtext .img {
border:2px solid #8844aa;
box-shadow:2px 2px 2px #aaa;
}
добавляем рамку и тень ко всем изображениям в многострочных полях
#char .char-events .line-date {
font-weight:normal;
color:#000;
}
изменяем цвет и толщину шрифта для всех дат в хронологии
#char {
background:url("http://i.imgur.com/jjrvWJB.png");
}
устанавливаем загруженную нами текстуру в качестве повторяющегося фона листа персонажа


Изменение шрифтов

Расположенный на Mychar гайд по шрифтам актуален и здесь. Просто указывайте правильные названия элементов при использовании кода из гайда.


Получение кода необходимого цвета

Используйте, например, Html Color Codes, поисковый виджет Яндекса или аналогичные сервисы. Значение из шести символов с # - то, что вам нужно.