Про настройки адаптивного дизайна

[Victory_Day]

Пишет  quirischa:

11.12.2019 в 12:10

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

Нельзя просто так сменить тип оформления на адаптивный, и всё адаптируется. Увы, но адаптивный дизайн нужно создавать с нуля.

Кроме того, сейчас пока нормально не работает и предпросмотр дизайна в настройках. Но мы скоро это починим.

* * *

Настройки цветовой гаммы делятся на "Цвет текста" и "Цвет фона".

Во вкладке "Цвет текста":
- "Текст" - цвет основного текста записей
- "Меню" - цвет элементов на плашке меню (лого, иконки, ссылки)
- "Акценты" - это цветовые акценты страницы (заголовки, ссылки, бордеры — всё то, что выделяется на фоне остального)
- "Прочее" - то, что по смыслу на второстепенном плане (служебные ссылки, иконки и т.д.)

Во вкладке "Цвет фона"
- "Фон дневника" - цвет фона ниже плашки меню. Может быть незаметен, если закачана фоновая картинка.
- "Фон записи" - цвет подложки под постами, заголовками и прочее.
- "Фон меню основной" - цвет плашки меню
- "Фон меню дополнительный" - цвет средней (юзерской) части меню и выпадающих блоков.

* * *

Можно придерживаться вот таких общих советов по применению цветовой схемы:

1. Старайтесь по возможности минимизировать количество используемых цветов.
Например, цвет Акцентов и цвет Текста делать одинаковыми. Также одинаковыми можно фоны Основного и Дополнительного меню.

2. Второстепенные элементы страницы (Оформление → Цвет текста → Прочее) лучше устанавливать в бледное/ненасыщенное/неяркое значение.

3. Фон дневника и Фон записи устанавливать в одинаковые значения, визуальных разделителей между записями и так хватает.

4. Устанавливать Фон записи только если задана фоновая картинка.

5. При использовании фонового рисунка устанавливать нейтральные цвета дневника (оттенки серого).

6. Вкладка Шрифты. Обычно размер заголовка устанавливается на пару пунктов больше размера основного текста, тогда проще считывается визуальная иерархия текстов.

* * *

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

URL комментария

Comments

[Tenno Seremel]

Лис Хикару, собачку всё равно хотят поменять в будущем. Можно подождать и посмотреть.

> Как сделать подчёркивание у тем записей? (Я сама попыталась, но слово "тема" тоже получила подчёркнутым)

.atTag a
{
    text-decoration: underline !important;
}

> И как сделать жирными ники, к кому обращаешься или упоминаешь?

a.TagL
{
	font-weight: bold !important;
}

> Зачем она такая милипусечная и можно ли увеличить?
Можно, но понравится ли столько пустого места вопрос открытый

#epigraph > a:first-child > div
{
	width: 120px !important;
	height: 120px !important;
	background-color: transparent !important;
	background-size: contain !important;
}

[Tenno Seremel]

Хм, позиция «фото» в эпиграфе зависит от того, владелец ты или нет, тогда так…

#epigraph > a > div
{
	width: 120px !important;
	height: 120px !important;
	background-color: transparent !important;
	background-size: contain !important;
}

Надеюсь, это ничего не сломает в будущем

[Victory_Day]

Tenno Seremel, нам надо еще одно комсоо для продвинутых, чтобы ставить там эксперименты) хотя... Экспериментальное соо же есть, но что-то там никто не экспериментирует...

[Tenno Seremel]

Victory_Day, у меня из новодизайновых сообществ только сообщество нового дизайна, вот я и не спешу никуда

[Victory_Day]

Tenno Seremel,

[emercy]

Tenno Seremel, тогда так…

О, класс! Спасибо!

Ещё такой вопрос, можно ли поместить заголовок на одну строку, а дату и кнопки редактировать-удалить - на другую? А то эти кнопки скачут туда-сюда, в зависимости от длины заголовка((

[emercy]

Victory_Day, вот будем переодевать диванчик, тогда и поэкспериментируем)) А пока дневника вполне хватает.

[Tenno Seremel]

emercy, можно либо направо:

.postActionLinks
{
    float: right !important;
}

либо под заголовком (выглядеть будет странновато):

#postsArea > .item > .postContent > .post-content > .post-header > .postActionLinks
{
    display: block !important;
}

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

[emercy]

Tenno Seremel, второй вариант помешает кнопки слева, это неудобно.
А float на мобильном как-то не айс:

Для сравнения без float:

[Tenno Seremel]

emercy, ну так text-align:right; в зубы. Я не могу угадать как должно получиться

[Лис Хикару]

собачку всё равно хотят поменять в будущем. Можно подождать и посмотреть.
О, это хорошие новости!)))

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

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

[Tenno Seremel]

Лис Хикару, потом мне пришла мысль, что можно добавить ещё это:

#epigraph > .clear {
    display: none !important;
}

И тогда фото будет наползать на контент под ним. Может так будет меньше места пропадать.

[emercy]

