Custom CSS: Темизация Ultimatum

Список классов различных элементов оформления в базовом режиме Ultimatum.

Персонаж

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

.charsheet .fullname - полное имя персонажа;
.charsheet .mainimage - основной портрет персонажа;
.charsheet .left span.label - все метки для коротких полей в левом контейнере ("Игровой мир", "Статус, "Пол" и т.п.)
.charsheet .left span.value - все значения для коротких полей в левом контейнере ("жив", "Вечная Песня", "мужской" и т.п.)
.charsheet .left h3.label - все метки для полей со списками в левом контейнере ("Рассказы", "Сюжеты", "Гильдии", "Отыгрыши")
.charsheet .right h3.label - все метки для полей с текстом в правом контейнере ("Внешний вид", "Характер", "Способности" и т.п.)

.charsheet .servers - игровой мир
.charsheet .ingamename - игровое имя
.charsheet .lifestatus - статус
.charsheet .activity - активность
.charsheet .race - раса
.charsheet .people - народность
.charsheet .sex - пол
.charsheet .age - возраст
.charsheet .ingameclass - класс
.charsheet .spec - специализация
.charsheet .job - род занятий
.charsheet .married - семейное положение/отношения
.charsheet .partner - партнёр
.charsheet .alignment - мировоззрение
.charsheet .faith - верования
.charsheet .languages - языки
.charsheet .quents - рассказы/квента
.charsheet .plots - сюжеты
.charsheet .guilds - гильдии
.charsheet .logs - отыгрыши
.charsheet .facts - дополнительные факты

.charsheet .look - внешний вид
.charsheet .temper - характер
.charsheet .abilities - способности
.charsheet .skills - навыки и профессии
.charsheet .inventory - инвентарь
.charsheet .family - родственники
.charsheet .pets - питомцы
.charsheet .faith_other - пояснения к верованиям
.charsheet .languages_other - пояснения к языкам
.charsheet .chronology - хронология
.charsheet .factions - фракции
.charsheet .world_places - места пребывания
.charsheet .names - прозвища, звания и титулы
.charsheet .relations - отношения к фракциям и расам
.charsheet .other_info - дополнительно
.charsheet .other_images - дополнительные изображения

Гильдия

.guildsheet - основной класс листа гильдии, контейнер с его содержимым;
.guildsheet .left - контейнер содержимого левой части листа гильдии, где располагаются название, эмблема, все поля с коротким значением и связи с другими разделами сайта;
.guildsheet .right - контейнер содержимого правой части листа гильдии, где располагаются поля с длинным текстом.

.guildsheet h1.title - название гильдии
.guildsheet .mainimage - эмблема гильдии
.guildsheet .left span.label - все метки для коротких полей в левом контейнере ("Игровой мир", "Статус", "Лидер" и т.п.)
.guildsheet .left span.value - все значения для коротких полей в левом контейнере ("Вечная Песня", "активна" и т.п.)
.guildsheet .left h3.label - все метки для полей со списками в левом контейнере ("Участники", "Сюжеты", "Отыгрыши")
.guildsheet .right h3.label - все метки для полей с текстом в правом контейнере ("Униформа", "Условия вступления" и т.п.)

.guildsheet .ingamename - игровое название
.guildsheet .servers - игровой мир
.guildsheet .guild_status - статус
.guildsheet .guild_join - набор участников
.guildsheet .alignment - мировоззрение
.guildsheet .guild_master - лидер
.guildsheet .guild_site - сайт
.guildsheet .players - состав
.guildsheet .plots - сюжеты
.guildsheet .logs - отыгрыши

.guildsheet .guild_info - описание гильдии
.guildsheet .guild_terms - условия вступления
.guildsheet .guild_ranks - звания и привилегии
.guildsheet .guild_rules - требования
.guildsheet .guild_form - униформа
.guildsheet .factions - фракции
.guildsheet .world_places - места пребывания
.guildsheet .relations - отношения
.guildsheet .achievement - достижения
.guildsheet .other_info - дополнительная информация

Сюжет

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

.plotsheet h1.title - название сюжета
.plotsheet .mainimage - изображение сюжета
.plotsheet .left span.label - все метки для коротких полей в левом контейнере ("Игровой мир", "Дата отыгрыша" и т.п.)
.plotsheet .left span.value - все значения для коротких полей в левом контейнере ("Вечная Песня", "март 2014 года" и т.п.)

.plotsheet .servers - игровой мир
.plotsheet .plot_date - дата
.plotsheet .plot_status - статус
.plotsheet .place - локация
.plotsheet .players - участники

.plotsheet .plot_description - описание
.plotsheet .going_on - ход сюжета
.plotsheet .plot_logs - отыгрыши
.plotsheet .plot_logs .log-row - контейнеры отдельных логов в списке
.plotsheet .plot_logs .log-chars- участники отдельных логов в списке
.plotsheet .plot_logs .log-title - заголовки отдельных логов в списке
.plotsheet .plot_logs .log-date - даты отдельных логов в списке
.plotsheet .other_info - дополнительная информация

Примеры стилей
.charsheet {
border:3px solid #0090A3;
}
Изменение ширины и цвета рамки у всего листа
.charsheet h1.fullname {
color:#0090A3;
}
Изменение цвета полного имени персонажа на #0090A3
.charsheet h1.fullname {
font-size:30px;
line-height:30px;
}
Изменение размера и межстрочного интервала шрифта в полном имени персонажа
.charsheet .left span.label,
.charsheet .left h3.label {
color:#0090A3;
}
Изменение цвета на #0090A3 всех меток полей в левой части
.charsheet .right h3.label {
color:#0090A3;
font-size:18px;
}
Изменение цвета на #0090A3 и размера шрифта всех меток полей в правой части
.charsheet .look h3.label {
color:#0090A3;
}
Изменение цвета метки на #0090A3 у поля "Внешний вид"
.charsheet .right {
font-size:12px;
line-height:15px;
}
Изменение размера шрифта и межстрочного интервала у всех полей в правой части
.charsheet .mainimage img {
width:290px;
border:5px solid #0090A3;
}
Добавление рамки цвета #0090A3 к портрету персонажа
.charsheet .left {
background-color:#0090A3;
}
Добавление фона цвета #0090A3 к левой части
.charsheet .left .value a,
.charsheet .left ul a,
.charsheet .left .quents a {
color:#0090A3;
border-bottom:1px solid #0090A3;
}
Изменение цвета шрифта и подчеркивания на #0090A3 у всех ссылок в левой части
.charsheet .left {
background-image:url("http://savepic.su/3011263.jpg");
background-position:top center;
background-width:100%;
}
Добавление повторяющейся текстуры в качестве фона левой части
Результат
.charsheet .right {
background-image:url("http://savepic.su/3011263.jpg");
background-position:top center;
background-repeat:no-repeat;
background-size:100%;
padding-top: 400px;
}
Добавление изображения сверху правой части, а также отступа, равного высоте изображения (необходимо изменять 400px до совпадения с нужной высотой), к её содержимому
Результат
Получение кода необходимого цвета

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

ID: 14004 | admin
Изменено: 9 мая 2014 — 17:43

Комментарии

Воздержитесь от публикации бессмысленных комментариев и ведения разговоров не по теме. Не забывайте, что вы находитесь на ролевом проекте, где больше всего ценятся литературность и грамотность.
14 декабря 2013 — 14:46 Созерцатель огня Воробей

Как поменять цвет шрифта текстов в правой части?

14 декабря 2013 — 15:04 Экзарх Фиасаар

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

14 декабря 2013 — 15:15 Созерцатель огня Воробей

Нет, не нашел, но уже подсказали. Спасибо и за ваш дельный совет._.

14 декабря 2013 — 15:14 admin
.charsheet .right { color:; }
.plotsheet .right { color:; }

По примерам это очевидно.

14 марта 2014 — 8:59 admin

В гайд добавлены списки элементов для гильдий и сюжетов.

30 марта 2014 — 15:51 Elmer

Никак не могу сменить стиль шрифта в полном имени персонажа. Не поможете?)

