Оформления для простых и улучшенных аккаунтов 2025

суббота, 08 февраля 2025

00:28

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для простого аккаунта за авторством [J]Спящий Эльф[/J], спасён неравнодушным ПЧ.
Благодарим Найотри.

НАСТРОЙКИ

@темы: простые аккаунты

URL

пятница, 07 февраля 2025

23:43

Новогодний CSS в общее пользование

все записи пользователя в сообществе Огненный Бес

Скромник с чертиками в глазах

ДЕТАЛИ

НАСТРОЙКИ

запись создана: 24.11.2017 в 01:16

Вопрос: Нравится дизайн?

1. Да	62	(86.11%)
2. Нет	2	(2.78%)
3. Надел	8	(11.11%)



Всего:	72 Всего проголосовало: 67

@темы: свободный доступ

URL

19:09

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для улучшенного аккаунта за авторством Огненный Бес.

НАСТРОЙКИ

ИНСТРУКЦИЯ ПО УСТАНОВКЕ

@темы: свободный доступ

URL

18:19

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для простого аккаунта за авторством [J]Спящий Эльф[/J], спасён неравнодушным ПЧ.
Благодарим Найотри.

НАСТРОЙКИ

@темы: простые аккаунты

URL

18:11

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для простого аккаунта за авторством Кареглазый Демон, спасён неравнодушным ПЧ.
Благодарим Найотри.

НАСТРОЙКИ

@темы: простые аккаунты

URL

четверг, 06 февраля 2025

20:13

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для улучшенного аккаунта за авторством Огненный Бес.

НАСТРОЙКИ

ИНСТРУКЦИЯ ПО УСТАНОВКЕ

@темы: свободный доступ

URL

19:22

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для простого аккаунта за авторством Огненный Бес.

НАСТРОЙКИ

@темы: простые аккаунты

URL

16:29

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для простого аккаунта за авторством Огненный Бес.

НАСТРОЙКИ

@темы: простые аккаунты

URL

04:25

Про темы записей.

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

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

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

 #TagsList{font-size:80% !important;display:block !important;visibility:visible !important;}

Список можно убрать совсем.

 #TagsList ul li:nth-of-type(-n+20) {display: none;}

Если задать число меньше 20 останется несколько тем записей. Однако не с большим количеством постов.

 #TagsList ul li:nth-of-type(-n+10) {display: none;}

Темы записей можно расположить в два столбика. Даже при боковом меню.

 #tagslistlink ul {column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;}

А если добавить это будут еще и выплывать.

 #TagsList{ padding-top: 15px; position:relative !important; bottom:15px; display:block !important; visibility:visible !important; height:0px; overflow:hidden !important; margin:0 !important; -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease !important; -o-transition: all 1.0s ease;}
 #TagsList:hover{height:100%; width: 200px !important; -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease !important; -o-transition: all 1.0s ease; padding: 15px 0; float:left;}
 #tagslistlink ul li {width: auto !important;}

С помощью этого кода можно вынести выпадающий список тем за пределы меню и зафиксировать на странице.

#TagsList ul {height: 100% !important; position: fixed !important;padding:0px;border: 12px solid #B6A08B; padding:0px;background:#fff;z-index: 4; text-align: center;width: 200px;left:232px;}
 #tagslistlink ul {padding: 10px !important; }
 #TagsList li { padding:0px !important;}
 #tagslistlink #TagsList {position: absolute; top: 0px; left: 0px !important;padding: 10px 0px 0px 0px !important;}
 #tagslistlink:hover #TagsList {position: absolute; top: 0px; left: 0px !important;margin:10px 0px 0px 0px !important;padding: 0px 0px 0px 0px !important;}

Передвигать вверх-вниз через padding и margin из последних двух строк. Значения должны совпадать чтобы меню не плясало.

Лично мне темы записей милее в верхнем выпадающем меню.
Оставим белый фон и обводку из предыдущего примера. Зададим два столбика и отступ строчкам, уменьшим шрифт.

#TagsList ul {border: 12px solid #B6A08B;background:#fff;z-index: 4; text-align: center; width: 600px; text-align: center;line-height:13px;column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;font-size: 80%;}

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

#TagsList ul {border: 12px solid #B6A08B;background:#fff;z-index: 4; text-align: center; width: 600px; text-align: center;line-height:13px;column-count: 2; -webkit-column-count: 2; -moz-column-count: 2;font-size: 80%;}
 #TagsList li { padding:0px !important;}
 #tagslistlink #TagsList {position: absolute; top: 50px; left: 100px !important;}
 #tagslistlink:hover #TagsList {position: absolute; top: 50px; left: 100px !important;}

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

 #TagsList { display: block!important; visibility: visible!important; }
 #TagsList li:last-child { position: absolute; top: 180px; left: Xpx; }
 #TagsList li:last-child a { position: relative; width: XXpx; height: YYpx; display: block!important; }
 #TagsList ul li:not(:last-child), #tagslistlink a { display: none!important; }

@темы: советы для самостоятельных

URL

02:28

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Дизайн для простого аккаунта за авторством [J]Спящий Эльф[/J], спасён неравнодушным ПЧ.
Благодарим Найотри.

Два варианта оформления. Тёмный и светлый.

НАСТРОЙКИ

@темы: простые аккаунты

URL

среда, 05 февраля 2025

22:27

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Дизайн для простого аккаунта за авторством Кареглазый Демон, спасён неравнодушным ПЧ.
Благодарим Найотри.

НАСТРОЙКИ

@темы: простые аккаунты

URL

21:33

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Более 50 бесшовных новогодних фонов для простых аккаунтов.
63209985

СМОТРЕТЬ ОСТАЛЬНЫЕ

@темы: простые аккаунты

URL

