Как настроить адаптивный дизайн дневника — @дневники: асоциальная сеть

среда, 11 декабря 2019

pickaboo

На дайри все хорошие,

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

Пишет My Precious:

10.12.2019 в 15:48

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

Попадаете сюда:
скрин

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

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

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

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

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

@темы: css, Полезное, Адаптивный дизайн

все записи пользователя в сообществе URL

U-mail Дневник Профиль

Tenno Seremel

14.12.2019 в 20:03

Лис Хикару, эмм… это немного другие элементы :lol:

URL

U-mail Дневник Профиль

Лис Хикару

14.12.2019 в 20:27

эмм… это немного другие элементы
А можно их перекрасить?
Просто у них в настройках это называется основное меню (там где можно выбрать цвет), а все остальное - дополнительное.
Странные названия, отсутсвие предпросмотра - ну полная инструкция как заблудиться в трёх соснах, в общем))
И как я вижу - лупа относится к той же группе элементов, что и центральные, но фон у неё как у навигационных кнопок слева. У меня теперь или эти боковые кнопки сливаются с фоном, или разводи взрыв цветов и их оттенков или выбирай слишком тяжёлый цвет для меню. Все три варианта какая не очень...

На мобильных устройствах же обычно дайри занимают всю ширину.
Я не о тексте, а о кнопках редактировать/удалить.
Что такие же кнопки, но в постах - перекрашиваются и центруются по правому краю, а они же, но в зоне комментариев - остаются серыми и идут сразу за датой (то есть на них никакие коды не действуют - ни цвет, ни центровка). Потому и думаю, что это какой-то другой элемент все таки.
Но при этом в пк версии он выглядит как то же элемент?
На трёх разных телефонах ( все три на андроиде), в двух разных браузерах так.
Мистика.

URL

U-mail Дневник Профиль

Costa Candela

15.12.2019 в 21:48

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

URL

U-mail Дневник Профиль

emercy

16.12.2019 в 03:06

Тоже спрошу. Все аватары в дневнике ужимаются до 100 в ширину. Это можно исправить с помощью css?

URL

U-mail Дневник Профиль

Tenno Seremel

16.12.2019 в 10:06

emercy, до 130, вроде. А так,

.avatar {
	padding-right: 0 !important;
}

URL

U-mail Дневник Профиль

Лис Хикару

16.12.2019 в 19:38

А чтоб вернуть подчёркивание more это какой код нужен?

И есть ли коды для смены цвета раскрывающегося меню (не значки, а подписи: дневники и прочее), для белого и красного на скриншоте:

URL

U-mail Дневник Профиль

Tenno Seremel

16.12.2019 в 19:52

Лис Хикару,

.LinkMore {
	text-decoration: underline !important;
}

> И есть ли коды для смены цвета раскрывающегося меню (не значки, а подписи: дневники и прочее), для белого и красного на скриншоте:

У меня есть стиль, который раскрашивает всё это светлым (как у меня в дневнике), но выковыривать из него детали сил сейчас

.navbar .dropdown-menu
{
	background-color: #fbfbfb !important;
	color: #000 !important;
}
.navbar .dropdown-menu a,
.navbar .dropdown-menu .checkbox-inline span
{
	color: #000 !important;
	opacity: 1 !important;
}
.navbar .dropdown-menu a:hover,
.navbar .dropdown-menu a:focus
{
	text-decoration: underline !important;
}
.navbar .navbar-nav > li.open::after,
.navbar .navbar-more > li.open::after
{
	border-bottom-color: #fbfbfb !important;
}
.navbar .dropdown-menu .btn-plain,
.navbar .dropdown-menu .dropdown-header
{
	color: #000 !important;
	font-weight: bold !important;
}
.navbar .dropdown-menu [class^="i-"]:not(.close)::before,
.navbar .dropdown-menu [class*=" i-"]:not(.close)::before
{
	color: #838383 !important;
	opacity: 1 !important;
}
.navbar .i-close::before
{
	color: #000 !important;
}
.navbar .white
{
	color: #38424a !important;
}

URL

U-mail Дневник Профиль

Лис Хикару

16.12.2019 в 20:38

Ух ты! Спасибо) :dlove:

Методом тыка наковыряю сама, много - не мало XD

URL

U-mail Дневник Профиль

emercy

16.12.2019 в 21:35

Tenno Seremel, спасибо! :dlike:

URL

U-mail Дневник Профиль

emercy

22.12.2019 в 18:22

Costa Candela, как прописать цвет при наведении?
Если на все кнопки одинаково:

.btn:hover { color: #ffffff !important; }

URL

U-mail Дневник Профиль

Costa Candela

22.12.2019 в 20:11

emercy, спасибо! Я уже сама разобралась, но все равно спасибо)

URL

U-mail Дневник Профиль

Mika Dawnray

01.01.2020 в 14:54

С новым годом всех!))

А я с насущным. У меня после недавних появлений поля для аватара на главной странице дневника вылезла большая прореха справа между наполнением поста и его границей. Я попыталась убрать его с помощью кода, что был выложен Tenno Seremel:

.avatar + .post-content {
	width: calc(100% - 150px) !important;
}

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

.post-content {width: 100% !important;}

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

URL

U-mail Дневник Профиль

emercy

01.01.2020 в 16:12

Mika Dawnray, а вы смотрели в инспекторе, может, там padding или margin стоит?

URL

U-mail Дневник Профиль

Mika Dawnray

01.01.2020 в 16:23

