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

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

pickaboo

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

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

Пишет My Precious:

10.12.2019 в 15:48

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

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

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

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

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

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

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

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

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

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

Лис Хикару

13.12.2019 в 18:52

nemv, а ясно! То-то я думаю, откуда на пк-версии эта пустая полоса справа, что за глюк?Оо кстати, там что-нибудь говорят на этот счёт, будут ли исправлять (глюк или фича?)

URL

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

Tenno Seremel

13.12.2019 в 18:57

Если речь об этом, то неизвестно :alles:

URL

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

Лис Хикару

13.12.2019 в 19:31

Tenno Seremel, мда... досадно, когда после работок становится хуже, чем было до них :crznope:

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

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

URL

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

Tenno Seremel

13.12.2019 в 20:00

Лис Хикару, сделайте скриншот — посмотрим. Чтобы можно было понять о чём именно речь.

Что касается кнопок.

Сортировка и открыть все моря — я делаю так (размер здесь указывается 19 пикселей, кроме окон до 768 пикселей, которым ставится 17):

#sortOrder
{
	background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0), #fff) !important;
	color: #000 !important;
	font-size: 19px !important;
}
#sortOrder > a > span::before
{
	color: #000 !important;
	opacity: 1 !important;
	transition: color 300ms !important;
}
#sortOrder > a:hover > span::before,
#sortOrder > a:focus > span::before
{
	color: #38424a !important;
}
@media not all and (min-width: 768px)
{
	#sortOrder
	{
		font-size: 17px !important;
	}
}

Что касается поднять/редактировать/удалить, то как-то так:

.postActionLinks > a > span::before {
    opacity: 1 !important;
    color: #008 !important;
}

Можно с помощью font-size также указать размер, если текущий не устраивает. Пример есть в предыдущем коде.

P.S. Под пикселями в CSS понимаются CSS пиксели, которые могут быть не равны реальным пикселями устройства (особенно на телефоне или прочих hidpi устройствах).

URL

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

Лис Хикару

13.12.2019 в 22:25

Не сработало на кнопку "редактировать" эпиграф и на "море" каждой отдельной записи (на "все" сработало)
И на поднять/редактировать/удалить сработало весьма странно, в мобильной не сработало (при этом в пк версии цвет поменялся):

Ага. Значит, лучше размер этих кнопок не трогать - иначе не известно что может получитсься у читателей...

А можно ли изменить цвет вот этой пунктирной линии, отделяющей динамично подгружаемые комментарии?

А вот скрин кто ещё не скруглился, нижний край "новой записи":

URL

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

Tenno Seremel

13.12.2019 в 23:09

Лис Хикару, каждую кнопку надо отдельно указывать, да

Ну как, можно сразу на все веб-иконки скопом, но оно их все поменяет, что не факт что хорошо.

#epigraph .i-edit::before,
#oamLink > span::before
{
	opacity: 1 !important;
	color: #008 !important;
}

> в мобильной не сработало
Должно было. Возможно это кэш.

Про углы. Или это:

#postsArea > .formcontainer
{
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

или это:

#page-t
{
	border-bottom-left-radius: 12px !important;
	border-bottom-right-radius: 12px !important;
}

Смотря где именно этот фон висит. Точнее не могу сказать, у меня иначе.

> А можно ли изменить цвет вот этой пунктирной линии, отделяющей динамично подгружаемые комментарии?

Судя по коду, как-то так:

background: radial-gradient(transparent 0px, transparent 1px, #008 3px, #008) -1px center / 4px 4px !important;

#008 можно заменить на свой вариант.

URL

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

Лис Хикару

14.12.2019 в 00:51

Tenno Seremel, должно было, но в том то и дело - что нет. Кэш, конечно, чищу при каждом действии - и самое занятное, что если бы только на разных устройствах по разному отображалось, но нет - на одном: в телефоне ведь можно поставить галочку "версия для ПК" и вот в пк версии цвет поменялся и у значков записи, и у комментариев, а в мобильной - только у записи! А на комментарии не действует. :rotate:

URL

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

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

14.12.2019 в 13:21

А я вот заметил, шо это - запятые между тегами пропали. А раньше были. Это связано с новым дизайном или это давно уже так?

URL

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

Tenno Seremel

14.12.2019 в 13:42

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

.atTag a:not(:last-child)::after {
    content: "," !important;
}

URL

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

Лис Хикару

14.12.2019 в 14:42

Tenno Seremel, кстати, а запятую эту на изображение можно поменять? Или поставить пробел перед запятой?

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

ТёмныйЭльфНавостриэль2010, нет, до подключения были запятые, а теперь исчезли со всех оформлений, и со старых, и с нового. Вопрос в другом - баг это или фича (как будет позже?)

URL

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

Лис Хикару

14.12.2019 в 14:47

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

URL

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

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

14.12.2019 в 15:11

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

URL

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

Tenno Seremel

14.12.2019 в 15:17

Лис Хикару, можно, но зачем? Перед знаками препинания пробел не ставится же.

Если нужно изображение, то так:

.atTag a:not(:last-child)::after {
	content: "" !important;
	display:inline-block !important;
	width: 32px !important;
	height: 32px !important;
	background: transparent url("/example.png") left top no-repeat;
}

Подчёркивание ссылок в контенте:

.post-inner a:not([class]){
	text-decoration: underline !important;
}

Подчёркивание ссылок полупрозрачными точками:

.post-inner a:not([class])
{
	border-bottom: 1px dotted rgba(0,0,200,0.7);
}

Подчёркивание ссылок полупрозрачными чёрточками:

.post-inner a:not([class])
{
	border-bottom: 1px dashed rgba(0,0,200,0.7);
}

URL

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

Лис Хикару

14.12.2019 в 17:15

Tenno Seremel, можно, но зачем?
Думала примереть вместо запятой какой-нибудь символ типа лапки или сердечка - и глянуть, как будет смотреться: Тема ✰ Тема ✰ Тема - в таком духе.

Спасибо!))))

