[Блог] Системы и не только | ходы игроков | Моддинг ДМа

Вниз

DungeonMaster SolohinLex 26.04.2020 09:57 =		Дисклеймер: Используя дальнейшие рекомендации, вы должны осознавать, что: 1) Все баги, связанные с версткой будут правиться под стандартный шрифт и размер, без учета локальных вариантов; 2) на вас самих лежит полная ответственность, если в результате какой-то функционал сайта для вас поломается, жалобы на ошибки подобного рода едва ли будут рассматриваться; 3) Поддержание кода меняющего в актуальном состоянии также находится в зоне вашей ответственности, никто не берет на себя ответственность в будущем поддерживать инструкции в актуальном состоянии. Будьте осторожны и внимательны.
1

DungeonMaster SolohinLex 26.04.2020 10:05 =		#1 Прежде всего хочу извиниться за то, что в заметке #3664 в блоге Бродяги ссылка был упущен один существенный момент, который для меня был самоочевидным, но для людей, не слишком часто сталкивающихся с CSS, может доставить проблем. Все команды вида @import должны быть расположены в самом верху блока команд css перед любыми другими командами. Иначе могут возникать коллизии и ошибки.
2

DungeonMaster SolohinLex
26.04.2020 10:24
=

#2

Немного истории:
Трудно остановиться, когда начинаешь моддить ДМ.

Для начала я ограничил его ширину, убрал выравнивание по ширине и фон у постов. В результате получилось вот такое:

Под спойлером изображение:

Показать содержимое

Код



@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');

LEGEND, H1, H2, H3, TEXTAREA, INPUT, #left, #main, #sidebar, #footer P, #footer div.p, .logo P, .logo H1, .logo div.p, .topmenu, #info, .usermenu, .comment, #main .content .diceLine SPAN, .chatHeader, #adminChat .chatHeader, #chatGrid P, #chatGrid div.p, .advantageItem .link A, .advantageItem .advantage, #main .content .mainbanner SPAN, #sidebar .content .mainbanner SPAN, #sidebar .mainbanner SPAN, .sidebarAdvert SPAN, #links, .storng16px, .important, .txtDMTextBoxCtrl, .post-reminder-star {
	font-family: 'Roboto Slab', serif;
}

#outer_wrapper {
	max-width: 1000px;
	margin: 0 auto;
}

#container {
    width: auto;
}

#main div.p, div.dmtxt {
	text-align: left;
}

#main .content .commentItem {
	background-color: transparent;
	background-image: none;
	border-left: none;
	border-right: none;
	border-top: none;
}

Отредактировано 26.04.2020 в 10:25

DungeonMaster SolohinLex 26.04.2020 10:31 =		#3 Однако! По результатам использования вариант был признан неудачным. Благодаря идее пользователя GeneralD ссылка я решил попробовать новый вариант. Возвращаем стандартное расширение постов, стандартный шрифт. Однако именно на тексты постов вешаем шрифт со слабами и увеличиваем его. Но при этом не трогаем левую колонку и строки подписи. Под спойлером изображение Показать содержимое Код @import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap'); #container { width: auto; } #main div.p, div.dmtxt { text-align: left; } #main .content .commentItem { font-family: 'Roboto Slab', serif; font-size: 16px; } TEXTAREA.txtDMTextBoxCtrl { font-family: 'Roboto Slab', serif; font-size: 14px; } #main .content .commentItem .p.comment { font-family: 'Roboto', sans-serif; font-size: 12px; } #main .content .commentItem .firstrow { font-family: 'Roboto', sans-serif; font-size: 12px; } Будем посмотреть. Отредактировано 26.04.2020 в 10:34
4

DungeonMaster SolohinLex
26.04.2020 10:55
=

#4

Пофикшены размеры некоторых блоков, упрощен код, пофикшен чат, пофикшено поле набора. Внезапно стало можно жить на 100%

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');

#container {
    width: auto;
}

#main div.p, div.dmtxt {
	text-align: left;
}

div.dmtxt {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
}

#main #chatArea .p {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    margin: 4px 0;
}

TEXTAREA.txtDMTextBoxCtrl {
	font-family: 'Roboto Slab', serif;
	font-size: 14px;
}

Отредактировано 26.04.2020 в 10:55

DungeonMaster SolohinLex
26.04.2020 11:03
=

#5

Извините, ещё немного фиксов: увеличил межстрочный интервал и оптимизировал код. В чате добавил отступы между разными сообщениями

Скрин под спойлером, масштаб 100%

