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

Для листов персонажей вновь доступен тот функционал темизации, который использовался при открытии сайта - применение технологии каскадных таблиц стилей (CSS). При редактировании страницы вы увидите все доступные для этого опции. Стили позволяют изменить внешний вид листа персонажа по вашему желанию. Однако, попытки повлиять на интерфейс или любой функционал сайта без доступа к этому приведут к потере страницы и последующей блокировке аккаунта.

Примеры

.field-field-character, .field-field-look .field-label { display:none; }

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

Убираем рамку портрета при использовании стандартной темы оформления

.field-field-ch1 img { border:none !important;padding:0 !important;background:transparent !important; }

.field-field-ch1 { float:left !important; }

Выравнивает изображение влево (или вправо с заменой на right) от имени персонажа в верхней части листа.

.field-field-ch2 { margin-top:30px !important;font-size:3em !important;font-weight:normal !important;color:#000 !important; }

Темизация надписи с полным именем персонажа. Стили отвечают по порядку за: добавление отступа сверху, увеличение размера шрифта, запрет на на полужирность шрифта, черный цвет шрифта.

Вставляем любое изображение в качестве фона

.charlist { background:url('http://savepic.org/1000658.jpg') no-repeat; }

Не используйте для хранения сервис Radikal, поскольку их сервера не реагируют достаточно быстро. Рекомендуются хостинги savepic.ru или tinyimg.com. Нет смысла делать ширину изображения больше 1000 пикселей, посколько это максимально возможная ширина чарлиста. Не прикрепляйте изображения размером несколько мегабайт - немногим захочется ждать долгой загрузки фоновой картинки.

.charlist { background:url('http://savepic.org/1000658.jpg'); }

Без ключа no-repeat этот стиль "замостит" лист персонажа выбранным изображением. Используйте его для прикрепления собственных повторяющихся текстур.

Убираем портрет, имена, сервер и прочее

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

.charlist .field-field-ch1,
.charlist .field-field-ch2,
.charlist .field-field-ch3,
.charlist .field-field-off,
.charlist .field-field-ch5,
.charlist .field-field-ch6 {
display:none;
}

Добавляем и убавляем отступ от верхнего края до раздела "Внешний вид и характер"

Изменяйте размер отступа (200px в примере) до достижения необходимого результата.

.charlist .group-ch1 {
margin-top:200px;
}

Убираем линию границы вокруг листа персонажа

.charlist {
border:none !important;
}

Собираем лист персонажа самостоятельно с помощью HTML/CSS

Пример собранного с нуля чарлиста находится здесь.

Сам рецепт состоит в том, чтобы скрыть полностью весь лист через CSS, а затем собрать необходимое через html в поле "Шапка". Разумеется, собранный html вы можете также темизировать через CSS в соответствующем поле. Обратите внимание, что не все html-коды могут быть пропущены фильтром сайта.

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

Собранная самостоятельно страница должна содержать всю информацию из обязательных полей при заполнении.
ID: 3005 | admin
Изменено: 7 ноября 2014 — 21:43

Комментарии

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

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

12 апреля 2011 — 1:58 admin
.field-field-ch1 { display:none !important; }

12 апреля 2011 — 16:54 Сагамарт

Ещё маленький вопрос, как увеличить расстояние от верхнего поля чарлиста до самого описания?
Я про вот это расстояние (нужно полностью отобразить арт поставленный в качестве background'а)
http://img23.imageshack.us/img23/6081/73313473.png
P.S. Можно ли задать расположение таблички с именем, игровым миром справа, к примеру?

12 апреля 2011 — 16:56 admin

Изменить нижний отступ к поля с типом сервера

.field-field-ch4 { margin-bottom:100px !important; }

или верхний доступ у полного имени

.field-field-ch2 { margin-top:100px !important; }

100px менять по вкусу до достижения необходимого результата.

Насчет посткриптума - выравнивание направо или смещение блока в правую часть с сохранением выравнивания по центру?

Первое:

.field-field-ch2, .field-field-ch3, .field-field-ch4, .field-field-off { text-align:right !important }

Второе:

.field-field-ch2, .field-field-ch3, .field-field-ch4, .field-field-off { padding-left:50% !important }

Проценты у второго менять по вкусу.

13 декабря 2012 — 16:56 Безумная кошатница Анфи

Возник вопрос, вместе с отступами движется и блок с именем/сервером, можно как-нибудь поднять вверх этот блок, не трогая поля?
Я использовала

.field-field-ch2 { margin-top:400px !important; }

В итоге изображение становится на место, а имя портит всю картинку :(

17 апреля 2011 — 19:52 Рэнд

Возможно ли сделать "подразделы" не белыми а прозрачными. И как менять цвет шрифта?

17 апреля 2011 — 20:13 Ferrian

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

17 апреля 2011 — 20:42 Рэнд

Спасибо. Что-то я ступил вовсе. А как же Внешний вид и хар-ер? Ибо у меня фон темноватый, а хотелось бы прозрачные сделать эти "подразделы".

10 января 2012 — 2:15 ЛиинКайен

Возможно ли сменить цвет ссылки на логи, гильдии и прочие ссылки из этого блока? Цвет изначальный, а не тот, что при наведении.

10 января 2012 — 3:45 Ferrian
.charlist a:link {color: black} /* цвет обычных ссылок */
.charlist a:hover {color: #BBB} /* цвет подсвеченных курсором ссылок */
.charlist a:hover {color: grey} /* цвет ранее использовавшихся ссылок */

Как-то так. В зависимости от типа страницы ".charlist" меняется на ".guild" или ".plot".

10 января 2012 — 4:00 admin
.charlist .group-ch5 a {
color:;
}

14 февраля 2012 — 22:10 Morana

А в листах сюжетов темизация работает? А то что-то никак не получается. Заранее спасибо.

15 февраля 2012 — 4:35 Ferrian

Достаточно заменить приписки ".charlist" на ".plot".

16 июля 2012 — 9:03 Ирисэ

Дня доброго.
При сокрытии имени, сервера и портрета, ссылка на квенту подскакивает "под потолок". Отступ до описания есть, но на эту ссылку он что-то не действует.
Что же делать?

16 июля 2012 — 12:46 Сагамарт

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

16 июля 2012 — 17:14 Ирисэ

Да, для описания.
А как добавить отступ до ссылки на квенту? Я совсем запуталась в этом "темном лесу".

16 июля 2012 — 17:19 admin
.charlist .field-field-myquent {
margin-top:200px;
}

28 июля 2012 — 22:03 Волчи

А можно сделать так, чтобы картинка персонажа на странице была такого размера, как мне хочется?

28 июля 2012 — 22:16 admin

Только полной пересборкой листа.
Во всех темах портрет персонажа выводится с физической шириной в 300 пикселей, попытки увеличивать её через CSS приведут к размытости изображения.

30 июля 2012 — 20:58 WerewolfCarrie

А вот возник вопрос, почему нельзя темизировать лист сюжета, например? вставить фон, картинки, и так далее...

30 июля 2012 — 21:07 admin

Потому что можно. Корневой класс .plot вместо .charlist.

30 июля 2012 — 21:35 WerewolfCarrie

А как убрать отображение аватарки в листе сюжета?

30 июля 2012 — 22:25 admin

field-field-plotimage
field-field-plottitle
field-field-plotdate

12 августа 2012 — 21:46 Explosions of life! BabzaBloom

Интересует код, чтобы снизить положение серверов. Грубо говоря, чтобы нижний был на уровне квенты. Есть такой?

12 августа 2012 — 22:29 admin

Отрицательный margin.

31 августа 2012 — 1:38 Bickford

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

11 сентября 2012 — 17:14 Ferrian
цвет всего шрифта

.charlist, .field-field-ch5, .field-field-myquent, .charlist a {color: white !important}

"ch5" и "myquent" - "Статус" и "Квента", а продублированный "charlist a" - ссылки в чарлисте.

8 сентября 2012 — 18:57 Ракогорец Gevingrad

Как сделать поля с текстом непрозрачными? http://savepic.net/3398577.jpg А то фон хороший, но нечитабельно :( И как сделать расстояние между статусом и самой верхней точкой листа больше? Чтобы как с аватаркой, только без неё?

9 сентября 2012 — 10:13 Moppuc
Как сделать поля с текстом непрозрачными?

.charlist fieldset {background-color:#******;} или .charlist fieldset {background-color:rgba(***,***,***,*.*)}

И как сделать расстояние между статусом и самой верхней точкой листа больше?

.field-field-ch5 { margin-top: *px }

Вместо звездочек ставим нужный цвет или количество пикселей.

11 сентября 2012 — 15:53 Ракогорец Gevingrad

Спасибо огромное. Черт, ни один цвет не подходит, свой можно как нибудь добавить?

11 сентября 2012 — 16:48 Тот самый Nodos
14 сентября 2012 — 6:49 Ракогорец Gevingrad

Ого, спасибо. Я думал, что можно только цвета с Мучара :)

9 октября 2012 — 21:34 Explosions of life! BabzaBloom

Можно как-нибудь растянуть поля с текстом до самой рамки чарника?

9 октября 2012 — 22:17 admin

Вы имеете в виду этот отступ?

Отступ создается свойством padding, которое применено к charlist и fieldset. Избавиться от него можно обнулением padding вообще или только горизонтального.

Пример обнуления:

.charlist, .charlist fieldset { padding:0 !important; )

Пример обнуления по горизонтали:

.charlist, .charlist fieldset { padding:10px 0 !important; }

10 октября 2012 — 7:43 Explosions of life! BabzaBloom

Угу, спасибо. Хотя до рамок все равно не дотягивает.

24 октября 2012 — 23:41 Stoum

В каких пределах можно работать с font-family? *crab*

25 октября 2012 — 7:04 esmene

Это целиком и полностью зависит от того, кто и где будет читать листы ваших персонажей/гильдий/сюжетов.
То есть, во избежание казусов, либо не стоит выходить за пределы некоего «стандартного» набора шрифтов, по умолчанию установленных у читателей, либо прибегать к техникам вроде @font-face.

25 октября 2012 — 7:21 Stoum

Просто у меня не получается даже что-то стандартное сделать, то что 100% есть на машине.
.field-field-ch2{
color:#000 !important;
font-family:'Times New Roman' !important;
}
Красит полное имя чара в черный, но шрифт не применяет. При этом работают семейства шрифтов (serif, cursive...).

25 октября 2012 — 11:19 Ferrian

Проверяю даже на этой странице, применительно к селектору "p" - полностью рабочий код. Проблема вряд ли в нём.

25 октября 2012 — 11:31 admin

Я вчера заметил, что у меня тоже не работает, так что не заморачивайтесь.
Пока не понятно, почему.

11 ноября 2012 — 13:46 Дригер

А как убрать эмблему гильдии из гилдлиста?
И игровое название?

11 ноября 2012 — 15:24 admin
.guild .field-field-guildworldname,
.guild .field-field-guildemblem {
display:none;
}

Но эмблема и игровое имя все равно должны быть указаны.

3 декабря 2012 — 0:24 Дригер

А какое имя у строки с "Игровым миром" ?
.guild .field-field-???
Хочу просто это строчку подвинуть, а названия не знаю.

3 декабря 2012 — 0:44 admin

.guild .field-field-off, как в чарлистах.

3 января 2013 — 3:11 Дригер

Последний (я надеюсь) вопрос.

У строки с "Статусом" какое имя?
Я уже всё перепробовал...
Как в чарлисте:
.charlist .field-field-ch5, не выходит.
По логике:
.guild .field-field-status или .guild .field-field-guildstatus
Тоже не выходит.
Откройте тайну данной строки пожалуйста. =)

P.S.: Было бы хорошо, вообще где-нибудь составить список названий всех строк, для удобства и отсутствия подобных вопросов.

3 января 2013 — 3:14 Экзарх Фиасаар

Правый щелчок мыши по странице -> исходный код. По контексту найдешь, что и как называется. )

3 января 2013 — 5:53 Сагамарт

field-field-ch1 - содержит аватарку персонажа.
field-field-ch2 - полное имя персонажа.
field-field-ch3 - ник.
field-field-ch4 - эмблема ролевого сервера.
field-field-ch5 - статус (жив/мёртв etc).
field-field-race - раса.
field-field-sex - пол.
field-field-age - возраст.
field-field-look - особенности внешности (отключать не рекомендуется).
field-field-character - описание характера (аналогично).
field-field-align - мировоззрение.
field-field-gameclass - механический класс.
field-field-charspec - специализация.
field-field-ability - способности.
field-field-skill - навыки и профессии.
field-field-faith - верования.
field-field-faithtext - пояснения к ним.
field-field-language - языки.
field-field-languagtext - пояснения к ним.
field-field-job - род занятий.
field-field-faction - принадлежность.
field-field-names - титулы и прозвища.
field-field-world - места пребывания.
field-field-relation - отношение к фракциям.
field-field-marry - семейное положение.
field-field-friends - знакомые персонажи.
field-field-pet - питомцы.
field-field-charactive - активность персонажа.
field-field-charfact - тут отображается результат выбора всяких галочек, типа "персонаж отыгрывается в закрытом кругу".

16 мая 2013 — 12:28 Explosions of life! BabzaBloom

А как называются поля инвентаря и семьи с друзьями?
Через просмотр кода страницы я нашел группы, но использование их в цсс дефейс не запилит?

16 мая 2013 — 13:29 admin

Используй их как дочерний класс. То есть .charlist .field-field-inv (не помню точно).

16 мая 2013 — 13:40 Explosions of life! BabzaBloom

.charlist .field-field-invent - инвентарь таков.
.charlist .field-field-famity - семья и друзья.
Вот.

2 июня 2013 — 21:40 Чудесная Риканда

Пожалуйста, подскажите код для поля "хронология".

3 июня 2013 — 10:05 Ferrian

.group-ch3

У Вас, к слову, какой браузер?

3 июня 2013 — 10:19 Чудесная Риканда

О, благодарю!

У Вас, к слову, какой браузер?

Мозилла.

3 июня 2013 — 14:44 Ferrian

В таком случае у Вас при правом клике по элементу должна последней в списке присутствовать опция "Исследовать элемент", открывающая консоль веб-разработчика и показывающая класс элемента. Например, здесь видно, что область "Логи" имеет классы "field", "field-type-nodereferer" и "field-field-charlistlogs". Последний, очевидно, и нужен.

3 июня 2013 — 14:48 Чудесная Риканда

Спасибо, разобралась :)

3 июня 2013 — 10:55 Чудесная Риканда

У меня еще аналогичный вопрос насчет поля "логи"... Какой у него код? )

