среда, 26 марта 2025 в 23:55Пишет Кареглазый Демон: А что если создать простой универсальный шаблон в котором можно разобраться и настроить под себя за полч...

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

01:15

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

Искатель @сокровищ

среда, 26 марта 2025 в 23:55

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

НАСТРОЙКИ

НАСТРОЙКИ

НАСТРОЙКИ

НАСТРОЙКИ

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

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

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

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

Блочный дизайн. Меню слева:
{--------------------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;}

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

Для меню справа:
{--------------------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;}

Для меню слева:
{--------------------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;}

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