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

воскресенье, 20 апреля 2025

20:56

Баннеры

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

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

<div align="center"><a target=_blank href="https://originaldesign.diarybackup.space"><img src="https://i.ibb.co/3ykmMXf1/1.png" alt="1" border="0"></a></div>

<div align="center"><a target=_blank href="https://originaldesign.diarybackup.space"><a href="https://imgbb.com/"><img src="https://i.ibb.co/vC4TF5Yq/2.png" alt="2" border="0"></a></a></div>

<div align="center"><a target=_blank href="https://originaldesign.diarybackup.space"><img src="https://i.ibb.co/m5C70FJP/3.png" alt="3" border="0"></a></div>

<div align="center"><a target=_blank href="https://originaldesign.diarybackup.space"><img src="https://i.ibb.co/RGBrMDNZ/4.png" alt="4" border="0"></a></div>

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

URL

среда, 26 марта 2025

23:55

КОНСТРУКТОР ДЛЯ САМОСТОЯТЕЛЬНОГО СБОРА CSS

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

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

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

НАСТРОЙКИ

Дизайн: блочный
Навигационная панель: справа

Шрифт
Заголовок: жирный 19
Текст: обычный 16
Гарнитура: Georgia

Цвет текста
Заголовок: #a48856ff
Ссылка: #ddbc8bff
Запись: #37260cff
Оффтоп: #848181ff

Цвет фона и границ
Фон дневника: #ffffff00
Фон заголовка: #ffffff00
Фон записи: #ffffff00
Границы: #ffffff00

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/mtyqZ.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:250px!important;margin-bottom:0px;margin-left:15px!important;margin-top:0px; position:center!important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/y0vwP.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/-b3nJ.png) repeat;text-align:center;}
{--------------------RAZDELITELI--------------------}
.singlePost { background:url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/dqpH2.png) no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:0px !important;}
 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
.postContent .paragraph {background: none !important;padding: 0px !important;}
#post0 .paragraph {background: none !important;padding: 0px !important;}
#epigraph {background: none !important;padding: 0px !important;}
{--------------------LYSHNEE IZ MENU--------------------}
 #thisDiaryLinks, span.i-lock {display: none!important;}
 #myProfileLink,#albumLink,#authorAlbum,#allDiaryLink,#myLinks li, #rssLink, #authorLiks,  #photolibLink a, #pchs {display: none !important;}
 #more_login,#authorFav, #authorQuot , #subscribeEmail, #unsubscribeEmail, #myLinksLink {display: none;}
 #YaSearch, #authorRSS, #myAccountLink, #myLinks, #tagslistlink, #diaryInfo {display:none!important;}
 #diarySpiritLink, #diarySupportLink, #faqLink, #JournalFavorite.rss, #iAmQuit, #photolibLink, #myProfileLink, #albumLink, #postsCalendar, #headlineList, #rssLink a, #myQuotLink, #pchListLink, #communityCatalogueLink, #favListLink, #myCommunitiesLink, #randomDiaryLink, #mySFavLink {display:none!important;}
 #w18p {display: none !important;}
 .i-lock:before {display:none!important;}
div#login_form.menuSection span {display: none !important;}
{--------------------FIX BAGOV--------------------}
.menuSection {border:none!important;}
.singlePost {border:none!important;}
.singleComment {border:none!important;}

НАСТРОЙКИ

Дизайн: блочный
Навигационная панель: слева

Шрифт
Заголовок: жирный 19
Текст: обычный 16
Гарнитура: PT Serif

Цвет текста
Заголовок: #991427
Ссылка: #991427
Запись: #717186
Оффтоп: #4c4c4c

