Тема для дневников: Brown sky / Red sky

[Tenno Seremel]

Скриншот 1: https://i.imgur.com/O46LorY.png
Скриншот 2: https://i.imgur.com/7jjOK43.png

Никакого смысла в названиях нет.

Разная информация

Стиля для картинки в шапке нет. Просто в эпиграфе в самом начале пишете ссылку с картинкой и указываете стиль float: right; margin-top: числоpx, если нужно.

Надпись 18+ можно поставить, написав где угодно в эпиграфе:

<div class="age-warning">18+</div>

Если написать что-то длиннее, то нужно редактировать стиль .age-warning там (в em’ах) ширина указана (width), и на сколько сдвиг от центра (left).

Красная кнопка

Также в стиле есть класс decorated-button, с помощью которого можно большие красные кнопки вставлять:

<a class="decorated-button" href="http://diary-development.diary.ru/">Показать всё, что скрыто</a>

↓
Показать всё, что скрыто

Цитата

Есть стиль для blockquote, который ставит большую кавычку слева от цитируемого (есть на скринах).

Шрифт

На скринах выбран шрифт Arial (ну или точнее у меня он отображается с помощью Arimo). Заголовок 20, текст 18.

Если что пропущено или баги — пишите в комментариях.

// Фон страницы выберите какой-нибудь почеловечнее, я свой новый пока не подберу никак

1. Brown sky

Скриншот: https://i.imgur.com/O46LorY.png

#side {
	background: #fff !important;
}
#side > .bordered {
	margin-bottom: 0 !important;
}
#side > #NContentFrame {
	border: none !important;
}
#postsArea {
	border: none !important;
	padding: 0 !important;
}
.singlePost {
	background: #fff !important;
	border: 1px solid #4a4338 !important;
	padding: 0 !important;
}
.singlePost:not(#epigraph) ~ .singlePost {
	margin-top: 1em !important;
}
.postTitle {
	padding: 0 !important;
	background: #4a4338 !important;
	color: #fff !important;
	margin-bottom: 1em !important;
}
.postTitle > * {
	display: inline-block !important;
	vertical-align: middle !important;
	padding: 8px 16px !important;
}
.postTitle > span {
	background: #fff !important;
	color: #4a4338 !important;
	border-bottom: 1px solid #4a4338 !important;
	box-sizing: border-box !important;
}
.postTitle > h2 > img {
	opacity: 1 !important;
}
.postTitle a {
	color: inherit !important;
}
.postActionLinks {
	padding-top: 13px !important;
}
.postDate + .postTitle > span {
	border-top: 1px solid #4a4338 !important;
}
.postContent {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.postLinksBackg {
	padding: 16px !important;
}
.authorName {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
#epigraph {
	position: relative !important;
	font-size: 13pt !important;
	padding-top: 4px !important;
	border-top-width: 5px !important;
	background: rgba(255,255,255,.7) !important;
}
#epigraph > .singlePost {
	background: transparent !important;
}
#epigraph > .singlePost > .postTitle {
	display: none !important;
}
#epigraph > .singlePost > .postLinksBackg {
	padding: 0 16px 8px 16px !important;
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
}
#epigraph > .postActionLinks {
	padding: 8px 8px 0 16px !important;
}
#epigraph + .header {
	margin: 0 !important;
}
.postDate {
	margin-top: 8px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}