Показать содержимое

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');

#container {
    width: auto;
}

#main div.p, div.dmtxt {
	text-align: left;
}

div.dmtxt, #main #chatArea .p {
    font-family: 'Roboto Slab', serif;
    font-size: 16px;
    line-height: 1.5;
}

#main #chatArea .p {
    margin: 4px 0;
}

TEXTAREA.txtDMTextBoxCtrl {
	font-family: 'Roboto Slab', serif;
	font-size: 14px;
	line-height: 1.5;
}

DungeonMaster SolohinLex
26.04.2020 12:33
=

#6

Ещё один апдейт:
- Базовый размер шрифта
- Основные замеры строятся относительно него
- Добавлены отступы между элементами правого и левого меню (кроме форума, увы, там нельзя сделать как-то разумно), тоже относительно базового размера
- И вообще в целом причесал.

Скрин, маштаб 100%

Показать содержимое

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');

html, body {
	font-size: 12px;
	line-height: 1.25;
}

LEGEND, H1, H2, H3, TEXTAREA, INPUT, #left, #main, #sidebar, #footer P, #footer div.p, .logo P, .logo H1, .logo div.p, .topmenu, #info, .usermenu, .comment, #main .content .diceLine SPAN, .chatHeader, #adminChat .chatHeader, #chatGrid P, #chatGrid div.p, .advantageItem .link A, .advantageItem .advantage, #main .content .mainbanner SPAN, #sidebar .content .mainbanner SPAN, #sidebar .mainbanner SPAN, .sidebarAdvert SPAN, #links, .storng16px, .important, .txtDMTextBoxCtrl, .post-reminder-star {
	font-size: 1rem;
}

.topmenu a {
	font-size: 1.25rem;
}

#container {
    width: auto;
}

#left h2, #sidebar h2 {
	margin-top: 2rem;
	padding: 0;
}

#left table {
	border-collapse: separate !important;
	border-spacing: 0 .5rem;
}

#left a {
	font-size: 1.1rem;
}

#sidebar .p {
	margin: .5rem 0 !important;
}

#main h1 {
	font-size: 1.5rem;
}

h2, h3 {
	font-size: 1.25rem;
}

div.dmtxt, #main #chatArea .p {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: left;
}

#main #chatArea .p {
    margin: .5rem 0;
}

TEXTAREA.txtDMTextBoxCtrl {
    font-family: 'Roboto Slab', serif;
    font-size: 14px;
    line-height: 1.5;
}

TEXTAREA {
    width: 100% !important;
}

.comment {
	font-size: 14px;
}

DungeonMaster SolohinLex
29.04.2020 17:38
=

Минификс. Терялись почему-то болды на странице

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap');

html, body {
	font-size: 12px;
	line-height: 1.25;
}

LEGEND, H1, H2, H3, TEXTAREA, INPUT, #left, #main, #sidebar, #footer P, #footer div.p, .logo P, .logo H1, .logo div.p, .topmenu, #info, .usermenu, .comment, #main .content .diceLine SPAN, .chatHeader, #adminChat .chatHeader, #chatGrid P, #chatGrid div.p, .advantageItem .link A, .advantageItem .advantage, #main .content .mainbanner SPAN, #sidebar .content .mainbanner SPAN, #sidebar .mainbanner SPAN, .sidebarAdvert SPAN, #links, .storng16px, .important, .txtDMTextBoxCtrl, .post-reminder-star {
	font-size: 1rem;
}

.sidepadding, .sidepadding TD {
	padding: .75rem .5rem;
}

.topmenu a {
	font-size: 1.25rem;
}

#container {
    width: auto;
}

#left h2, #sidebar h2 {
	margin-top: 2rem;
	padding: 0;
}

#left table {
	border-collapse: separate !important;
	border-spacing: 0 .5rem;
}

#left a {
	font-size: 1.1rem;
}

#sidebar .p {
	margin: .5rem 0 !important;
}

#main h1 {
	font-size: 1.5rem;
}

h2, h3 {
	font-size: 1.25rem;
}

div.dmtxt, #main #chatArea .p {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem;
    line-height: 1.5;
    text-align: left;
}

#main .content .commentItem .diceRollsbg div.p {
	line-height: 1.5;
}

#main #chatArea .p {
    margin: .5rem 0;
}

TEXTAREA.txtDMTextBoxCtrl {
    font-family: 'Roboto Slab', serif;
    font-size: 1.25rem;
    line-height: 1.5;
}

TEXTAREA {
    width: 100% !important;
}

