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

[Victory_Day]

Пишет  quirischa:

11.12.2019 в 12:10

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

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

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

* * *

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

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

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

* * *

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

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

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

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

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

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

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

* * *

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

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

Comments

[priest_sat]

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

[Victory_Day]

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

[priest_sat]

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

[Victory_Day]

priest_sat,
поспрашивайте) вдруг удастся решить проблему)

[priest_sat]

Victory_Day, спасибки за поддержку!

[Victory_Day]

priest_sat, не за что) общая проблема у нас тут

[pickaboo]

А мне интересно, то что фото такое мильпиздрическое - это баг или фича? На кой заливать картинку 2000x2000, если она ужмется до размеров ногтя?

[priest_sat]

pickaboo, тот же вопрос.
и с аватарами все еще затык.

[Наталь13]

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

[pickaboo]

Наталь13, у меня на телефоне тоже не видно фоновой картинки. Эту проблему вроде уже внесли:
design2019.diary.ru/p218710215.htm

[pickaboo]

priest_sat, проблему с аватарами тоже внесли. Ждем-с..
design2019.diary.ru/p218708152.htm

[Наталь13]

pickaboo, спасибо не видела. ))

[priest_sat]

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

[Лис Хикару]

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

И цитирование убрали или это баг? Теперь не понятно, где заканчивается цитирование, а где начинается ответ, все в кашу, сложно читать...

[priest_sat]

благодаря Tenno Seremel моя днявка приобрела почти нормальный вид))) осталось разобраться с пустым полем справа. Уже вставляла присланный код - днявка растянулась, но мне это кажется некрасивым *да, я перебираю харчами*. За что точно спасибо Tenno Seremel - за нормальные аватарки, а не за мелкоту.

[pickaboo]

Лис Хикару, вроде бы было несколько постов, квириша сказал, что этим займутся. Ещё посмотрите этот пост:
diaryalive.diary.ru/p218702839.htm
Цитирование сначала вообще не работало, потом вернули всплывающую фразу, но все равно не везде корректно вставляется.

[Лис Хикару]

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

[Лис Хикару]

Да, по ссылке пишут об этой проблеме.
Но у меня пол дневника с ним, что же мне теперь исправлять все тысячи нерабочих тегов в сотнях записей?
Такчто надо чинить нерабочий тег. Или оставаться на старом дизайне((

[pickaboo]

Tenno Seremel, есть ли код для возвращения цитирования из небытия?

[pickaboo]

Лис Хикару, посмотрела сообщество, там про цитирование не написал только ленивый. Видимо, еще не починили полностью.

[Tenno Seremel]

pickaboo,

.post-inner .quote_text
{
	font-style: italic !important;
	color: #38424a !important;
}

[pickaboo]

Tenno Seremel, спасибо, вставила в дневнике, получилось!

[Лис Хикару]

XD Понятно. Наверно, можно вообше не дрыгаться, и спокойно подождать пока активисты переловят все недочеты.

[Victory_Day]

Tenno Seremel, на инсайд принесли код, как растянуть адаптив по ширине. кто-то написал, что поставил его в стайлиш и теперь красота. я не пойму, в стайлиш или в цсс его пихать надо? глянь, пжлст.
Пишет Гость:

14.12.2019 в 16:07

Котики Инсайда, если CSS проплачен, можно растянуть поле пошире, на ширину рекламного блока справа:

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

Тут если поставить не 100% а меньше, он растянется меньше, но будет по центру.

Или можно сделать чтобы контент был вообще во всю ширь, как можно было сделать на старых дизайнах:
.ads-right { display: none !important; }
#page-t { width: 100% !important; }
#page-c { width: auto !important; }
@media all and (min-width: 768px)
{
.avatar + .post-content
{
box-sizing: border-box !important;
width: calc(100% - 150px) !important;
padding-left: 16px !important;
padding-right: 0 !important;
}
#Journal .avatar + .post-content,
#JournalComments #postsArea .avatar + .post-content
{
padding-left: 0 !important;
width: auto !important;
}
}

Сорян, перепутал тег для второго кода

.ads-right { display: none !important; }
#page-t { width: 100% !important; }
#page-c { width: auto !important; }
@media all and (min-width: 768px)
{
.avatar + .post-content
{
box-sizing: border-box !important;
width: calc(100% - 150px) !important;
padding-left: 16px !important;
padding-right: 0 !important;
}
#Journal .avatar + .post-content,
#JournalComments #postsArea .avatar + .post-content
{
padding-left: 0 !important;
width: auto !important;
}
}

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

и что и где этот чувак перепутал... тоже не пойму

[Tenno Seremel]

Victory_Day, stylish это расширение браузера (можно применить на все подряд дневники, например). CSS в оформлении дайри это для своего дневника.

Эмм… diaryalive.diary.ru/p218696259.htm?from=0

[Victory_Day]

Tenno Seremel, я знаю про стайлиш. у меня вместо него темпер манки стоит. я поэтому и удивилась - чувак предложил код для цсс, а другой анон написал, что в стайлиш его запихнул =__= меня это запутало.

[Victory_Day]

Tenno Seremel, о, это твое принесли? я кстати пока еще этим не озаботилась (растягиванием), решила подождать, пока ты скажешь, что у тебя все готово, и тогда уже спрашивать, чо и как сделано. поэтому без понятия, что это было твое)

[Tenno Seremel]

Victory_Day, не исключено, хотя и с нуля это написать тоже несложно.

Растягивать уже более-менее можно. Там, правда, внутри какие-то костыли у дайрей Когда починят сами, будет менее геморройно. Но никто не знает когда это будет.

https://design2019.diary.ru/p218692606.htm?from=0
https://design2019.diary.ru/p218704475.htm?from=0

[Victory_Day]

Tenno Seremel, я в состоянии подождать) плюс мне сейчас и без того есть чем заняться)

[Лис Хикару]

А вот ещё из серии "сделать новый дизайн новым, но при этом чтобы все как было раньше")) можно ли вернуть классическую собачку перед ником?

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

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

И из другой серии - не то чтобы принципиально, но вдруг решаемо: что с id-картинкой (фотографией над эпиграфом). Зачем она такая милипусечная и можно ли увеличить? И что с ее прозрачностью? Раньше если не было фона у этой картинки, то его и не было, а теперь - заливает белым.