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

[Victory_Day]

Пишет  quirischa:

11.12.2019 в 12:10

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

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

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

* * *

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

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

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

* * *

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

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

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

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

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

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

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

* * *

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

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

Comments

[Tenno Seremel]

Только слишком маленькое значение не ставьте, а то на узких мобильных устройствах будет всё сложно

[priest_sat]

Tenno Seremel, ясно. Пока что поставила то, что выдали. С телефона хорошо, дома посмотрю с ноута.

[priest_sat]

снова притащилась ныть))) надеюсь, не побьют.
получилось то, что получилось. Т.е. фактически без изменений.
причем в телефоне есть поля слева и справа. А в браузере - только справа.

[Тестовое соо нового дизайна]

priest_sat, а других кодов не стоит?

[priest_sat]

Тестовое соо нового дизайна, да я уже нагородила всё, что могла.

body { background-image: #, # !important; background-repeat: repeat-y, repeat-y !important; background-position: right top, left top !important; background-color: # !important; }
 .avatar { padding-right: 0 !important; }
 #epigraph { text-shadow: 1px 1px 1px rgba(0,0,0,.3); }
 #epigraph { background: #2f3c51 url("/userdir/2/9/5/3/2953955/86572903.jpg") center top / cover no-repeat !important; }
 body { background-image: url("/userdir/2/9/5/3/2953955/86607714.jpg") !important; }
 { background-attachment: fixed !important; }
 .ads-right { display: none !important; }
 #page-t { width: 100% !important; }

вот всё, что вставила. явно лишнего полным-полно.
мне бы только выровнять посередине, остальное устраивает.

[emercy]

priest_sat, Попробуйте оставить только это:

 
body { background-image: url("/userdir/2/9/5/3/2953955/86607714.jpg") !important; background-attachment: fixed !important; }
.ads-right { display: none !important; }
#page-t { width: 100% !important; }
#epigraph { background: #2f3c51 url("/userdir/2/9/5/3/2953955/86572903.jpg") center top no-repeat !important; background-size: cover !important; }
#epigraph { text-shadow: 1px 1px 1px rgba(0,0,0,.3); }
.avatar { padding-right: 0 !important; }

[priest_sat]

emercy, спасибо!

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

и мне бы сузить поле для постов.
извините за приставания.

[emercy]

priest_sat,

и мне бы сузить поле для постов.

Добавьте

#page-c { width: 80% !important; }

А с эпиграфом не совсем понятно. Картинка не полностью показывается?

[priest_sat]

emercy, да, картинка урезана почти полностью. Там раньше было несколько строчек, я их убрала. Так вот когда строчки были, то картинка полностью раскрывалась.
Спасибо за помощь! Днём к ноуту дойду, внесу коды.

[emercy]

priest_sat, вот что сработало у меня (решение топорное, надо смотреть на разных экранах и подбирать число):

#epigraph { height: 30em !important; }

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

<p>&nbsp; </p>

Как-то так:

[Tenno Seremel]

Можно указывать min-height вместо height, если подразумевается, что блок может быть и больше этого значения в зависимости от контента в нём.

[priest_sat]

emercy, о, насчёт пустых абзацев я не дотумкала. Спасибо, буду пробовать.

[priest_sat]

Tenno Seremel, спасибо за помощь.

[priest_sat]

фух, пока что всё в порядке. Большое СПАСИБО за помощь!

[priest_sat]

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

[Tenno Seremel]

priest_sat, вставлять как img, вероятно с выравниванием по центру

[priest_sat]

Tenno Seremel, то есть, мне убрать из кодов отрезок про эпиграф и просто вставить картинку в "Эпиграф, фото, список ПЧ"?

[Tenno Seremel]

priest_sat, по логике — да. Правда оно будет не на весь блок как сейчас, очевидно.

Альтернативный вариант, можно CSS коду с картинкой добавить background-size: cover !important; (возможно будет обрезаться, но будет закрывать всё), либо background-size: contain !important; (обрезаться не будут, но могут быть поля).

[priest_sat]

Tenno Seremel, по логике — да. Правда оно будет не на весь блок как сейчас, очевидно.
угу, понятно.

Альтернативный вариант, можно CSS коду с картинкой добавить

а я буду видеть с ноута то же, что и раньше?

[priest_sat]

так, применила background-size: contain !important - теперь с телефона видна вся картинка, но под ней большое пустое поле.
теперь думаю, или так или пусть как раньше))))
спасибо еще раз!

[Tenno Seremel]

priest_sat, вариант с img мне больше всего нравится, но потом как-то нужно допинать внешний вид… Ну или забить, поля и поля, ничего страшного

[priest_sat]

Tenno Seremel, меня устраивает и кусок картинки при просмотре с телефона) потому что вот эта простыня под картинкой ну никак не))) попробую счас просто картинку вставить.

[emercy]

priest_sat, с квадратного монитора тоже только часть картинки, если что.

[priest_sat]

emercy, эх... с прямоугольного видна вся картинка.

[Tenno Seremel]

priest_sat, таки предлагаю

<div style="text-align:center;"><img src="адрес картинки" alt=""/></div>

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

[priest_sat]

Tenno Seremel, а в кодах надо убирать строки про эпиграф?

[Tenno Seremel]

priest_sat, которые добавляют фон и min-height — да.

[priest_sat]

Tenno Seremel, ок, сейчас буду делать.

[Tenno Seremel]

priest_sat, потом можно будет добавить ещё так:

#epigraph {
	padding: 0 !important;
	max-width: 1024px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

Тогда ширина эпиграфа будет ограничена 1024 пикселями (как у картинки) и у него не будет паддингов по сторонам.

[priest_sat]

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