Как настроить адаптивный дизайн дневника

[pickaboo]

Пишет  My Precious:

10.12.2019 в 15:48

Для начала нажмите у себя на вкладке с дайри ctrl+F5, если ещё не.
Дальше зайдите по этой ссылке (это "Настройки" -> "Дизайн дневника").

Попадаете сюда:

скрин

Выбираете там "Редактировать". Попадаете сюда:

скрин

Там выбираете "Дизайн: адаптивный" и жмете "Сохранить".
Если это не был ваш текущий дизайн, то на предыдущей вкладке выберите его и тоже нажмите "Сохранить".

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

upd. Если слились цвета:

Пишет  My Precious:

10.12.2019 в 16:08

в "редактировать" вам надо сюда:

скрин

Выбираете вкладку "Цвет текста", а дальше - цвет, которым будет текст меню, он называется просто "Меню". У вас он сейчас черный на черном фоне, поэтому не видно.

К слову, на соседней вкладке, которая "Цвет фона и границ" задается цвет фона меню: "Фон меню осн." - это тот что по бокам, а "Фон меню доп." - тот, который в середине. Само собой, от цвета текста меню они оба должны отличаться)

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

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

Кто уже подключил, кидайте сюда скрины или ссылки на свой дневник (если открыто). Очень интересно, у кого что получилось.

Comments

[ТёмныйЭльфНавостриэль2020]

У меня дизай "Органайзер", при переключении на адаптивный, всё уехало в разные стороны, так что вернул обратно блочный.

[pickaboo]

ТёмныйЭльфНавостриэль2010, не думаю, что большинство уже существующих css будут сочетаться с адаптивным, нужно делать новые.

[nemv]

Я себе настроил новый, допиливал через CSS
Дневник туточки  nemv

[pickaboo]

nemv, здорово, очень понравилось

[Hineko-chan]

Дизайн не платный, но если взять одни цвета для верхней плашки, то выходит не уезжающая разметка. На мой взгляд получилось миленько - lightning-juice.diary.ru/

[My Precious]

Hineko-chan, розовый не вырвиглаз "как Амбридж", а по-людски - и правда хорошо получилось

[pickaboo]

Hineko-chan, свежо, ярко - мне нравится!

[Фризыч]

Рыжий кот с прошлого дизайна не в тему немного, но очень уж он мне нравится, а так как-то так получилось: dangerouz.diary.ru =)

[Лис Хикару]

Я вот тоже порылась в настройках и перекроила старый дизайн под новый.
Было:


Стало:


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

[pickaboo]

Фризыч, очень празднично получилось

Лис Хикару, мне кажется, адаптивный (на скриншоте) получился более впечатляющим, потому что больше места осталось под фон

[Лис Хикару]

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

[nemv]

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

[My Precious]

Фризыч, котики шикарные, оба)

[pickaboo]

Лис Хикару, увы, я нуб в CSS. За кодами - к Tenno Seremel

[Tenno Seremel]

Лис Хикару, вообще, из неадаптивного адаптивный такой же получить сложно (да и сайдбара нет), но если просто добавить к уже имеющимися, то ничто не мешает указать, например, border-radius: 3px !important; на нужном элементе.

// При условии отсутствия багов со стороны дайрей.

[Лис Хикару]

Да, наверно, неподходящий момент сейчас разбираться в css, придется подождать, пока с главными глюками разбирутся. В любом случае - спасибо! Буду теперь иметь в виду, что вопрос не так ужасен, как я опасалась)
Tenno Seremel, уже имеющиеся - это значит, что если подключить css, то там уже будет виден весь код существующего дизайна?
И нужный элемент - это который?
Хотя чувствую я, что для адаптативного все равно придется ждать новые решения... и не вовремя я с этим...

[Tenno Seremel]

Лис Хикару, CSS самих дневников нигде не показывается (ну, по ссылкам можно посмотреть, конечно) и не редактируется. Эта услуга позволяет добавлять свой CSS в дополнение к дайриковому (который тоже разный, в зависимости от того, какой тип дизайна выбран).

Нужный элемент — тот, который хочется изменить, очевидно

[Лис Хикару]

Tenno Seremel, я так поняла, что просто вставить в окошечко на странице дизайна дополнительные коды и сохранить?
Если я хочу сгладить углы постов - это какой элемент? Вот в адаптативном все всплывающие меню, даже кнопки "отправить" - со сглаженными углами. А сами квадраты постов и комментариев несочитаемое острые. Что дописать кроме border-radius: 3px !important; в код?
Уже не первый раз пыталась прочитать "подсказки", но они больше путают, чем помогают.

[Tenno Seremel]

Лис Хикару, да.

Хм…

.day-header {
	border-top-right-radius: 12px !important;
	border-top-left-radius: 12px !important;
}
.post-list > .item {
	border-radius: 12px !important;
}
.post-list > .day-header + .item {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

Это скруглит также и комментарии, насколько я помню.

[Лис Хикару]

Tenno Seremel, правда работает! Спасибо))
Оно скруглило основные блоки, а какие-то остались вне его действия - даже не знаю как их назвать одним словом..рабочие?
Какие-то блоки вот этого нового адаптативного дизайна:


И вот ещё тут есть сама зона комментариев внутри общего блока:

[Tenno Seremel]

Лис Хикару, очевидно, они не являются постами

.post-list > #commentsArea_title + a + .item {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}
#commentsArea_title,
#addCommentArea_title {
	border-top-left-radius: 12px !important;
	border-top-right-radius: 12px !important;
}
#addCommentArea > .formcontainer {
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

Как-то так, я думаю. Это в дополнение к тому, что выше.

[Лис Хикару]

Ух ты! На комментарии, открывающиеся в отдельной вкладке - сработало! А те что быстрый просмотр - из другого теста. И вот эта верхняя плашечка с сортировкой записей тоже не хочет быть как все (да сколько там элементов?Оо)

[Tenno Seremel]

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

.commentsFormBox {
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}
#sortOrder {
	border-radius: 12px !important;
}
.pagination {
	border-radius: 12px !important;
}

[Tenno Seremel]

Верх динамических комментариев потерялся:

.commentsBox {
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
    overflow: hidden !important;
}

[Лис Хикару]

Вааах, спасибо!!!
Эти коды явно не для простых смертных)) и теперь все гармонично по углам:

[nemv]

Ух ты! Как раз думал об этом, что неплохо бы, а тут уже всё написали! Спасибо!

[Лис Хикару]

nemv, А каким кодом вы сделали, чтобы были поля слева-справа?

[nemv]

Лис Хикару, не понял. Какие поля?

[Лис Хикару]

Не знаю, как они грамотно называются - отступы по левому и правому краю, вот эти:


А у меня они упираются в стенку:


И ещё вот только заметила - что нижний край у "новой записи" не скруглился. Это уже нельзя скруглить или просто ещё один код нужен?

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

[nemv]

Лис Хикару, а, ну это я просто не на 100% растянул, когда убирал блок с рекламой

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