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

[originaldesign]

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

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

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

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

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

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/4gR1b.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:0margin-left:15px!important;margin-top:0 position:center!important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/b9Osj.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 position:center!important; width: 200px !important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/b9Osj.png) repeat;text-align:center;}
{--------------------RAZDELITELI--------------------}
.singlePost { background:url(https://diary.ru/resize/-/-/2/2/2/0/2220055/4ayQi.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;}

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

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

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

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

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/uaoxr.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:0margin-left:250px!important;margin-top:0 position:center!important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/tkzbC.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 position:center!important; width: 200px !important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/tkzbC.png) repeat;text-align:center;}
{--------------------RAZDELITELI--------------------}
.singlePost { background:url(https://diary.ru/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;}

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

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

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

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

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/xFz8w.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:0margin-left:250px!important;margin-top:0 position:center!important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/F6cgS.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 position:center!important; width: 200px !important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/F6cgS.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;}

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

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

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

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

{--------------------FONOVAYA KARTINKA--------------------}
body { background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/pkYTI.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:0margin-left:15px!important;margin-top:0 position:center!important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/Z4mvC.png) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 position:center!important; width: 200px !important; background: url(https://diary.ru/resize/-/-/2/2/2/0/2220055/bfB2N.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;}

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

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

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

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

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

{--------------------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:0margin-left:250px!important;margin-top:0 position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 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:0margin-left:15px!important;margin-top:0 position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 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:0margin-left:15px!important;margin-top:0 position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 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:0margin-left:250px!important;margin-top:0 position:center!important; background: url(ПОДЛОЖКА) repeat;}
#side { padding: 10px 10px 10px 10px !important; margin-right:0px!important;margin-bottom:0margin-left:0px!important;margin-top:0 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;}

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