12 ноября 2012 — 4:35 admin

Если вам необходимо как-то выделить рукописный текст в своём творчестве, теперь вы можете использовать открытый шрифт Neucha, поддерживаемый сайтом в качестве web fonts. Но, пожалуйста, без излишеств - не нужно поступать с ним, как с курсивом, и пытаться вешать на всю свою квенту или лист персонажа. Шрифт неплохо подойдет для заголовков и для имитации читабельного рукописного текста.

Шрифт можно применить через id="hand" в HTML и через font-family:Neucha, cursive; в CSS.
Примеры:

<p class="hand">В Элвиннском лесу был вечер, тот самый редкий вечер, когда на Рудниках Чистой Воды у заключенных было время отдохнуть и пообщаться между собой в ''загоне''. Хоть у преступников не были связаны ни руки, ни ноги, стычки и схватки были редки, всё заканчивалось в основном словестными перепалками.</p>
.charlist .field-field-ch2 {
font-family:Neucha, cursive;
}

13 ноября 2012 — 14:08 Lion

А есть возможность изменять цвет шрифта в заглавиях разделов?

13 ноября 2012 — 17:25 Капитан Гномереган Лурий

Какие именно разделы интересуют? Анкеты?

13 ноября 2012 — 18:46 admin
.charlist fieldset legend {
color:;
}

