Bold

[rosecarmine]

LIVE PREVIEW

FEATURES

• header image
• header icon
• sidebar image
• left or right sidebar
• 2 colour schemes
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
2. Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
3. Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "text-only" for:
   • Select whether entry management links are printed as text or using the available icons
   • Select whether comment management links are printed as text or using the available icons.
4. Click on the "Modules" tab. Set "Profile" to number 1 and "Navigation" to number 2.
5. Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".
   
   Dark:/*------------------------------------- - layout - bold - dark (tabula rasa) - https://myrtillenne.dreamwidth.org - header image - kotkoa - https://www.freepik.com/author/kotkoa - header icon - valuavitaly - https://www.freepik.com/author/valuavitaly - sidebar image - wirestock - https://www.freepik.com/author/wirestock -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Merriweather, serif; --title-font: Merriweather, serif; --background-color: #174B53; --text-color: #9FC0C4; --link-color: #00B7C6; --link-hover-color: #DE6BA8; --header-height: 250px; --header-background-color: #00B7C6; /* also the color of the footer */ --header-image: url("https://rosecarmine.dreamwidth.org/file/163040.png"); --header-icon: url(https://rosecarmine.dreamwidth.org/file/168031.jpg); --header-icon-width: 150px; --header-icon-height: 150px; --title-background-color: #222; --header-text-color: #D0BBC6; --header-link-color: #DF6A8D; --header-link-hover-color: #00B7C6; --entry-width: 1000px; --entry-background-color: #162E30; --entry-title-background-color: #00B7C6; --entry-title-color: #222; --entry-title-hover-color: #222; --heading-background-color: #BDE9EC; --heading-color: #174B53; --heading-hover-color: #D33464; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/167514.jpg"); --sidebar-image-height: 300px; --userpic-size: 100px; }
   Light:/*------------------------------------- - layout - bold - light (tabula rasa) - https://myrtillenne.dreamwidth.org - header image - kotkoa - https://www.freepik.com/author/kotkoa - header icon - valuavitaly - https://www.freepik.com/author/valuavitaly - sidebar image - kjpargeter - https://www.freepik.com/author/kjpargeter -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Merriweather, serif; --title-font: Merriweather, serif; --background-color: #DEEDED; --text-color: #3D5556; --link-color: #39ACAC; --link-hover-color: #3D5556; --header-height: 250px; --header-background-color: #54C1C7; /* also the color of the footer */ --header-image: url(https://rosecarmine.dreamwidth.org/file/174224.png); --header-icon: url(https://rosecarmine.dreamwidth.org/file/177131.jpg); --header-icon-width: 150px; --header-icon-height: 150px; --title-background-color: #ADE4E4; --header-text-color: #3D5556; --header-link-color: #1A9BA2; --header-link-hover-color: #3D5556; --entry-width: 1000px; --entry-background-color: #F2F9F9; --entry-title-background-color: #ADE4E4; --entry-title-color: #3D5556; --entry-title-hover-color: #1A9BA2; --heading-background-color: #54C1C7; --heading-color: #F8F7C9; --heading-hover-color: #F2F9F9; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/171348.jpg"); --sidebar-image-height: 300px; --userpic-size: 100px; }
   Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1.5em 0; padding: 0; font-style: italic; } blockquote:first-letter { float: left; font-size: 2.5em; padding: 7px 9px; line-height: 0.75; font-family: var(--title-font); color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); margin-right: 5px; } #content-footer { height: 0; font-size: 0; clear: both; } /*--------------- header ---------------*/ #header { text-align: center; color: var(--header-text-color); margin-bottom: 40px; font-style: italic; } #header > .inner:first-child { padding: 0.5em 2em; background: var(--title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } @media (min-width: 800px) { #header { position: relative; display: flex; flex-direction: column; height: var(--header-height); background-image: var(--header-image); background-color: var(--header-background-color); background-position: top center; justify-content: flex-end; margin-bottom: 100px; } #header:before { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: var(--header-icon-width); height: var(--header-icon-height); background-image: var(--header-icon); background-size: cover; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); border: 7px solid var(--title-background-color); } #header > .inner:first-child { margin: 0 20px; align-self: center; transform: translateY(50%); } } h1#title { font-family: var(--title-font); font-size: 1.5em; margin: 0; padding: 0; line-height: 1.2; display: inline; } h1#title a { color: var(--header-link-color); } h1#title a:hover { color: var(--header-link-hover-color); } h2#subtitle { margin: 0 0 0 0.75em; padding: 0; font-size: 1em; line-height: 1.2; display: inline; } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { position: relative; } @media (min-width: 800px) { #content { margin: 0 auto; padding: 0 40px; } } @media (min-width: 1280px) { #content { margin: 0 auto; padding: 0 90px; } } @media (min-width: 1024px) { #content { max-width: calc(var(--entry-width) + var(--sidebar-width) + 40px); } .two-columns-left #content > .inner:first-child { border-left: var(--sidebar-width) solid transparent; } .multiple-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; clear: both; } .two-columns-left #primary > .inner:first-child { padding-left: 40px; } .two-columns-left #secondary { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } .two-columns-right #primary > .inner:first-child { padding-right: 40px; } .two-columns-right #secondary { float: right; width: var(--sidebar-width); margin-right: calc(-1 * var(--sidebar-width)); } } /*--------------- entries ---------------*/ .entry, .full .comment { margin-bottom: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .header { text-align: center; background: var(--entry-title-background-color); margin-bottom: 2.5em; padding: 0 10px; } .entry .entry-title, .full .comment-title { margin: 0; padding: 1em 0 0; line-height: 1.2; font-family: var(--title-font); font-size: 1.2em; color: var(--entry-title-color); } .entry .entry-title a, .full .comment-title a { color: var(--entry-title-color); } .entry .entry-title a:hover, .full .comment-title :hover { color: var(--entry-title-hover-color); } .sticky-entry-icon, .admin-post-icon { display: none; } .no-subject .entry .entry-title, .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .header .datetime { display: inline-block; color: var(--heading-color); background: var(--heading-background-color); line-height: 1; padding: 0.5em 1em; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); transform: translateY(50%); font-style: italic; } .header .datetime a { color: var(--heading-color); } .header .datetime a:hover { color: var(--heading-hover-color); } .restrictions img, .access-filter img { display: none; } .restrictions-NSFW .entry .datetime:before { content: "[NSFW] "; } .restrictions-18 .entry .datetime:before { content: "[18+] "; } .security-protected .entry .date:before { content: "[LOCKED] "; } .security-private .entry .dater:before { content: "[PRIVATE] "; } .entry .contents, .comment .contents { padding: 0 2em; } .has-userpic .userpic { float: right; margin-left: 1em; text-align: right; } .two-columns-right .has-userpic .userpic { float: left; margin-right: 1em; margin-left: 0; text-align: left; } .has-userpic .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; border: 5px solid var(--entry-title-background-color); background: var(--entry-title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } @media (min-width: 1024px) { .has-userpic .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } @media (min-width: 1280px) { .has-userpic .userpic { width: calc(var(--userpic-size) + 10px); margin-right: calc(-1 * (var(--userpic-size) + 10px) / 2 - 2em); } .two-columns-right .has-userpic .userpic { margin-left: calc(-1 * (var(--userpic-size) + 10px) / 2 - 2em); margin-right: 1em; } } .entry .poster, .full .poster, .poster-ip { display: inline-block; line-height: 1; background: var(--heading-background-color); padding: 0.5em 1em; font-style: italic; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); color: var(--heading-color); } .entry .poster a, .full .poster a { color: var(--heading-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--heading-hover-color); } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .entry-content { margin: 2em 0; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action img { display: none; } .cuttag-action { display: inline-block; font-size: 26px; width: 22px; line-height: 22px; padding: 5px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .cuttag-action:before { content: "+"; display: inline-block; } .cuttag-action-after:before { transform: rotate(45deg); } .cuttag-action:hover { color: var(--heading-hover-color); } .cut-open, .cut-close { display:none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata li:first-letter, .entry div.tag:first-letter { font-family: var(--title-font); font-style: italic; font-weight: bold; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 0.25em; } .entry div.tag { text-align: left; } .tag ul { padding: 0; margin: 0; display: inline; } .tag li { display: inline; } ul.entry-management-links.icon-links { margin: 2em 0 1em; padding: 0; } ul.entry-management-links.icon-links li { display: inline; margin: 0 0.5em; } ul.entry-management-links.text-links, ul.entry-interaction-links { padding: 0; margin: 0; line-height: 1; display: inline; } .entry ul.entry-management-links.text-links:before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { padding: 0.5em; margin: 2px 0; display: inline-block; background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .entry-management-links.text-links li a, .entry-interaction-links li a { color: var(--heading-color); } .entry-management-links.text-links li a:hover, .entry-interaction-links li a:hover { color: var(--heading-hover-color); } .footer { padding: 0 2em 2em; text-align: center; } /*------------ comments ------------*/ .comment-pages { background: var(--title-background-color); text-align: center; margin: 40px 0; padding: 7px; color: var(--header-text-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .comment-pages a { color: var(--header-link-color); } .comment-pages a:hover { color: var(--header-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; position: relative; z-index: 9; } .thread-depth { display: block; padding-top: 1em; color: var(--entry-title-color); } .partial { padding: 1em; margin: 40px 0; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .comment .comment-title { margin: 0; } .comment-date-text, .comment-from-text { display: none; } .comment-content { padding: 2em 0; } ul.comment-management-links.icon-links { padding: 0; margin: 1em 0; } ul.comment-management-links.icon-links li { margin: 0 0.5em; display: inline; } ul.comment-management-links.text-links, ul.comment-interaction-links { padding: 0; margin: 0; display: inline; } .multiform-checkbox, ul.comment-management-links.text-links li, ul.comment-interaction-links li { padding: 0.5em; margin: 2px 0; display: inline-block; color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); line-height: 1; font-style: italic; } .multiform-checkbox { margin-right: 0.25em; } .multiform-checkbox input { margin: 0; } ul.comment-management-links.text-links li a, ul.comment-interaction-links li a { color: var(--heading-color); padding: 0 !important; } ul.comment-management-links.text-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--heading-hover-color); } .bottomcomment { background: var(--entry-background-color); text-align: center; margin: 40px 0; padding: 1em; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .bottomcomment ul.entry-management-links.icon-links { margin-top: 0; } .bottomcomment label:before { content: ""; display: block; margin-top: 1em; } #multiform_mode, #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 5px; background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { margin-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { padding: 5px 10px; background: var(--heading-background-color); border: 0; color: var(--heading-color); font-size: var(--text-size); font-family: var(--main-font); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; border: 0; background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } #postform { margin-bottom: 40px; padding: 2em; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin-bottom: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; display: inline-block; line-height: 1; padding: 0.5em 1em; margin: 0; font-weight: normal; color: var(--heading-color); transform: translateY(50%); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .month-wrapper .contents, .icons-container .contents, .tags-container .contents { padding: 0 2em; } .month .footer .inner, #primary .manage-link { margin-top: 1em; padding: 0.5em; display: inline-block; background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); line-height: 1; font-style: italic; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--heading-color); } .month .footer a:hover, .tags-container .footer a:hover, .icons-container .footer a:hover { color: var(--heading-hover-color); } /*------------ archive------------*/ .day-date { display: none; } .month caption { display: none; } .month table { width: 100%; border: none; text-align: center; border-collapse: separate; border-spacing: 5px; table-layout: fixed; } table.month { margin: 0 auto; } table.month th { background: var(--entry-title-background-color); color: var(--entry-title-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); width: 1em; padding: 5px 0; } table.month td { background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); padding: 5px 0; } table.month td.day-has-entries { position: relative; } .day.day-has-entries { background: var(--entry-title-background-color); color: var(--entry-title-color); } .day.day-has-entries .label { color: var(--entry-title-color); } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl dd { background: var(--entry-background-color); margin: 0 0 40px; padding: 2em; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month dl dt { background: var(--entry-title-background-color); text-align: center; color: var(--entry-title-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month dl dt a { display: inline-block; color: var(--heading-color); background: var(--heading-background-color); line-height: 1; padding: 0.5em 1em; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); transform: translateY(50%); font-style: italic; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 2em 2em 0; } .month dd > span { padding-right: 0.25em; } #archive-month .navigation select { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); font-style: italic; } #archive-month .navigation input { background: transparent; color: var(--header-link-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); font-style: italic; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: disc inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; margin-top: 2em; } .icon { margin-top: 1em; display: flex; } .icon-image { padding-right: 1em; } .icon-image img { display: block; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .sorting-options ul { margin: 0 0 2em; padding: 0; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .icon .default { line-height: 1; padding: 0.5em 1em; color: var(--heading-color); background: var(--heading-background-color); display: inline-block; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } /*------------ modules ------------*/ .module { background: var(--entry-background-color); margin-bottom: 40px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); text-align: center; } .module:before { content: ""; display: block; height: 2em; background: var(--entry-title-background-color); } .module h2 { font-size: 1em; line-height: 1; padding: 0.5em 1em; margin: 0; color: var(--heading-color); background: var(--heading-background-color); font-weight: normal; display: inline-block; transform: translateY(-50%); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); font-style: italic; } .module h2 a { color: var(--heading-color); } .module h2 a:hover { color: var(--heading-hover-color); } .module-content { padding: 0 1.5em 1.5em; } .module-content ul { list-style: none; margin: 0; padding: 0; clear: both; text-align: left; } .module-content li { padding: 0.25em 0; break-inside: avoid; } .module-navlinks ul, .module-typelist ul { text-align: center; } .module-navlinks li, .module-typelist li { display: inline-block; padding: 0.25em; font-style: italic; } .module-navlinks li a, .module-typelist li a { } .module-calendar .module-content { text-align: center; padding: 0 10px 10px; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: separate; border-spacing: 5px; } .module-calendar table th { background: var(--entry-title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); padding: 5px 0; max-width: 1em; color: var(--entry-title-color); } .module-calendar td { background: var(--heading-background-color); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); padding: 5px 0; max-width: 1em; } .module-calendar .entry-day { background: var(--entry-title-background-color); } .module-calendar .entry-day a { color: var(--entry-title-color); } .module-calendar .entry-day a:hover { color: var(--entry-title-hover-color); } .tags_cloud li, .module-tags_cloud li { display: inline; } .module .manage-link, .module-userprofile h2, .module .userpic, .journal-website-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none !important; } .journal-name { display: inline-block; padding: 0.5em 1em; background: var(--heading-background-color); transform: translateY(50%); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); line-height: 1; font-style: italic; color: var(--heading-color); } .module-userprofile { background-color: var(--entry-title-background-color); display: flex; align-items: flex-end; margin: 0; } .module .userpic { padding-top: 20px; } @media (min-width: 1024px) { .module-userprofile { background-image: var(--sidebar-image); background-size: cover; background-position: top center; height: var(--sidebar-image-height); } } .module-userprofile .module-content { padding: 0; text-align: center; flex: 0 0 100%; } .module-userprofile:before, .module-navlinks:before { display: none; } .module-navlinks .module-content { padding-top: 2em; } .module-customtext .module-content { text-align: left; } .search-form .search-box-item, .search-form .search-button-item { display: block; } input.search-box { margin: 0 auto; background: var(--heading-background-color); border: 0; padding: 5px; font-family: var(--main-font); font-size: var(--text-size); color: var(--heading-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } input.search-button { padding: 5px 10px; background: var(--heading-background-color); color: var(--heading-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Bold" by myrtillenne'; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .noentries, .navigation.empty { display: none; } .navigation { text-align: center; margin-bottom: 40px; } .navigation ul { margin: 0; padding: 0 0.5em; background: var(--title-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); display: inline-block; font-style: italic; } .navigation li { display: inline-block; line-height: 1; padding: 0.5em; color: var(--header-text-color); } .navigation a { color: var(--header-link-color); } .navigation a:hover { color: var(--header-link-hover-color); } @media (min-width: 1024px) { #entries .navigation { margin: 0; position: absolute; bottom: 40px; transform: translateY(50%); } } /*------------ footer ------------*/ #footer { background: var(--header-background-color); height: 40px; margin-top: 40px; } #footer .inner { max-width: calc(var(--entry-width) + var(--sidebar-width) + 40px); padding: 0 40px; margin: 0 auto; } @media (min-width: 1280px) { #footer .inner { padding: 0 90px; } } .two-columns-left #footer .inner { text-align: left; } .two-columns-right #footer .inner { text-align: right; } .page-top { display: inline-block; transform: translateY(-50%); background: var(--title-background-color); line-height: 1; padding: 0.5em 1em; font-style: italic; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } .page-top a { color: var(--header-link-color); } .page-top a:hover { color: var(--header-link-hover-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 0; border-radius: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; } div.ContextualPopup .Relation { display: inline-block; font-weight: normal; font-size: 1em; color: var(--heading-color); background: var(--heading-background-color); line-height: 1; transform: translateY(-1em); padding: 0.5em 1em; margin: 0 10px; font-style: italic; box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } div.ContextualPopup .Userpic { margin: 0; border: 0; padding: 1em 0 2em; float: none; background: var(--entry-title-background-color); } div.ContextualPopup .Userpic img { border: 5px solid var(--heading-background-color); background: var(--heading-background-color); box-shadow: 0 5px 4px -4px rgba(0, 0, 0, 0.3); } div.ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0 1em 1em; } div.ContextualPopup li { list-style: none; margin-top: 0.25em; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--title-background-color); justify-content: center; padding: 0.75em 0; color: var(--header-text-color); } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--header-link-color); } #lj_controlstrip a:hover { text-decoration: none; color: var(--header-link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: 1em; color: var(--header-text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid transparent; font-size: 1em !important; font-family: var(--main-font) !important; background: var(--entry-background-color) !important; color: var(--text-color) !important; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); font-style: italic; } #lj_controlstrip input[type="submit"] { padding: 0.5em; color: var(--header-link-color) !important; font-family: var(--title-font) !important; background: transparent !important; box-shadow: none; font-style: italic; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }
   Into the "Custom stylesheet URL" field paste the following.
   https://fonts.googleapis.com/css2?family=Merriweather&family=Merriweather:ital@1&display=swap
6. Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

• images from freepik by kotkoa, valuavitaly, wirestock, kjpargeter

Comments

[musyc]

Nice and crisp straight lines, bright colors! This is so pretty.

[skargasm]

Ooooh I want these IMMEDIATELY!!! Off to change my personal journal to this! Thank you x

[rosecarmine]

Thank you 🤗

[intothisshadow]

Wonderful themes! I'm using the dark one :D

[rosecarmine]

Thank you, dear!

[svgurl]

Those are both so pretty! I love the colors. :D

[rosecarmine]

Thanks!

[inkcharm]

Hi, I tested this layout out and just wanted to let you know there's a small spelling mistake on locked/privated entries, reaking "LOKED" instead of Locked. See below. It's a lovely code, but I figured I'd let you know. I hope that's alright <3

[rosecarmine]

Thank you for letting me know, I appreciate it! 🤗

[generalfrings]

This is quite lovely, thank you so much for your DW layouts! <3 Great to see these types of, say, more modern approaches to layout being done so nicely.

I'm using this over on 2521 with some minor edits :)

[rosecarmine]

Thank you!

[serenitywheeler]

Hi RoseCarmine, I hope you are doing well. I'm glad to see you're still making gorgeous layouts for Dreamwidth. Keep up the amazing work!

[rosecarmine]

Hiiii dear! So nice to hear from you. I'm doing good. How have you been? 🤗

[poorunfortunatesoul]

Love it, I put it up but it's not showing after doing the steps? I seem to be having this issue when I try to use your layouts now. :(

[rosecarmine]

Hi, I had a look at your journal and you didn't paste the options. You need to redo step 5 of the instructions. Above the layout code there are two textboxes. Copy and paste the code from one of those, dark or light.

[socalsummers]

This is so cute and it was very easy to move around the images for my RP journal! Thank you so much