30 марта 2014 — 16:46 admin

Для шрифтов есть отдельный гайд.

10 мая 2014 — 19:25 WooD

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

11 мая 2014 — 2:47 admin

Можно. Установите фоном для левой части нужное изображение и изменяйте параметр позиционирования по вертикали.

.charsheet .left {
background-image:url("http://savepic.su/3011263.jpg") no-repeat;
background-position:300px center;
background-width:100%;
}

22 июля 2014 — 18:38 Кот Энэрилан

Можно ли переместить какое-либо поле (например, .other_info) в левую часть листа?

22 июля 2014 — 18:45 admin

Поиграться с position:absolute. Размеры придётся подогнать отдельно.

.charsheet {
position:relative;
}
.charsheet .other_info {
width:320px;
position:absolute;
left:10px;
bottom:20px;
}

Вот как выглядит.

1 августа 2014 — 13:18 Бледнолицый Фелиций

Можно ли убрать портрет и оставить только картинку на фоне?

1 августа 2014 — 13:19 admin

Можно, убирайте.

1 августа 2014 — 13:20 Бледнолицый Фелиций

А как это сделать не подскажите?)

1 августа 2014 — 13:55 admin
.charsheet .mainimage { visibility:hidden; }

Также это одна из запланированных опций в конструкторе.