emercy, смотрела, пока нашла только появившиеся вместе с этой дырой паддинги с обеих сторон по 20px, но их оставила ибо мне нравится, как выглядит. А вот с этим огромным сдвигом ещё не нашарилось ничего.

URL

U-mail Дневник Профиль

Tenno Seremel

01.01.2020 в 21:52

Mika Dawnray, это потому что аватара-то нет (на главной дневника, но не сообщества), а блок для неё — есть. Логика уровня дайрей :lol:

Добавляем после этого

#Journal #postsArea > .item:not(#epigraph) > .postContent > .post-content {
	width: auto !important;
	float: none !important;
}

URL

U-mail Дневник Профиль

Mika Dawnray

01.01.2020 в 22:10

Tenno Seremel, о даа, спасибо огромное! : )

URL

U-mail Дневник Профиль

Mika Dawnray

01.01.2020 в 22:16

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

URL

U-mail Дневник Профиль

Tenno Seremel

01.01.2020 в 22:26

Mika Dawnray, значит дайри их скрыли CSS'ом… У меня тоже раньше было. А я ведь предлагаю им делать больше разных осмысленных классов, но кто ж меня слушает — сами себя обманули с этими динамически загружаемыми комментариями :lol:

Неплохо было бы это в баги отнести, ну а пока так:

#Journal .commentsBox .avatar {
	display: flex !important;
}

URL

U-mail Дневник Профиль

Mika Dawnray

01.01.2020 в 22:33

Tenno Seremel, тысяча благодарностей! :beg:

URL

U-mail Дневник Профиль

Tenno Seremel

01.01.2020 в 22:34

Mika Dawnray, :friend:

URL

U-mail Дневник Профиль

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

01.01.2020 в 22:36

И чо, скоко думаете по времени это всё будет устаканиваться?
Потому что новый дизай готовили весь прошлый год. Теперь чо - допиливать будут десять лет? А жить-то когда? :gigi:

URL

U-mail Дневник Профиль

Tenno Seremel

01.01.2020 в 22:39

ТёмныйЭльфНавостриэль2010, вангую: ещё год минимум, так что живи уже сейчас :evil:

URL

U-mail Дневник Профиль

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

01.01.2020 в 23:29

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

URL

U-mail Дневник Профиль

nemv

02.01.2020 в 00:43

Tenno Seremel, Mika Dawnray, а можно полностью код, который решает проблемы с аватарами и вот этим пустым полем справа?
Я пытался собрать по комментам, в итоге у меня получилось что-то совсем не то - текст отказался не рядом с аватарами, а под ними причём и в дневнике и в избранном...

URL

U-mail Дневник Профиль

nemv

02.01.2020 в 00:52

Хотя нет, вроде разобрался, но надо ещё посмотреть, не вылезло ли чего

URL

U-mail Дневник Профиль

Tenno Seremel

02.01.2020 в 00:53

nemv, ну, эээ…

.avatar + .post-content {
	width: calc(100% - 150px) !important;
}
#Journal #postsArea > .item:not(#epigraph) > .postContent > .post-content {
	width: auto !important;
	float: none !important;
}
#Journal .commentsBox .avatar {
	display: flex !important;
}

Или что именно ломается?

Вообще, мой CSS сейчас выглядит вот так (это до того, как дайрики его переформатируют в кучку): https://paste.debian.net/hidden/53ff6ff1/ :alles:

URL

U-mail Дневник Профиль

nemv

02.01.2020 в 01:04

Tenno Seremel, я после того как повертел несколько раз, получил такое:

 {-----------Показать аватары в динамических комментах-----------}
 #Journal .commentsBox .avatar { display: flex !important; }
 {-----------Убрать пустое поле из-за аватар на главной дневника-----------}
 #Journal #postsArea > .item:not(#epigraph) > .postContent > .post-content {  float: none !important; width: 100% !important; }

Вроде получилось то же самое. Нет? Или где я накосячил?

URL

U-mail Дневник Профиль

Mika Dawnray

02.01.2020 в 08:34

nemv, Tenno Seremel, у меня в итоге вот это вышло:

{----------------------------Убираем прореху справа от контента---------------------------}
 .avatar + .post-content {width: calc(100% - 150px) !important;}
 #Journal #postsArea > .item:not(#epigraph) > .postContent > .post-content {width: auto !important; float: none !important;}
 #Journal .commentsBox .avatar {display: flex !important;}

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

Так, а если убрать это:

 .avatar + .post-content {width: calc(100% - 150px) !important;}

как у nemv, тогда всё хорошо, кроме того, что в динамичных комментах имя встаёт не над авой, а рядом с ней и не всегда его видно, оно попадает под дату комментария. Это строка лишняя у меня получается?)

URL

U-mail Дневник Профиль

Tenno Seremel

02.01.2020 в 12:56

Mika Dawnray, вообще, я задаю ширину для .post-content только если доступное пространство не менее 768 пикселей:

@media all and (min-width: 768px)
{
	.avatar + .post-content
	{
		box-sizing: border-box !important;
		width: calc(100% - 150px) !important;
	}
}

Там на мобильных устройствах аватарка сверху, а текст под ней, а не рядом.

URL

U-mail Дневник Профиль

nemv

02.01.2020 в 18:53

Tenno Seremel, да вроде оно так и получается. Я не ориентировался на ширину доступного пространства а всё равно оно так

URL

U-mail Дневник Профиль

← Предыдущая 1 2 3 4 5 Следующая → Последняя

Добавить комментарий

Расширенная форма

Использовать аватар

Изображения

Подписаться на новые комментарии