20:55

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Подборка бесшовных фонов спасённых неравнодушным ПЧ. Благодарим Найотри.

СМОТРЕТЬ ОСТАЛЬНЫЕ

@темы: простые аккаунты

URL

02:31

все записи пользователя в сообществе Демон Фотошопа

Воля, вера и воображение.

Раз уж у сообщества появились планы, стоит ими поделиться.

Начнём с плохой новости. Восстановить 90% контента не получится — старые файлы утеряны, а прежние мастера нас покинули. Но удалять 15-летнюю историю тоже не хочется, поэтому, листая сообщество, можно наткнуться на дисклеймер: дальше "мёртвый лес".

Хорошая новость — часть материалов всё же можно вернуть. Мы нашли более 20 CSS-оформлений, которые будут доработаны и выложены в свободный доступ. Процесс уже запущен, так что в сообществе будут появляться исправленные дизайны.

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

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

Из старых мастеров у нас остался один бессмертный и вечный Кареглазый Демон. Поддержите его морально — он этого заслуживает.

@темы: Административное

URL

пятница, 31 января 2025

20:14

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Неприлично красивый диз в котором оформлены мелкие детали. Меню выплывает сверху. Лишние пункты меню удалены. Настроен вид от ПЧ. Естественно вся эта красота адаптивна. Олень внизу слева - кнопка наверх. Оформлены комментарии, цитаты, ссылки. Курсор превращается в золотое перо. Отдаю в свободное пользование.

ЕЩЁ СКРИНЫ

НАСТРОЙКИ

ИНСТРУКЦИЯ ПО УСТАНОВКЕ

@темы: свободный доступ

URL

четверг, 30 января 2025

16:13

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Монохромный диз в общее пользование. Акцентный цвет алый. В него окрашиваются ссылки при наведении. Все изображения становятся чёрно-белыми по умолчанию. При наведении плавно приобретают цвет.

НАСТРОЙКИ

ИНСТРУКЦИЯ ПО УСТАНОВКЕ

@темы: свободный доступ

URL

суббота, 25 января 2025

22:21

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Кто нибудь помнит что на дайрах можно оформлять и обычные дневники тоже) Для этого вам нужен чёткий образ атмосферы своего дневника, примерная цветовая палитра... И знакомый демон фотошопа. :evil:

Диз моему дорогому [J]Ver.V[/J].

Для тех кто желает познакомиться имейте в иду что я также демон тщеславия. А потому принимаю подношения в виде неприкрытой лести и восхищения.

@темы: простые аккаунты

URL

суббота, 04 января 2025

03:35

Разделители.

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

Возможность прописать кодом разделители это еще одна приятная возможность CSS)
Отдельного селектора, отвечающего за пространство между постами и комментариями не существует. Зато можно задавать фон самого поста.
Если бэкграунд повторяющийся получится заливка. Текстурой, полупрозрачной подложкой или просто цветом по вашему желанию.
А если прописать картинку без повторения и задать ей положение по краю поста она прилепится справа, слева, сверху или внизу. Последние два случая как раз используются для имитации разделителей.
Конечно можно и в бесплатнике исхитриться. Допустим прописав нужный код с картинкой через сервис настраиваемых кнопок (редактор). Но в этом случае вам придется жать на кнопку вручную в конце каждого поста. А если страниц в вашем дневнике много пере сохранять ранние посты вы просто замучаетесь.

Сам код очень простой. Даже не нужно прописывать ширину и высоты картинки.

 .singlePost { background:url('картинка разделителя из вашей БИ') no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:60px !important;}

Расшифровка:
каждый пост {(картинка) не повторять; позиция внизу; отступ снизу; отступ сверху}

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

 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
 #post0 {height:0px;padding: 0px !important;}

Конечный код:

.singlePost { background:url('картинка разделителя из вашей БИ') no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:60px !important;}
 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
 #post0 {height:0px;padding: 0px !important;}

Примеры разделителей:

ЕЩЁ

запись создана: 03.12.2017 в 17:16

@темы: советы для самостоятельных, простые аккаунты

URL

четверг, 02 января 2025

21:48

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

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

Идём на сайт mus.zvukofon.com/ Я пробовал и другие, но формат ссылки не подходит к сожалению. Если кто дополнит в комментах будет здорово.

Находим понравившуюся песню. Дальше правой кнопкой по иконке скачивания и выбираем "копировать ссылку".
Вставляем в пост этот код:

<div align="center"><audio src="сюда ссылку на мелодию" controls="controls"></audio></div>

Получаем вот такое:

@темы: лайфхаки, плееры, советы для самостоятельных

URL

21:10

все записи пользователя в сообществе Кареглазый Демон

✎ Ко мне на "вы", шёпотом и с придыханием

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

Реализуется при помощи двух несложных строчек кода, одна из которых прописывается в настройках, там где "Эпиграф, фото, список ПЧ", а вторая добавляется в CSS код оформления.
Допустим вам хочется поставить в дневнике ёлку по клику на которую откроется пост с поздравлениями для ваших ПЧ.

1. Вставляем в эпиграф новый id

<div id="lyboie imya"><a href="https://www.адрес страницы.ru/" target=_blank><img src="адрес картинки на файлообменнике"></a></div>

2. Теперь новому id в конце кода вашего CSS оформления прописываем свойства так, как если бы он был стандартным пунктом дайровского меню:

 #lyboie imya { position: fixed !important; bottom: -20px!important;left: 100px!important;z-index:4;}

В результате получаем:

Этим способом можно обвешать весь дневник баннерами-отсылками на всё что вам заблагорассудится.

запись создана: 04.11.2016 в 21:19

@темы: советы для самостоятельных

URL

Последние 1 2 3 4 5 6 …20 …40 …83


Запомнить