Tenno Seremel, омг, сорри, стормозила)) спасибо за помощь!

[Tenno Seremel]

emercy,

[emercy]

Опять дубли((

[emercy]

А нет, показалось

[Лис Хикару]

Tenno Seremel, Я сама попыталась, но слово "тема" тоже получила подчёркнутым
А я то надеялась, что что-то намудрила, поэтому слово "тема" мне подчёркивает)))

тогда фото будет наползать на контент под ним. Может так будет меньше места пропадать.
Да, наползает, и при это устраивает знатный бардак!)))
Но непонятно, зачем тогда на этой полосе столько места над и под строчкой с аватарой и ником. Кстати о ней - ваша полоса заметно уже моей, ее специально как то ужимали?

ну так text-align:right; в зубы Я попробовала заменить, но видать что-то не туда подставляю в коде...
и да - float на мобильном, как выяснилось, после длинного названия - у меня тоже бардак устраивает.

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

[emercy]

Лис Хикару, спасибо.

div.ads-top.hidden-xs.hidden-sm { background: url('адрес картинки') !important; }

Заливает белую полосу фоновым изображением. Картинка должна быть в БИ автора дневника, адрес не забудьте обрезать, чтобы начинался с /userdir
У меня:

div.ads-top.hidden-xs.hidden-sm { background: url('/userdir/1/5/0/3/1503064/86578958.gif') !important; }

Если хотите, чтобы полоса не пряталась на мобильном,

div.ads-top.hidden-xs.hidden-sm { display: block !important; }

Собака, правда, все равно не помещается.

[emercy]

Я попробовала заменить, но видать что-то не туда подставляю в коде...

 #postsArea > .item > .postContent > .post-content > .post-header > .postActionLinks { display: block; text-align:right !important; }

[Tenno Seremel]

Лис Хикару,

Кстати о ней - ваша полоса заметно уже моей, ее специально как то ужимали?

Которая именно? У меня-то в эпиграфе маленькая картинка. Если речь о верхнем и нижнем паддингах эпиграфа, то у меня там по 10 пикселей выставлено, чтобы блок визуально чуть поменьше был:

#postsArea > .item {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

emercy, хм… а float не остался ли? Его надо убрать.

[nemv]

Tenno Seremel, а можно ещё вопросик про эпиграф?
Вот у меня в эпиграфе текст. И размер шрифта при этом не совпадает с размером шрифта в остальном дневнике. Что с этим можно сделать?

Ковырялся и так и эдак, смог сделать их одинаковыми но они тогда становятся сильно меньше размером. Т.е. я нашёл два куска кода, в одном 108%, в другом 106%. Если сбросить до 100% у обоих или даже у какого-то одного, то всё становится одинаковым, но при этом весь текст становится мелким, а это не то.

Вот кусок который я нашёл для эпиграфа

.post-list .item .post-content, .paragraph {

    font-family: georgia,palatino;
    font-style: normal;
    font-weight: normal;
    font-size: 106%;
}

А этот - для текста в дневнике

.post-list .item .post-content .post-inner {
    font-size: 108%;
    line-height: 150%;
    overflow: hidden;
    text-align: justify;
}

Хотя может я вообще не туда полез...

[Tenno Seremel]

nemv, если на весь блок эпиграфа целиком:

#epigraph {
	font-size: 20px !important;
}

Если только на текст, который редактируется:

#epigraph .postInner {
	font-size: 20px !important;
}

Эпиграф считается постом, но не каждый пост — эпиграф…

Ну и font-size в процентах они на странице зря намешали, как по мне. Поэтому настройки дневника и реальный размер шрифта в дневнике друг с другом не особо соотносятся.

[nemv]

Tenno Seremel, ага, значит я таки не совсем там редактировать пытался. Спасибо!
Но с точным числом не получилось. Я попытался задать размер такой же, как задан в настройках шрифта в дневнике - он становится сильно больше.
Поставил как в дневнике 108% процентов - вроде совпали по размеру. Дома в фотошопе проверить надо будет.

[Tenno Seremel]

nemv, там вычисленное значение 16px, насколько я вижу. 16.0167px, если точнее. Вряд ли это критично

[nemv]

Tenno Seremel, так у меня-то задано при этом 17!

[Tenno Seremel]

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

[nemv]

Tenno Seremel, и ведь главное, если бы не игрались, то какого-нибудь 13 или 14 было бы достаточно для нормального размера шрифта.
Не знаю, насколько корректно сравнивать с word но там тот же шрифт уже при 14 выглядит достаточно крупным, чтобы его было удобно читать.

[Tenno Seremel]

nemv, в ворде разве не пункты используются?

[nemv]

Tenno Seremel, а, точно. Тогда наверное некорректно сравнивать.
Давно я не создавал html с нуля. Надо посмотреть как шрифт без всего вот этого лишнего отображается.

[emercy]

Tenno Seremel, нет, у меня этот код сработал. Вот что в итоге получилось:

Это я забыла, что у нас цитирование пока работает))