Цвет фона и границ
Фон дневника: #ffffff00
Фон заголовка: #ffffff00
Фон записи: #ffffff00
Границы: #ffffff00

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/R8zZN.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:15px!important;margin-bottom:0px;margin-left:250px!important;margin-top:0px; position:center!important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/4qmcu.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/4qmcu.png) repeat;text-align:center;}
{--------------------RAZDELITELI--------------------}
.singlePost { background:url(https://diary.space/resize/-/-/2/2/2/0/2220055/6r9Hf.png) no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:0px !important;}
 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
.postContent .paragraph {background: none !important;padding: 0px !important;}
#post0 .paragraph {background: none !important;padding: 0px !important;}
#epigraph {background: none !important;padding: 0px !important;}
{--------------------LYSHNEE IZ MENU--------------------}
 #thisDiaryLinks, span.i-lock {display: none!important;}
 #myProfileLink,#albumLink,#authorAlbum,#allDiaryLink,#myLinks li, #rssLink, #authorLiks,  #photolibLink a, #pchs {display: none !important;}
 #more_login,#authorFav, #authorQuot , #subscribeEmail, #unsubscribeEmail, #myLinksLink {display: none;}
 #YaSearch, #authorRSS, #myAccountLink, #myLinks, #tagslistlink, #diaryInfo {display:none!important;}
 #diarySpiritLink, #diarySupportLink, #faqLink, #JournalFavorite.rss, #iAmQuit, #photolibLink, #myProfileLink, #albumLink, #postsCalendar, #headlineList, #rssLink a, #myQuotLink, #pchListLink, #communityCatalogueLink, #favListLink, #myCommunitiesLink, #randomDiaryLink, #mySFavLink {display:none!important;}
 #w18p {display: none !important;}
 .i-lock:before {display:none!important;}
div#login_form.menuSection span {display: none !important;}
{--------------------FIX BAGOV--------------------}
.menuSection {border:none!important;}
.singlePost {border:none!important;}
.singleComment {border:none!important;}

НАСТРОЙКИ

Дизайн: блочный
Навигационная панель: слева

Шрифт
Заголовок: жирный 19
Текст: обычный 16
Гарнитура: Tahoma

Цвет текста
Заголовок: #BCE8FB
Ссылка: #BCE8FB
Запись: #D1C0D7
Оффтоп: #4c4c4c

Цвет фона и границ
Фон дневника: #ffffff00
Фон заголовка: #ffffff00
Фон записи: #ffffff00
Границы: #ffffff00

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/p46TR.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:15px!important;margin-bottom:0px;margin-left:250px!important;margin-top:0px; position:center!important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/hmhqT.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/wpUAb.png) repeat;text-align:center;}
{--------------------LYSHNEE IZ MENU--------------------}
 #thisDiaryLinks, span.i-lock {display: none!important;}
 #myProfileLink,#albumLink,#authorAlbum,#allDiaryLink,#myLinks li, #rssLink, #authorLiks,  #photolibLink a, #pchs {display: none !important;}
 #more_login,#authorFav, #authorQuot , #subscribeEmail, #unsubscribeEmail, #myLinksLink {display: none;}
 #YaSearch, #authorRSS, #myAccountLink, #myLinks, #tagslistlink, #diaryInfo {display:none!important;}
 #diarySpiritLink, #diarySupportLink, #faqLink, #JournalFavorite.rss, #iAmQuit, #photolibLink, #myProfileLink, #albumLink, #postsCalendar, #headlineList, #rssLink a, #myQuotLink, #pchListLink, #communityCatalogueLink, #favListLink, #myCommunitiesLink, #randomDiaryLink, #mySFavLink {display:none!important;}
 #w18p {display: none !important;}
 .i-lock:before {display:none!important;}
div#login_form.menuSection span {display: none !important;}
{--------------------FIX BAGOV--------------------}
.menuSection {border:none!important;}
.singlePost {border:none!important;}
.singleComment {border:none!important;}

НАСТРОЙКИ

Дизайн: блочный
Навигационная панель: справа

Шрифт
Заголовок: жирный 14
Текст: обычный 17
Гарнитура: Helvetica

Цвет текста
Заголовок: #26442C
Ссылка: #8bd48aff
Запись: #0E3431
Оффтоп: #4c4c4c