14 ноября 2012 — 14:09 Lion

Благодарю.

22 ноября 2012 — 19:40 Обыкновенный Кекс

Подскажите пожалуйста, какой командой можно изменить цвет фона? Я так и не понял...

22 ноября 2012 — 19:46 Капитан Гномереган Лурий

.charlist {background-color:#номер-цвета-в-16-ичной системе !important;}
Вот вам картинки:

22 ноября 2012 — 19:49 Обыкновенный Кекс

Спасибо, амиго. Вы спасли мне жизнь.

22 ноября 2012 — 19:54 Капитан Гномереган Лурий

Complace

24 ноября 2012 — 17:16 admin

Если вы все-таки верстаете что-то самостоятельно и активно используется классы с простыми названиями, обязательно начинайте писать стили с класса .charlist, .guild, .plot. В коде не нужно оставлять .txt, .a и тому подобное, пишите .charlist .txt, .charlist .a.

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

5 декабря 2012 — 18:43 Ракогорец Gevingrad

Возможно ли изменить шрифт названия подразделов? И как возможно вписать русскую версию шрифта Old English Text MT в код CSS?

5 декабря 2012 — 18:45 admin
И как возможно вписать русскую версию шрифта Old English Text MT в код CSS?

Нигде.
Этот шрифт не будет отображаться у большинства пользователей, он установлен только на вашем компьютере.
Мучар поддерживает только шрифт Neucha в качестве внешнего и стандартные Arial, Verdana, Times New Roman, Segoe.

5 декабря 2012 — 20:24 Ракогорец Gevingrad

Ясно, спасибо.

Возможно ли изменить шрифт названия подразделов?

Как я понял, тоже нельзя?

5 декабря 2012 — 20:28 admin
16 марта 2013 — 14:46 sileniya

Вообще вполне реально, главное загрузить файл шрифта на какой нибудь хостинг и вставить в CSS с помощью такой вот вещи:

@font-face {
font-family:"название шрифта для использования в дальнейшем в CSS";
src:url(ссылка на файл со шрифтом);
}

не плохо работает :)