.comment {
	font-size: 14px;
}

b, strong {
	font-weight: bold;
}

DungeonMaster SolohinLex 20.05.2020 22:02 =		Для желающих пошатать ширины боковых колонок #mainbg { grid-template-columns: 1fr 270px; } #mainbg.twocolumns { grid-template-columns: 1fr 0; } #container { grid-template-columns: 320px 1fr; }
9

DungeonMaster SolohinLex
21.05.2020 11:31
=

Полный таблица сброса размера с комментариями на базе скрипта Nocturnal ссылка
Шатайте ДМ, радуйтесь жизни и не забывайте, что используя внешние скрипты вы сами несете ответственность за работоспособность ДМа у себя

UPD Пофиксены некотороые баги, замеченные Бродягой


/* сброс шрифта до Tahoma */
html, body {
	font-family: inherit !important;
}

body {
	font-family: Tahoma, sans-serif !important;
}


/* размер колонок */
/* 220px - задает ширину правого блока */
#mainbg {
    grid-template-columns: 1fr 220px;
}

/* 220px - задает ширину правого отступа, там где пусто (но не везде) */
#mainbg.twocolumns {
    grid-template-columns: 1fr 220px;
}

/* 270px - задает ширину левого отступа */
#container {
    grid-template-columns: 270px 1fr;
}

.playerInfo {
	width: 260px;
}

/* размеры шрифтов */
/* базовый размер шрифта центральной колонки */
#main {
    font-size: 11px;
}
/* базовый размер шрифта левой колонки */
#left {
    font-size: 11px;
}
/* базовый размер шрифта правой колонки */
#sidebar {
    font-size: 11px;
}
/* размер шрифта меню под лого */
.usermenu {
    font-size: 11px;
}
/* размер шрифта и отступ основного меню */
.topmenu {
	padding-top: 32px;
    font-size: 14px;
    line-height: 15px;
}
/* размер шрифта заголвооков меню */
H1, H2 {
    font-size: 11px;
    font-weight: bold;
    text-transform: uppercase;
}
#main H2 {
    font-size: 11px;
}
H3 {
    font-size: 11px;
    font-weight: bold;
}
/* размер шрифта в кнопках, тегах и других контралах, а также линейных полях */
TEXTAREA, INPUT, button, select, .padding1pxleft, #main .content .diceLine SPAN {
    font-size: 11px !important;
}
/* размер шрифта в текстовых полях */
.txtDMTextBoxCtrl {
	font-size: 12px !important;
}
/* размер шрифта в подвале */
#footer div.p {
    font-size: 11px;
}
/* размер шрифта в подписях */
.comment {
    font-size: 11px;
}
/* размер шрифта в лого */
.logo P, .logo H1, .logo div.p {
    font-size: 11px;
    line-height: 20px;
}
/* размер шрифта в блоке о пользователях */
#info {
    font-size: 11px;
}
/* размер шрифта в блоке персонажа в игровых комнатах */
#main .commentItem .firstrow {
    font-size: 11px;
}
/* размер шрифта в чате */
#chatGrid P, #chatGrid div.p, .chatHeader {
	font-size: 12px;
}
/* размер шрифта на странице опросов */
#ctl00_mainContent_gwPolls {
	font-size: 11px !important;
}
/*Настройка размера уведомления ожидания поста, "Звездочка".*/
.post-reminder-star{
	font-size: 12px;
}

Отредактировано 21.05.2020 в 18:19

DungeonMaster SolohinLex
21.05.2020 18:55
=

Ширины колонок после последнего фикса стало даже проще править

/* размер колонок */
/* width - задает ширину правого блока */
#sidebar {
    width: 220px;
}

/* width - задает ширину правого отступа, там где пусто (но не везде) */
#mainbg.twocolumns #sidebar {
    width: 220px;
}

/* width - задает ширину левого отступа */
#left {
    width: 270px;
    margin-right: 15px; /* а это, чтобы звезды не заползали куда не надо */
}

Отредактировано 21.05.2020 в 18:56

Обсуждение | Информация | Персонажи | Вверх

Партия:

Комнаты:

Лента, Моддинг ДМа, Упрощенная система, основанная на разрешении конфликтов, -- Система, Хеллаэн: сеттинг, -- Навыки, -- Сеттинг, Каминохикари: комплиляция под уся, -- Система, -- Сеттинг

Добавить сообщение

Нельзя добавлять сообщения в неактивной игре.

Действия

Форум

[Блог] Системы и не только | ходы игроков | Моддинг ДМа

Добавить сообщение