Цвет фона и границ
Фон дневника: #ffffff00
Фон заголовка: #ffffff00
Фон записи: #ffffff00
Границы: #ffffff00

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/_BVgF.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:250px!important;margin-bottom:0px;margin-left:15px!important;margin-top:0px; position:center!important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/ryvRI.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(https://static.diarybackup.space/userdir/2/2/2/0/2220055/KGNwg.png) repeat;text-align:center;}
{--------------------LYSHNEE IZ MENU--------------------}
 #thisDiaryLinks, span.i-lock {display: none!important;}
 #myProfileLink,#albumLink,#authorAlbum,#allDiaryLink,#myLinks li, #rssLink, #authorLiks,  #photolibLink a, #pchs {display: none !important;}
 #more_login,#authorFav, #authorQuot , #subscribeEmail, #unsubscribeEmail, #myLinksLink {display: none;}
 #YaSearch, #authorRSS, #myAccountLink, #myLinks, #tagslistlink, #diaryInfo {display:none!important;}
 #diarySpiritLink, #diarySupportLink, #faqLink, #JournalFavorite.rss, #iAmQuit, #photolibLink, #myProfileLink, #albumLink, #postsCalendar, #headlineList, #rssLink a, #myQuotLink, #pchListLink, #communityCatalogueLink, #favListLink, #myCommunitiesLink, #randomDiaryLink, #mySFavLink {display:none!important;}
 #w18p {display: none !important;}
 .i-lock:before {display:none!important;}
div#login_form.menuSection span {display: none !important;}
{--------------------FIX BAGOV--------------------}
.menuSection {border:none!important;}
.singlePost {border:none!important;}
.singleComment {border:none!important;}

ТЕПЕРЬ О ТОМ КАК СОБРАТЬ ПОДОБНОЕ ОФОРМЛЕНИЕ ИНДИВИДУАЛЬНО:

Мы берём за основу фоновый бэкграунд который вам нравится. Например с пинтереста. Подборка фонов ТЫК. Грузим его в свою БИ.

Для подложек ленты и меню выбираем из предложенных (по запросу могу дополнить). Обратите внимание, часть из них прозрачная часть нет. Для большей вариантивности. И конечно вы можете выбирать различные цвета и степень прозрачности для ленты и меню. Выбранный квадратик также грузим в свою БИ.
ПОДЛОЖКИ:
непрозрачные:

непрозрачные с текстурой:

полупрозрачные без текстуры:

полупрозрачные с текстурой:

Создаём новое оформление и настраиваем. Дизайн должен быть обязательно блочным! Коды немного отличаются из за положения меню.

Блочный дизайн. Меню слева:

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(ФОНОВАЯ КАРТИНКА) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:15px!important;margin-bottom:0px;margin-left:250px!important;margin-top:0px; position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(ПОДЛОЖКА) repeat;text-align:center;}

Блочный дизайн. Меню справа:

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(ФОНОВАЯ КАРТИНКА) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:250px!important;margin-bottom:0px;margin-left:15px!important;margin-top:0px; position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(ПОДЛОЖКА) repeat;text-align:center;}

Вставляем ссылки на картинки из своей БИ и переходим в стандартные настройки.
Важный шаг! Иначе чуда не случится.
Во вкладке Цвет фона и границ всё должно быть прозрачным:

Что бы у вас там ни было выставлено замените на #ffffff00.

Остальные оттенки можно выбирать вручную или по таблице.
Таблица цветов colorscheme.ru/html-colors.html Нас интересует HEX.
Цвета также можно подбирать по цветовому кругу с помощью тонких настроек: colorscheme.ru/

Чем можно дополнить оформление?

Если вам захочется разделители таким кодом можно добавить их в посты и убрать из эпиграфа:

.singlePost { background:url(РАЗДЕЛИТЕЛЬ) no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:0px !important;}
 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
.postContent .paragraph {background: none !important;padding: 0px !important;}
#post0 .paragraph {background: none !important;padding: 0px !important;}
#epigraph {background: none !important;padding: 0px !important;}

Примеры разделителей можно найти здесь.

Сократить меню можно таким кодом:

 #thisDiaryLinks, span.i-lock {display: none!important;}
 #myProfileLink,#albumLink,#authorAlbum,#allDiaryLink,#myLinks li, #rssLink, #authorLiks,  #photolibLink a, #pchs {display: none !important;}
 #more_login,#authorFav, #authorQuot , #subscribeEmail, #unsubscribeEmail, #myLinksLink {display: none;}
 #YaSearch, #authorRSS, #myAccountLink, #myLinks, #tagslistlink, #diaryInfo {display:none!important;}
 #diarySpiritLink, #diarySupportLink, #faqLink, #JournalFavorite.rss, #iAmQuit, #photolibLink, #myProfileLink, #albumLink, #postsCalendar, #headlineList, #rssLink a, #myQuotLink, #pchListLink, #communityCatalogueLink, #favListLink, #myCommunitiesLink, #randomDiaryLink, #mySFavLink {display:none!important;}
 #w18p {display: none !important;}
 .i-lock:before {display:none!important;}
div#login_form.menuSection span {display: none !important;}

Пофиксить полосы в неожиданных местах:

