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