#post0 {
	border: none !important;
}
blockquote {
	margin-left: 60px !important;
	font-style: normal !important;
}
blockquote::before {
	content: "”" !important;
	float: left !important;
	font-size: 70pt !important;
	font-family: serif !important;
	margin-left: -60px !important;
	margin-top: 20px !important;
	color: #4a4338 !important;
}
.code {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 8px !important;
	border: 1px solid #837a6c !important;
	resize: vertical !important;
}
pre {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 8px !important;
	border: 1px solid #837a6c !important;
}
#commentsArea {
	border: none !important;
	padding: 0 !important;
}
#commentsArea_title {
	margin-top: .7em !important;
	text-align: center !important;
	font-size: 1.4em !important;
	padding: 0 !important;
}
.singleComment {
	border: 1px solid #4a4338 !important;
	margin-top: 1em !important;
	background: #fff !important;
	padding: 0 !important;
}
.singleComment > .postTitle > * {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
.singleComment > .postTitle > .postActionLinks {
	padding-top: 9px !important;
}
#addCommentArea {
	background: #fff !important;
	margin-top: 1em !important;
	border: 1px solid #4a4338 !important;
	padding: 8px 16px 0 16px !important;
}
.postInner img {
	max-width: 100% !important;
}
.pageBar {
	border-top: none !important;
}
#side a {
	color: #000 !important;
}
#side a:hover, #side a:focus {
	color: #000080 !important;
	text-decoration: underline !important;
}
#side > .bordered {
	padding-top: 0 !important;
}
#side h1 > a {
	display: block !important;
	box-sizing: border-box !important;
	padding: 6px 10px !important;
	background: #4a4338 !important;
	color: #fff !important;
	width: calc(100% + 20px) !important;
	margin-left: -10px !important;
}
#side h1 > a:hover, #side h1 > a:focus {
	color: #fff !important;
}
.paragraph {
	text-align: left !important;
}
.LinkMore {
	display: inline-block;
	text-decoration: none !important;
	padding: .2em .5em !important;
	border: 1px solid #4a4338 !important;
	color: #000 !important;
	transition: color 200ms, background-color 200ms !important;
}
.LinkMore:hover, .LinkMore:focus {
	background-color: #4a4338 !important;
	color: #fff !important;
}
.postActionLinks, #sortOrder, .openidIco {
	opacity: 1 !important;
}
.atTag > em,
.atMusic > em,
.atMood > em {
	font-style: normal !important;
}
.atTag > em > :first-child,
.atMusic > em > :first-child,
.atMood > em > :first-child {
	font-weight: bold !important;
}
#SelectSmileGroup {
	font-size: 12pt !important;
}
#codebuttons {
	background: #f2f2f2 !important;
}
#codebuttons img,
#codebuttons .buts {
	background-color: #fff !important;
}
#codebuttons img:hover,
#codebuttons img:focus,
#codebuttons span.buts:hover,
#codebuttons span.buts:focus {
	background-color: #d6d6d6 !important;
}
#my_tags,
#shsmile,
#message,
#postTitle,
#tags {
	background: #fff !important;
	color: #000 !important;
}
.calnd {
	background: #fff !important;
	border: 1px solid #4a4338 !important;
}
.calnd .cal-mnth {
	background: #4a4338 !important;
	color: #fff !important;
}
.calnd .cal-mnth a {
	color: #fff !important;
}
.communityName {
	padding-left: 16px !important;
	font-style: italic !important;
}
.postInner h3 {
	padding: .3em 0 !important;
	background: #eee !important;
	color: #000 !important;
	font-weight: bold !important;
	text-align: center;
}