URL

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

pickaboo

14.12.2019 в 17:27

Tenno Seremel, у меня такой вопрос: а можно фоновую картинку прописать кодом? В настройках диза ограничение 70 кб, маловато.

URL

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

Tenno Seremel

14.12.2019 в 18:02

pickaboo, я так и делаю, потому что оно вставляло картинку по HTTP вместо HTTPS… Не знаю, починили или нет. Но вообще:

body
{
	background-image: url("/userdir/6/7/8/5/67852/85382497.jpg") !important;
	background-attachment: scroll !important;
}

Можно по вкусу добавить background-position и background-repeat, если необходимо.

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

URL

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

pickaboo

14.12.2019 в 18:16

Tenno Seremel, спасибо, получилось :ura:

URL

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

Tenno Seremel

14.12.2019 в 18:17

pickaboo,

URL

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

pickaboo

14.12.2019 в 18:23

Кстати, у меня фоновая картинка на телефоне не отображалась, а когда прописала кодом - отобразилась :ura:

URL

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

Tenno Seremel

14.12.2019 в 18:27

pickaboo, возможно как раз потому, что она грузилась по HTTP на HTTPS, а сейчас браузеры такое начинают блокировать.

URL

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

Лис Хикару

14.12.2019 в 18:37

Tenno Seremel, там в правиле есть свойство content. Вставьте этот текст в кавычках вместо или в дополнение к запятой
Я так и планировала сделать, вопрос в другом - как сделать так, чтобы вставленный символ не шёл впритык к слову (названию темы, как это делает запятая). То есть достаточно будет поставить обычный пробел (на клавиатуре) и потом символ? Вот так: " ✰" (вместо",") Просто я почему-то думала, что пробел не распознается как пробел и символ будет впритык стоять...

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

URL

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

Tenno Seremel

14.12.2019 в 18:42

Лис Хикару, пробел достаточно, если дайрики его не вырежут. Если вырежут, то добавить к этим свойствам margin-left: 8px; Ну или сколько нужно.

Может, все таки, для изменить/удалить у комментариев отдельный код (а не тот де что за записей) в новом дизайне?

Не знаю, у меня одинаково… :alles:

И, кстати, можно ли прописать им центровку по правому краю?

.postActionLinks {
	float: right;
}

URL

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

Лис Хикару

14.12.2019 в 18:47

О, и у меня теперь на телефоне есть картинка!!!!!!! :woopie:

Починят там или нет и когда - это ещё вопрос, а пользоваться можно уже сейчас))

URL

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

Лис Хикару

14.12.2019 в 18:58

А цвет кнопок основного меню можно менять? (А то он по настройкам одинаковый с дополнительным)

URL

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

Tenno Seremel

14.12.2019 в 19:09

Лис Хикару, (почти) всё можно, зависит от приложенных усилий

.navbar .navbar-nav > li > a
{
	color: #000 !important;
}
.navbar .navbar-nav > li > a span.alt
{
	opacity: 1 !important;
}
.navbar .navbar-nav > li > a > span:first-child:before,
.navbar .navbar-nav > li .num > a
{
	color: #000 !important;
	opacity: 1 !important;
}

Вместо #000 можно выставить любой другой цвет. Если opacity не указывать, то цвета будут чуть бледнее указанных и будут меняться на «полный» цвет при наведении.

URL

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

Лис Хикару

14.12.2019 в 19:30

Tenno Seremel, Не знаю, у меня одинаково…
А на каком телефоне это проверяли? И какого они должны быть? Моря я вижу у вас чёрные, ваши удалить/править - соответсвенно не видно, а вот свои править/удалить в вашем дневнике я вижу стандартные серые. При этом при переключении в пк режим с того же телефона, они чёрные:

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

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

URL

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

Tenno Seremel

14.12.2019 в 19:34

Лис Хикару, у меня так:

.postActionLinks > a > span::before
{
	opacity: 1 !important;
	color: #000 !important;
}

Вроде и всё.

URL

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

Лис Хикару

14.12.2019 в 19:41

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

URL

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

Tenno Seremel

14.12.2019 в 19:45

Лис Хикару,
Кстати, центровка на комменты в мобильной версии тоже не действует!

??? На мобильных устройствах же обычно дайри занимают всю ширину. Какой это, кстати, браузер?

URL

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

Лис Хикару

14.12.2019 в 19:56

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

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

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

URL

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

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

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

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

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

Изображения

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