16 марта 2013 — 18:43 Ракогорец Gevingrad

Спасибо за ответ :)

главное загрузить файл шрифта на какой нибудь хостинг

А можно ссылку на подобный хостинг?

5 декабря 2012 — 22:01 Pentala

Поле "Отыгрыш" можно скрывать?
Можно ли туда вставить свой текст?

5 декабря 2012 — 22:08 admin

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

5 декабря 2012 — 22:11 Pentala

Я хотела "человеку номер два" старый вариант эмулировать, где можно было "автор допускает" и "автор не приемлит" одновременно выбрать)

5 декабря 2012 — 22:16 admin

В "Дополнительно" напиши.

5 декабря 2012 — 22:28 Stoum

Кстати по сабжу, можно ли в "Дополнительно" сверстать еще один блок со стандартным наполнением? Какой ему класс/айди для этого нужно указать?

19 декабря 2012 — 15:17 jiyu-chan (не проверено)

Подскажите пожалуйста, как сместить в сторону полное имя персонажа.

23 декабря 2012 — 20:59 Колдун Павший лорд

Подскажите пожалуйста, как делать обе способности на одной строке?

23 декабря 2012 — 21:07 Morion

http://mychar.ru/discuss/817
Здесь написано.

23 декабря 2012 — 22:27 Колдун Павший лорд

Большое спасибо. А можете подсказать код, как делать изоброжение одним фоном? Просто у меня картинка повторяется. Делал всё по инструкции.

23 декабря 2012 — 22:34 Юная авторесса Бриана

background: url(адрес изображения) no-repeat;

23 декабря 2012 — 23:46 Колдун Павший лорд

Не могли бы подсказать, как сделать, чтобы изображение было на весь лист персонажа?

23 декабря 2012 — 23:47 Колдун Павший лорд

Хм.

24 декабря 2012 — 0:51 Too-ticky

Кнопка "ответить" находится в правом нижнем углу каждого сообщения.

4 января 2013 — 10:59 Колдун Павший лорд

Всё-таки не разобался, как сделать, чтобы картинка шла всем фоном?

4 января 2013 — 12:32 Сагамарт

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

6 февраля 2013 — 19:47 BridgeTroll

Как сменить цвет этих мини табличек "Внешний вид и характер", "Мастерство и знания" и прочее?

6 февраля 2013 — 21:51 Тот самый Nodos
.charlist legend

10 февраля 2013 — 8:09 BridgeTroll

Это только шрифт. А самих табличек цвет как сменить?

10 февраля 2013 — 9:06 Ferrian
.charlist legend {background: rgb(247, 12, 12) url(/sites/default/themes/modern/css/img/gr-bg.png) repeat-x;}

Не только шрифт. Бывает полезным помнить: "color" отвечает только за цвет шрифта, "background" - за фоновый цвет элемента.

А ещё лучше открывать селектор с помощью утилит прямо на странице. Там сразу всё видно, и можно на ходу играть с цветом, назначать или вовсе убирать текстуры и прочее и прочее.

9 февраля 2013 — 0:44 smit

Как поменять фон странички гильдии? Про лист персонажа тут написано, а про лист гильдии не нашел.

9 февраля 2013 — 2:03 Тот самый Nodos