.age-warning {
	position: absolute;
	bottom: -1em;
	left: calc(50% - 1.5em);
	background: #8c1212;
	background: linear-gradient(to bottom, #a82e2e, #8c1212);
	color: #fff;
	width: 3em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	z-index: 1;
	font-size: 18pt;
}
.decorated-button {
	display: inline-block !important;
	background: #800000 !important;
	background: linear-gradient(to bottom, #a82e2e, #8c1212) !important;
	color: #fff !important;
	font-size: 18pt !important;
	padding: .5em .7em !important;
	text-decoration: none !important;
	font-weight: normal !important;
	font-style: normal !important;
	border: none !important;
}

Параметры

цвет оффтопа - #78388D
цвет границ - #4a4338
цвет ссылки - #000080
цвет фона записи - #
цвет фона заголовка - #

2. Red sky

Скриншот: https://i.imgur.com/7jjOK43.png

#side {
	background: #fff !important;
}
#side > .bordered {
	margin-bottom: 0 !important;
}
#side > #NContentFrame {
	border: none !important;
}
#postsArea {
	border: none !important;
	padding: 0 !important;
}
.singlePost {
	background: #fff !important;
	border: 1px solid #8c1212 !important;
	padding: 0 !important;
}
.singlePost:not(#epigraph) ~ .singlePost {
	margin-top: 1em !important;
}
.postTitle {
	padding: 0 !important;
	background: #800000;
	background: linear-gradient(to bottom, #a82e2e, #8c1212);
	color: #fff !important;
	margin-bottom: 1em !important;
}
.postTitle > * {
	display: inline-block !important;
	vertical-align: middle !important;
	padding: 8px 16px !important;
}
.postTitle > span {
	background: #fff !important;
	color: #444 !important;
	border-bottom: 1px solid #8c1212 !important;
	box-sizing: border-box !important;
}
.postTitle > h2 > img {
	opacity: 1 !important;
}
.postTitle a {
	color: inherit !important;
}
.postActionLinks {
	padding-top: 13px !important;
}
.postDate + .postTitle > span {
	border-top: 1px solid #a82e2e !important;
}
.postContent {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
.postLinksBackg {
	padding: 16px !important;
}
.authorName {
	padding-left: 16px !important;
	padding-right: 16px !important;
}
#epigraph {
	position: relative !important;
	font-size: 13pt !important;
	padding-top: 4px !important;
	border-top-width: 5px !important;
	background: rgba(255,255,255,.7) !important;
}
#epigraph > .singlePost {
	background: transparent !important;
}
#epigraph > .singlePost > .postTitle {
	display: none !important;
}
#epigraph > .singlePost > .postLinksBackg {
	padding: 0 16px 8px 16px !important;
	position: absolute !important;
	right: 0 !important;
	bottom: 0 !important;
}
#epigraph > .postActionLinks {
	padding: 8px 8px 0 16px !important;
}
#epigraph + .header {
	margin: 0 !important;
}
.postDate {
	margin-top: 8px !important;
	padding-left: 16px !important;
	padding-right: 16px !important;
}
#post0 {
	border: none !important;
}
blockquote {
	margin-left: 60px !important;
	font-style: normal !important;
}
blockquote::before {
	content: "”" !important;
	float: left !important;
	font-size: 70pt !important;
	font-family: serif !important;
	margin-left: -60px !important;
	margin-top: 20px !important;
	color: #a43432 !important;
}
.code {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 8px !important;
	border: 1px solid #837a6c !important;
	resize: vertical !important;
}
pre {
	box-sizing: border-box !important;
	width: 100% !important;
	padding: 8px !important;
	border: 1px solid #837a6c !important;
}
#commentsArea {
	border: none !important;
	padding: 0 !important;
}
#commentsArea_title {
	margin-top: .7em !important;
	text-align: center !important;
	font-size: 1.4em !important;
	padding: 0 !important;
}
.singleComment {
	border: 1px solid #8c1212 !important;
	margin-top: 1em !important;
	background: #fff !important;
	padding: 0 !important;
}
.singleComment > .postTitle > * {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}
.singleComment > .postTitle > .postActionLinks {
	padding-top: 9px !important;
}
#addCommentArea {
	background: #fff !important;
	margin-top: 1em !important;
	border: 1px solid #8c1212 !important;
	padding: 8px 16px 0 16px !important;
}
.postInner img {
	max-width: 100% !important;
}
.pageBar {
	border-top: none !important;
}
#side a {
	color: #000 !important;
}
#side a:hover, #side a:focus {
	color: #800000 !important;
	text-decoration: underline !important;
}
#side > .bordered {
	padding-top: 0 !important;
}
#side h1 > a {
	display: block !important;
	box-sizing: border-box !important;
	padding: 6px 10px !important;
	background: #800000;
	background: linear-gradient(to bottom, #a82e2e, #8c1212);
	color: #fff !important;
	width: calc(100% + 20px) !important;
	margin-left: -10px !important;
}
#side h1 > a:hover, #side h1 > a:focus {
	color: #fff !important;
}
.paragraph {
	text-align: left !important;
}
.LinkMore {
	display: inline-block;
	text-decoration: none !important;
	padding: .2em .5em !important;
	border: 1px solid #999 !important;
	color: #000 !important;
	transition: color 200ms, background-color 200ms, border-color 200ms !important;
}
.LinkMore:hover, .LinkMore:focus {
	background-color: #8c1212 !important;
	border-color: #8c1212 !important;
	color: #fff !important;
}
.postActionLinks, #sortOrder, .openidIco {
	opacity: 1 !important;
}
.atTag > em,
.atMusic > em,
.atMood > em {
	font-style: normal !important;
}
.atTag > em > :first-child,
.atMusic > em > :first-child,
.atMood > em > :first-child {
	font-weight: bold !important;
}
#SelectSmileGroup {
	font-size: 12pt !important;
}
#codebuttons {
	background: #f2f2f2 !important;
}
#codebuttons img,
#codebuttons .buts {
	background-color: #fff !important;
}
#codebuttons img:hover,
#codebuttons img:focus,
#codebuttons span.buts:hover,
#codebuttons span.buts:focus {
	background-color: #d6d6d6 !important;
}
#my_tags,
#shsmile,
#message,
#postTitle,
#tags {
	background: #fff !important;
	color: #000 !important;
}
.calnd {
	background: #fff !important;
	border: 1px solid #4a4338 !important;
}
.calnd .cal-mnth {
	background: #800000 !important;
	background: linear-gradient(to bottom, #a82e2e, #8c1212) !important;
	color: #fff !important;
}
.calnd .cal-mnth a {
	color: #fff !important;
}
.communityName {
	padding-left: 16px !important;
	font-style: italic !important;
}
.postInner h3 {
	padding: .3em 0 !important;
	background: #eee !important;
	color: #000 !important;
	font-weight: bold !important;
	text-align: center;
}

.age-warning {
	position: absolute;
	bottom: -1em;
	left: calc(50% - 1.5em);
	background: #8c1212;
	background: linear-gradient(to bottom, #a82e2e, #8c1212);
	color: #fff;
	width: 3em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	z-index: 1;
	font-size: 18pt;
}
.decorated-button {
	display: inline-block !important;
	background: #800000 !important;
	background: linear-gradient(to bottom, #a82e2e, #8c1212) !important;
	color: #fff !important;
	font-size: 18pt !important;
	padding: .5em .7em !important;
	text-decoration: none !important;
	font-weight: normal !important;
	font-style: normal !important;
	border: none !important;
}

Параметры

цвет оффтопа - #8D3838
цвет границ - #8c1212
цвет ссылки - #640e06
цвет фона записи - #
цвет фона заголовка - #

Вообще говоря, цвет границ мне показался слишком ярким. Можно выбрать какой-нибудь бледно-серый, поменяйте border-color в .singlePost и .singleComment, если нужно, они там тоже задаются отдельно.

Ширина

Если хочется не во всю ширину, то можно добавить правило:

html { max-width: 1500px; margin-left: auto; margin-right: auto; }

Либо не 1500, а сколько вам нужно. Максимальная ширина будет ограничена указанным размером.

Comments

[ночи.навылет]

спасибо! утащила в цитатник

[Tenno Seremel]

ночи.навылет,

[Hokori]

спасибо! утащила в цитатник

+1

[Tenno Seremel]

Стиля для картинки в шапке нет. Просто в эпиграфе в самом начале пишете ссылку с картинкой и указываете стиль float: right; padding-right: числоpx, если нужно.

Чёрт, на самом деле скорее padding-top, или даже margin-top

[Tenno Seremel]

Пофикшены blockquote. Раньше они только в постах работали, а в комметариях нет.

[Линда Кайе]

Сюпер!

[Tenno Seremel]

Линда Кайе,

[Tenno Seremel]

Были обновлены стили для странички «Календарь записей» и добавлен фон к тегам и смайлам при создании записи, если кому это интересно

[Hokori]

HarukaTenoh, интересно я всё складирую на следующую смену диза

[Tenno Seremel]

Hokori,

[Tenno Seremel]

И тут до меня дошло, как работает опция «прозрачные поля». ААААААаааааааааааааааааааааа… Но лучше бы её не было вовсе (^  ^)'

[Tenno Seremel]

Текущий фон: static.diary.ru/userdir/6/7/8/5/67852/85382497.... Похоже, что он меня устраивает