21 ноября 2014 — 0:51 Explosions of life! BabzaBloom

А блоки тут есть? На которых текст, типа чтоб он не был сразу на цветастом фоне

21 ноября 2014 — 7:12 admin

Все классы в правой части принадлежат блочным элементам.

21 ноября 2014 — 13:20 Explosions of life! BabzaBloom

окей, а как их сделать непрозрачными?

21 ноября 2014 — 16:42 admin
.charsheet .right div {
background:#fff;
}

7 декабря 2014 — 14:11 Explosions of life! BabzaBloom


(

7 декабря 2014 — 17:01 admin
7 декабря 2014 — 17:11 Explosions of life! BabzaBloom

Ууу, круто, мерси

6 мая 2015 — 15:43 Ностальгирующий критик iz13bukv

.charsheet .right {
background-image:url("http://savepic.su/3011263.jpg");
background-position:top center;
background-repeat:no-repeat;
background-size:100%;
padding-top: 400px;
}

А если мне надо подвинуть что-то не вниз, а вверх?

6 мая 2015 — 15:51 Merciless rozalba

padding-top: -400px;

6 мая 2015 — 17:46 Ностальгирующий критик iz13bukv

/спс

8 августа 2016 — 13:39 Pentala

А сколько в рассказе максимум ширина картинки?

8 августа 2016 — 16:28 admin

970 пикселей.

1 сентября 2016 — 21:09 CSS-сенсей Zildjinn

А можно ли менять фон для .charsheet? А то что-то как ни стараюсь, не меняется, даже через !important, словно где-то во внешнем css-файле через идентификатор указано, чтобы #node.charsheet был с пустым белым фоном. Причем даже через консоль не меняется.
Подумал, что еду крышей. Проверил - поставил другую тему оформления, через консоль поменял фон - фон поменялся.

Короче, фон для .charsheet в стандартной Ultimate менять, видимо, нельзя?

2 сентября 2016 — 8:04 admin

Можно, если добавить в стили следующее:

.charsheet .left, .charsheet .right { background:transparent !important; }

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

19 января 2017 — 11:35 panoramiz

Какой размер должен быть у картинки?
.charsheet .right {
background-image:url("ТУТ ПИКЧА");
background-position:top center;
background-width:100%;
} Короч как на правую сторону джипег всунуть?