{--------------------FIX BAGOV--------------------}
.menuSection {border:none!important;}
.singlePost {border:none!important;}
.singleComment {border:none!important;}

ФИНАЛЬНЫЙ ВАРИАНТ ПОЛНОГО КОДА:

Для меню справа:

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(ФОНОВАЯ КАРТИНКА) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:250px!important;margin-bottom:0px;margin-left:15px!important;margin-top:0px; position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(ПОДЛОЖКА) repeat;text-align:center;}
{--------------------RAZDELITELI--------------------}
.singlePost { background:url(РАЗДЕЛИТЕЛЬ) no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:0px !important;}
 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
.postContent .paragraph {background: none !important;padding: 0px !important;}
#post0 .paragraph {background: none !important;padding: 0px !important;}
#epigraph {background: none !important;padding: 0px !important;}
{--------------------LYSHNEE IZ MENU--------------------}
 #thisDiaryLinks, span.i-lock {display: none!important;}
 #myProfileLink,#albumLink,#authorAlbum,#allDiaryLink,#myLinks li, #rssLink, #authorLiks,  #photolibLink a, #pchs {display: none !important;}
 #more_login,#authorFav, #authorQuot , #subscribeEmail, #unsubscribeEmail, #myLinksLink {display: none;}
 #YaSearch, #authorRSS, #myAccountLink, #myLinks, #tagslistlink, #diaryInfo {display:none!important;}
 #diarySpiritLink, #diarySupportLink, #faqLink, #JournalFavorite.rss, #iAmQuit, #photolibLink, #myProfileLink, #albumLink, #postsCalendar, #headlineList, #rssLink a, #myQuotLink, #pchListLink, #communityCatalogueLink, #favListLink, #myCommunitiesLink, #randomDiaryLink, #mySFavLink {display:none!important;}
 #w18p {display: none !important;}
 .i-lock:before {display:none!important;}
div#login_form.menuSection span {display: none !important;}
{--------------------FIX BAGOV--------------------}
.menuSection {border:none!important;}
.singlePost {border:none!important;}
.singleComment {border:none!important;}}

Для меню слева:

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(ФОНОВАЯ КАРТИНКА) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; }
{--------------------PODLOGKI--------------------}
#page-t{ padding: 20px 20px 20px 20px !important; margin-right:15px!important;margin-bottom:0px;margin-left:250px!important;margin-top:0px; position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0px;margin-left:0px!important;margin-top:0px; position:center!important; width: 200px !important; background: url(ПОДЛОЖКА) repeat;text-align:center;}
{--------------------RAZDELITELI--------------------}
.singlePost { background:url(РАЗДЕЛИТЕЛЬ) no-repeat; background-position:bottom; padding-bottom:80px !important;padding-top:0px !important;}
 #epigraph .postLinksBackg, #epigraph .singlePost {background: none !important;padding: 0px !important;}
 #epigraph .header {background: none !important;padding: 0px !important;}
.postContent .paragraph {background: none !important;padding: 0px !important;}
#post0 .paragraph {background: none !important;padding: 0px !important;}
#epigraph {background: none !important;padding: 0px !important;}
{--------------------LYSHNEE IZ MENU--------------------}
 #thisDiaryLinks, span.i-lock {display: none!important;}
 #myProfileLink,#albumLink,#authorAlbum,#allDiaryLink,#myLinks li, #rssLink, #authorLiks,  #photolibLink a, #pchs {display: none !important;}
 #more_login,#authorFav, #authorQuot , #subscribeEmail, #unsubscribeEmail, #myLinksLink {display: none;}
 #YaSearch, #authorRSS, #myAccountLink, #myLinks, #tagslistlink, #diaryInfo {display:none!important;}
 #diarySpiritLink, #diarySupportLink, #faqLink, #JournalFavorite.rss, #iAmQuit, #photolibLink, #myProfileLink, #albumLink, #postsCalendar, #headlineList, #rssLink a, #myQuotLink, #pchListLink, #communityCatalogueLink, #favListLink, #myCommunitiesLink, #randomDiaryLink, #mySFavLink {display:none!important;}
 #w18p {display: none !important;}
 .i-lock:before {display:none!important;}
div#login_form.menuSection span {display: none !important;}
{--------------------FIX BAGOV--------------------}
.menuSection {border:none!important;}
.singlePost {border:none!important;}
.singleComment {border:none!important;}

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

@темы: Кареглазый Демон, советы для самостоятельных

URL