Используйте ".guild" вместо ".charlist".

9 февраля 2013 — 2:42 smit

Спасибо.

25 февраля 2013 — 20:21 Магистр Джедай Glasner

Как поставить картинку как в этом листе
http://mychar.ru/chars/6949

26 февраля 2013 — 13:21 Подколодная змея Dar'Sin

Прямо расписать? 0_о

26 февраля 2013 — 14:52 Baron von Baron (не проверено)

.charlist {
background-image: url(http://savepic.net/2126167.jpg);
background-color: #996A30;
border-bottom-color: currentColor;
border-bottom-width: 1px;
border-left-color: currentColor;
border-left-width: 1px;
border-right-color: currentColor;
border-right-width: 1px;
border-top-color: currentColor;
border-top-width: 1px;
}
Собственно, такой код вам нужен. Я в нем откровенно плохо разбираюсь - просто в Хроме есть функция "Просмотр кода элемента"

26 февраля 2013 — 15:23 Ing

Из всего, что просил автор, здесь ему нужно только это:

.charlist {background-image: url(ссылка на желаемое изображение);}

27 февраля 2013 — 18:52 Магистр Джедай Glasner

Спасибо

27 февраля 2013 — 9:56 Baron von Baron (не проверено)

Господа, возможно ли изменить цвет шрифта в заголовках полей "Внешний вид и характер", "Мастерство и знание" и так далее?

27 февраля 2013 — 10:05 admin

Выше уже 2 раза отвечали на этот вопрос.

4 марта 2013 — 16:02 Капитан Гномереган Лурий

Добрый день, какой класс имеет общий лист гильдии (без шапки, лишь то, что внутри рамки)?

5 апреля 2013 — 21:39 Колдун Павший лорд

Добра вам.
Не могли бы вы сказать, как сместить портрет персонажа, скажем, с угла на середину?

5 апреля 2013 — 22:50 Экзарх Фиасаар

Помнится Алхимик говорил, что никак.

6 апреля 2013 — 6:39 Капитан Гномереган Лурий

А вот и можно.
Класс {margin-left:значение(с минусом!)px;}

8 апреля 2013 — 6:34 Капитан Гномереган Лурий

Вот несколько полезных ф-ций CSS, если кому понадобятся:

{color:цвет;} - меняет цвет текста

a:link {} - меняет св-ва непосещенной ссылки
a:visited {} посещенной
a:active {} при нажатии на ссылку
a:hover {} при наведении курсором
a:focus {} при выделении с помощью Tab

{font: стиль буквы ширина размер тип} - изменения текста
Значения для стиля:
italic - курсив
bold - жирный
Для букв:
small-caps - меняет все буквы на заглавные (ниже будет подобная ф-ция с большим кол-вом возможностей)
Для ширины:
значение в пикселях
Для размера:
значение в пикселях
Для типа:
языковая семья (к примеру Times New Roman)

{text-align:значение} - выравнивание текста по:
left - левому краю
right - правому
center - центру
justify - ширине

{text-decoration:значение} - выделение текста:
none - убрать все выделения
overline - надстрочное подчеркивание
underline - подстрочное
line-throught - перечкивание

{text-indent:значение} - значение для красной строки

{text-transform:значение} - превращение текста
uppercase - заглавные буквы
lowercase - маленькие
capitalize - все слова с большой буквы
none

{letter-spacing:значение} - расстояние между символами
{word-spacing:значение} - расстояние между словами

{vertical-align:значение} - вертикальное выравнивание
baseline - по умолчанию
sub - надиндекс
super - подиндекс

{padding:значение} - отступ между содержимым и рамкой
{margin:значение} - отступ между блоком и ближайшим элементом
Также возможно указать значение лишь для одной стороны. Для этого нужно указать сторону через дефис, к примеру
padding-left или margin-top.
Доступны значения:
left
right
top
bottom

Значение для border (рамки)
{border-значение:значение}
width - ширина
color - цвет
style - стиль
- dotted - пунктир точками
- dashed - пунктир черточками
- double - двойной
- solid - сплошная
- groove - выпуклая
- ridge - выпуклая
- inset - вжатая
- outset - выдвинутая
radius - округление углов рамки

{visiblity:значение} - видимость элемента
hidden - элемент не виден, но занимает место
visible - по умолчанию
none - элемент "исчезает"

{z-index:значение} - 3D выравнивание. Если один элемент скрыт или частично скрыт лежащим "на нем" элементом, вы можете указать значение 1 или 2, и он выдвинется наверх. Значение с минусом наоборот "опускает" его.

Таблица цветов.

23 апреля 2013 — 18:31 Pentala

Можно замостить картинкой не весь лист, а только один из блоков?

23 апреля 2013 — 18:32 Капитан Гномереган Лурий

.класс блока {background-image:ссылка на картинку;}

2 июня 2013 — 23:31 Адвокаторша

Как сделать так, чтобы при прокрутке чарлиста изображение фона смещалось за экраном? Ну... Допустим, крутишь лист вниз - изображение следует вниз.

3 июня 2013 — 5:33 Explosions of life! BabzaBloom
.charlist { background:url(http://savepic.org/1000658.jpg); }
Без ключа no-repeat этот стиль "замостит" лист персонажа выбранным изображением. Используйте его для прикрепления собственных повторяющихся текстур.

3 июня 2013 — 6:06 Капитан Гномереган Лурий

Бабза, не повторяющийся фон, а закрепленный.
fixed
А вообще это выше описано.

8 июля 2013 — 8:45 Fitty

Кхм. Столкнулся с парочкой проблем. В оформлении Rise of the Horde при заливке "полей" в их самом верху остается белое пространство, независимо от цвета. А также при покраске "рамок" цвет меняет указаные яркость и тон (например, темнокрасный может превратиться в розоватый). Да, знаю, можно сменить оформление и т.п., но... Я НЕ МОГУ ОТКАЗАТЬСЯ ОТ НЯШНОГО СИМВОЛА ОРДЫ В НАЗВАНИЯХ ТАКИХ РАЗДЕЛОВ, КАК "Внешний вид и характер"! Вотъ...

8 июля 2013 — 8:55 Ferrian
НЕ МОГУ ОТКАЗАТЬСЯ ОТ НЯШНОГО СИМВОЛА ОРДЫ В НАЗВАНИЯХ ТАКИХ РАЗДЕЛОВ, КАК "Внешний вид и характер"!

Легко переносится в любой другой стиль банальным копированием и минимальной адаптацией правила:

legend {
background: url(/sites/default/themes/modern/css/img/horde/f.gif) no-repeat !important;
/*background: orange url(/sites/default/themes/modern/css/img/horde/f.gif) no-repeat !important;
(Если нужна подложка оранжевого или любого другого цвета, свойство выше заменяется на это, закомментированное) */
border: none !important;
color: #690101 !important;
padding: 8px !important;
padding-left: 38px !important;
padding-right: 3px !important;
font-size: 16px !important;
}

8 июля 2013 — 9:08 Fitty

Благодарю.

8 июля 2013 — 12:59 Безумная кошатница Анфи

Не получается в листе сюжета скрыть аватарку,

А как убрать отображение аватарки в листе сюжета?

field-field-plotimage
field-field-plottitle
field-field-plotdate

не помогает =(

8 июля 2013 — 15:07 admin

Ну если вы прямо это впихивали в код, то и не поможет. Это просто классы, а не пример кода.

.plot .field-plotimage {
display:none;
}

8 июля 2013 — 19:16 Безумная кошатница Анфи

Спасибо.

9 июля 2013 — 16:27 Кот Энэрилан

Можно ли как-нибудь переименовать подразделы листа персонажа, к примеру «Место в мире» или «Мастерство и знания»?

9 июля 2013 — 16:30 Колдун Павший лорд

HTML я думаю и никак больше.

9 июля 2013 — 16:39 Кот Энэрилан

Видимо у меня нет другого выбора...

9 июля 2013 — 16:30 admin

Если вы оставляете те же поля, то зачем переименовывать разделы, ведь они названы как раз по смыслу содержимого?

9 июля 2013 — 16:39 Кот Энэрилан

Хотелось бы вместо обычного поля "Инвентарь" выделить как-нибудь поле «Имущество и владения», в котором, возможно, описывалось полностью материальное состояние персонажа.

9 июля 2013 — 16:44 admin

Тогда при замене всего заголовка "Имущество и владения" у вас класс, языки и верования будут записаны в него же. Попробуйте в конец поля инвентарь пихнуть выделенное жирным "Имущество и владения:" и описать после него. Выглядеть будет как-то так.

9 июля 2013 — 16:51 admin

А теперь сам ответ на вопрос: можно, если вы более-менее знакомы с CSS, а не просто копируете-вставляете. Я привожу примерный код, но для каждой конкретной страницы и темы оформления его нужно изменять ради правильного позиционирования.

Пример заменяет заголовок у первой подгруппы полей.

.charlist fieldset.group-ch1 legend {
display:none;
}
.charlist fieldset.group-ch1 {
margin-top:30px;
}
.charlist fieldset.group-ch1:before {
content:"Мой классный подзаголовок";
display:block;
width:220px;
background: #444;
color:#eee;
border: 1px solid #444;
border-radius: 4px;
margin:-25px 0 10px 0;
padding: 0.5em 1em;
}

(кликабельно)

9 июля 2013 — 16:55 Кот Энэрилан
Тогда при замене всего заголовка "Имущество и владения" у вас класс, языки и верования будут записаны в него же.

Как-то не подумал об этом. Но тем не менее, за ответ спасибо. Пригодится.

12 июля 2013 — 8:38 Кот Энэрилан
Не используйте для хранения сервис Radikal, поскольку их сервера не реагируют достаточно быстро.

Хотелось бы добавить ещё и http://imageshack.us/

20 июля 2013 — 14:51 FrankAnger

Подскажите плиз как скрыть набор полей "Отыгрыш"?

20 июля 2013 — 18:16 Кот Энэрилан
.group-ch5 { display:none !important; }

23 июля 2013 — 13:09 BridgeTroll

можно ли на < fieldset>...< fieldset> поставить определенный цвет фона или даже картинку?

23 июля 2013 — 13:37 Капитан Гномереган Лурий

Да.

1 августа 2013 — 19:28 BridgeTroll

Гениальный ответ! Как?

1 августа 2013 — 19:38 Ferrian

Так же, как и любой другой контейнер.

http://htmlbook.ru/css/background

13 ноября 2013 — 22:56 Кишкодер | Je m'appelle Stephan

Слушайте. Не подскажете, как сделать так, чтоб верхний фон был такой же, а тот, который под текстом заменить картинкой.
Хочу изменить фон под текстом на вот эту картинку - http://savepic.su/3859822.jpg
Т,Е, оставить фон до основного текста как он есть, а где в листе белое - залить картинку, отосланную вам. Только чтоб не повторялась.

18 ноября 2013 — 8:50 Кишкодер | Je m'appelle Stephan

Спасибо, помогли, аж за душу взяло..

18 ноября 2013 — 18:44 Пустомант Voidvert

Да, как они вообще посмели не ответить тебе.

14 ноября 2013 — 16:56 Yumet

Как поменять цвет текста в имени, названии сервера и статусе, подскажите пожалуйста :)

14 ноября 2013 — 17:24 Подколодная змея Dar'Sin

По порядку: имя, сервер, статус:

.charlist .field-field-ch2,
.charlist .field-field-off,
.charlist .field-field-ch5 {
color: #ЦВЕТ;
}

И еще ник:

.charlist .field-field-ch3 {
color: #ЦВЕТ;
}

14 ноября 2013 — 17:31 Yumet

Спасибо :)
особенно за скорость ответа

21 ноября 2013 — 20:34 Trandir

Хочу изменить цвет в названии гильдии. Но почему-то вот в "этом" работает только тень шрифта, а сам цвет букв остался по умолчанию зеленым:

.field-field-guildname {text-color: #e7f2f9; text-shadow: 2px 2px 2px #180306; !important;}

21 ноября 2013 — 20:38 Шляпный чародей Дядюшка Кристиоф

Если я не ошибаюсь, то вместо text-color надо писать просто color: #ЦИФРЫ

21 ноября 2013 — 20:42 Trandir

пробовал, почему-то не работает.

21 ноября 2013 — 21:10 admin
.guild .field-field-guildname {
color: #e7f2f9 !important; text-shadow: 2px 2px 2px #180306 !important;
}

30 ноября 2013 — 13:13 Женщина народа сидов Майалис

Яваскрипты никак не вставить, да? И если все-таки не вставить - как бы еще сделать движущуюся панораму, не пытаясь сделать из нее gif? А то прям идея-фикс. Хочется-хочется-хочется эту панораму.

30 ноября 2013 — 13:57 admin

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

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

30 ноября 2013 — 14:15 Женщина народа сидов Майалис

С помощью Ааши смогла сделать примерно вот что - это как раз то, что и нужно. Это тестовый вариант, работающий только в гугл-хроме (в опере и файрфоксе проверяла, в ие даже не стала), и этот малюсенький кусочек кода сбивает все остальное оформление - отключенная аватарка почему-то отображается, заданный блокам фон - нет. Буду копаться дальше.

30 ноября 2013 — 14:44 admin

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

Оформление слетало из-за потерянной закрывающей скобочки.

30 ноября 2013 — 14:57 Женщина народа сидов Майалис

Ууу, огромное спасибо. Пойду сделаю что-нибудь интересное.

30 ноября 2013 — 15:52 Explosions of life! BabzaBloom

Эффект от прочтения такого листа будет как от веществ. Круто, бесплатно.

30 ноября 2013 — 17:52 Женщина народа сидов Майалис

И глаза можно будет извлечь из черепа даже без помощи специальных инструментов!
А вообще, думаю, это можно сделать стильно и здорово. Осталось понять, как именно.

30 ноября 2013 — 17:54 Toorkin Tyr

включи-ка скорость повыше, давай поржем :3

30 ноября 2013 — 17:59 Женщина народа сидов Майалис

Я пока просто пробую разобраться с тем, почему не работает на других браузерах (код поменяла, ага), и не потеряла ли я где-то скобочки. Чарлист будет совсем-совсем не таким, картинки туда впендюрены для теста. Поржать лучше будет уже с итога!

1 декабря 2013 — 12:47 Женщина народа сидов Майалис

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

16 декабря 2013 — 20:02 Кишкодер | Je m'appelle Stephan

Не подскажете, как объединить поля Внешности и характера в одно?

16 декабря 2013 — 20:27 Экзарх Фиасаар

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

20 декабря 2013 — 14:00 Killis

А как музыку к листу прикрепить?)

20 декабря 2013 — 15:45 admin

Ссылкой на ютуб, все сервисы встраивания последний год постоянно тупят и падают.

28 марта 2014 — 23:08 Hero

Как сделать цвет фона - черным? :)

28 марта 2014 — 23:48 Fitty

.charlist { background-color:#000000; }

11 мая 2014 — 4:08 ijulai

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

11 мая 2014 — 9:47 Гуляющий DeathRaider
.field-field-character, .field-field-look .field-label { display:none; }

Этот код, вставленный в качестве стиля, позволяет не отображать надпись "Особенности внешности" и полностью скрывает поле "Особенности характера".

Читайте внимательнее тему.

30 июня 2014 — 13:42 Не полный писец O.G.R.

Прошу прощения. В сюжете, как здесь прочитал,
.plot field-field-plotimage,
.plot field-field-plottitle,
.plot field-field-plotdate {
display:none;
}

Должно убрать данные поля - дату, название и рисунок внутри листа, правильно? У меня все равно остается. Что делаю не правильно?

30 июня 2014 — 14:25 admin

Вы прочитали неправильно. field-field-plotimage и аналоги - это классы, перед ними должна стоять точка. Точка не ставится, когда стили пишутся для тегов.

.plot .field-field-plotimage,
.plot .field-field-plottitle,
.plot .field-field-plotdate {
display:none;
}

30 июня 2014 — 14:46 Не полный писец O.G.R.

Большое спасибо

30 июня 2014 — 15:19 Не полный писец O.G.R.

Как переместить (центрирование, прижимание к правому краю), а также как убрать графы "Участники", "Место проведения" в сюжетах?

30 июня 2014 — 16:10 admin

Классы - field-logchars и field-plotplace соответственно. Стили - смотрите на htmlbook.ru по поводу display, text-align и float.

30 июня 2014 — 16:37 Не полный писец O.G.R.

Еще раз спасибо.

30 июня 2014 — 22:00 Не полный писец O.G.R.

В сюжетах (стандартный мучар) как управлять заголовком "отыгрыши" и их списком. Хочу покрасить оба. Последнее обязательно, так как черный фон и черный текст. Спасибо заранее.

30 июня 2014 — 23:45 admin

.field-plotlogs .field-label - заголовок;
.field-plotlogs a - ссылки;
color:#123456 - цвет;
border-bottom:none - убрать подчеркивание у ссылок.

30 июня 2014 — 23:59 Не полный писец O.G.R.

Благодарен.

1 июля 2014 — 10:35 Бледнолицый Фелиций

Как поставить на фон листа персонажа и гильдии картинку? А еще лучше, как сделать, чтоб сверху была картинка, а дальше все шло определенного цвета?

1 июля 2014 — 10:47 re_vict

1 июля 2014 — 10:51 Бледнолицый Фелиций

Simply I cancer!

1 июля 2014 — 19:24 Бледнолицый Фелиций

Спасибо всем, вы мне так помогли.

1 июля 2014 — 19:42 Не полный писец O.G.R.

Почитай здесь http://htmlbook.ru/content/tsvet-fona

Это если ты захочешь убрать имя, аватарку и все прочее что весит наверху в листе.

.field-field-ch1 { display:none !important; }
.field-field-ch2 { display:none !important; }
.field-field-ch3 { display:none !important; }
.field-field-off { display:none !important; }
.field-field-faith { display:none}

1 июля 2014 — 19:57 Бледнолицый Фелиций

Спасибо.

1 июля 2014 — 13:00 Не полный писец O.G.R.

Как в листе гильдии сделать отдельную новость, как Вестник Дун Грима?

1 июля 2014 — 13:15 admin

Вопрос не относится к темизации. Лента новостей гильдии - бонус премиум-гильдий.
Правая часть трекера отлично подходит для остальных.

2 июля 2014 — 20:06 Не полный писец O.G.R.

Простите за мою глупость, но не могу понять точный тег для центрирования
field-plotlogs .field-label - заголовок;
.field-plotlogs a - ссылки;

Пробовал разные варианты, но уже замучился.

2 июля 2014 — 23:59 admin

Для выравнивания по центру нужно брать общий класс.
.charlist .field-plotlogs

6 июля 2014 — 10:12 Не полный писец O.G.R.

Как в листе персонажа убрать фоны групп? Чтобы были 100% прозрачными, или что-то в этом роде?

7 января 2015 — 15:21 Ностальгирующий критик iz13bukv

http://mychar.ru/chars/51417016

Как мне растянуть изображение по ширине листа и как сделать фон страницы?

3 апреля 2015 — 5:59 Плут Ниарай

Можно ли вставить в описание внешности/характера дополнительный арт, отдельно от главного? И если нет, то в какой теме это возможно? Спасибо.

3 апреля 2015 — 10:25 admin

Кнопка "img" есть над каждым полем.

7 августа 2015 — 23:05 Коммандер Брэйден

А возможно в качестве фона вставить короткое зацикленное mp4 видео?

8 августа 2015 — 0:42 Юная авторесса Бриана

Уже предвкушаю XD

9 августа 2015 — 14:13 Коммандер Брэйден

Нет, ну коротенькую анимацию хотя бы. Где видео весит 500 кбайт, gif будет весить черт знает сколько.

9 августа 2015 — 14:42 admin

Нет, чистым CSS нельзя. Там нужно брать контейнер с видео и позиционировать под лист, подгоняя всю вёрстку. И я не хочу тег <video> делать доступным.

8 декабря 2017 — 16:52 Fitty

[resurrection]
Можно ли при помощи Custom CSS как-то переместить блок "Родственники" под Хронологию? Как и в принципе двигать эти блоки? Или смена последовательности возможна только при проектировке страницы в HTML?

8 декабря 2017 — 16:57 CSS-сенсей Zildjinn

В легкую.
Как минимум, ты указываешь для блока нужное значение параметра position, а дальше уже через left/top или через внешние\внутренние отступы margin/padding.

Как вариант, ты всегда можешь просто поменять названия блоков. Т.е. пишешь в "Способности", а отображается, что это "Хронология".

А еще лучше го в ЛС, я тебе "на пальцах" все объясню и подскажу.

8 декабря 2017 — 16:58 Fitty

Благодарю.

8 декабря 2017 — 17:16 Холодок

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

7 августа 2018 — 14:04 CSS-сенсей Zildjinn

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

12 августа 2018 — 9:34 admin

Поле с общими стилями, доступное для премиумов, используется в том числе для профиля.

13 августа 2018 — 10:48 CSS-сенсей Zildjinn

О, замечательно.