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

[Victory_Day]

Пишет  quirischa:

11.12.2019 в 12:10

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

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

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

* * *

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

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

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

* * *

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

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

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

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

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

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

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

* * *

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

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

Comments

[Лис Хикару]

emercy, спасибо!
Ох, что-то с этими удалить/редактировать кнопками беда одна... теперь они не устраивают бардак, зато добавляют лишнее пространство((
Кстати, а кто-нибудь уже жаловался, что эти кнопки сейчас стали неудобные - скачут то слева, то справа? Как бы их влепить на своё место - в правый верхний угол, под самую крышу - там же столько места! Почему оно пропадает?(

Tenno Seremel, кстати об этой картинке из эпиграфа - у меня стоит ваш код для прозрачности ее фона, поначалу все было как надо, но в какой-то момент он остался работать только на отдельнооктрытых записях (пост с комментариями), а на главной дневника - опять дырка из белого фона (фон за лисой). Причём проверила с трёх разных устройств. Разве это разные элементы? И даже если - когда ставила, то работало везде, а теперь вдруг не хочет. Что за мистика...

Я уже молчу о том, что регулярно исчезает css с мобильника. Захожу с планшета - работает, опять с телефона - нету (не каких-то конкретных элементов, а ровно всех). Кеш - не помогает. Сам на какое-то время появляется обратно, и сам исчезает. Проверила в другого мобильника - то же самое. Проверила на чужих дневниках - но пока не подловила момента, чтобы видела, что у других исчезал. Вот думаю, это у меня глюки или на сайте?

[Tenno Seremel]

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

#epigraph > a:first-child > div заменить на #epigraph > a > div

[Лис Хикару]

Tenno Seremel, ааааа, нашла где ошибка! Перечитала всю стену кодов - что-то пошло не так при пересохранении после последней правки, вот и вылез a:first-child обратно каким-то образом. Спасибо!)))

[Tenno Seremel]

Вообще, мне иногда кажется, что дайрям неплохо бы ввести какие-то отдельные классы, специально и только для стилизации пользователями. И побольше, побольше…

[Лис Хикару]

Tenno Seremel, ну в конце концов, надо на чём-то зарабатывать, да и привлекать чем-то людей тоже надо! Но с этим тут всегда было как-то туго))

[priest_sat]

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

[emercy]

priest_sat, тоже не могу добавить картинку в БИ. Сегодня что-то сломалось, думаю, лучше дизайн не трогать пока.

[emercy]

Через "изображения" под комментом добавляет.

[priest_sat]

emercy, *усиленно чешу репу* то есть, сначала нужно закинуть картинку в БИ, а потом каким-то чудом добавить в дизайн?

[Tenno Seremel]

У меня вот вчера и оформление-то зависало на сохранении, хотя по факту CSS сохранялся. Опять шатают что-то…

[emercy]

priest_sat, у меня в адаптивном фоновую картинку показывало, только если прописать ее в css.

body
{
	background-image: url("адрес") !important;
}

Только картинка должна именно в вашей в БИ, а из адреса надо убрать secure.diary.ru, чтобы начиналось с /userdir/ Этот обрезанный кусок вставляете в код. Какуминя:

body
{
	background-image: url("/userdir/1/5/0/3/1503064/86606720.jpg") !important;
}

Это будет фон всего дневника. Если надо другой фон для какого-то элемента, меняете body на то, где хотите, чтобы у вас был фон.
Например, в этом сообществе прописан еще фон для записей

#page-t { background-image: url("/userdir/3/5/0/6/3506984/86592462.gif") !important; }

Другие элементы можно посмотреть тут, а если надо больше, то в браузере — наводите мышь на нужное — правая клавиша мыши — просмотреть код. В выделенной строке кликаете на три точки слева, в выпадающем меню выбираете copy, затем selector, потом вставляете на место body.
Если хотите, чтобы ваш фон прокручивался вместе с контентом

{ background-attachment: scroll !important; }

Если хотите неподвижный фон:

body { background-attachment: fixed
 !important; }

Я точно не помню, какой он сейчас по умолчанию, по-моему, прокручивающийся.

[emercy]

Tenno Seremel, у меня и сегодня зависает.

[Tenno Seremel]

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

[emercy]

Tenno Seremel, где появился? в каталоге?

[Tenno Seremel]

emercy, на странице редактирования CSS оформления. Речь о превью т.е.

[priest_sat]

emercy, спасибо. Дома попробую это преодолеть.

[emercy]

Tenno Seremel, а, ясно. По ходу, оно туда весь контент страницы грузит, может, из-за этого и виснет?

[Tenno Seremel]

emercy, вероятно. Хотя, по идее, висеть не должно бы. Но висит…)

[priest_sat]

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

[Victory_Day]

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

[priest_sat]

Victory_Day, не, ну когда есть время, тогда и делаю.

[Victory_Day]

priest_sat, да понятно) выходные - они у всех выходные.

[priest_sat]

Victory_Day, у меня выходные - рабочие дни.

[Victory_Day]

priest_sat, тогда удачи с укрощением дизайна)

[priest_sat]

Victory_Day, спасибо.
в общем, остановлюсь на этом.

[emercy]

priest_sat,

но как теперь сделать посередине записи, а то их прибило на левую сторону.

Вот тут посмотрите, не оно?

Надо все-таки собрать все css-коды, что накидали, в один пост-шпаргалку

[priest_sat]

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

[priest_sat]

аха, натыкала код

#page-t
{
	float: none !important;
	margin-left: auto !important;
	margin-right: auto !important;
}
.ads-right
{
	display: none !important;
}

но теперь слева все равно не видно фоновой картинки.
печаль какая-то.

[emercy]

priest_sat, у нас стоит:

 .ads-right { display: none !important; }
 #page-t { width: 100% !important; }
 #page-c { width: 80% !important; }

Проценты подбирайте на свой вкус))

[priest_sat]

emercy, о, спасибо огромное!!!