baisemain | LAYOUT: Proof

[ PREVIEW ]

Featuring: Simple sidebar, everyone's display names beside their journal entries, optional matching splash page.

LAST UPDATE 10/07/2025: Fixed bug with empty entry poster names.
12/12/2023: Fixed how entry poster names display in communities.
07/03/2023: Adjusted sidebar title/image/links to sit 50px higher on the page.
05/19/2023: Fixed incorrect value for "page-recent" width on splash page code.
10/29/2022: Fixed font of header in day view. Fixed alignment issues for nav icons on mobile.

INSTALLING THE THEME

Go to Your Layers under Advanced Customization. Under "Create a style-specific layer", select Type: Theme and Style: Tabula Rasa. Click "Create."

Your new blank theme is under your layers list. Click "Edit" under Actions. Make sure you're clicking the right item (the Type should be "theme" and the Name is "(none)").

Delete everything in the main window (i.e. it has layerinfo "type" = "theme"; in it). Paste in the text below. Click "Save & Compile" on top. (If it doesn't compile, go back and make sure you picked type "theme.")

layerinfo type = "theme"; layerinfo name = "Proof"; layerinfo redist_uniq = "tabularasa/proof"; layerinfo "author_name" = "baisemain"; set theme_authors = [ { "name" => "baisemain", "type" => "user" } ]; ##=============================== ## Custom Elements ##=============================== # Text under icons set text_posting_in = " "; # Prints the name of the account which posted the entry function Entry::print_poster { var Page p = get_page(); var string emptyclass = ((($p isa RecentPage and not $p isa FriendsPage) or $p isa MonthPage or $p isa DayPage) and $p.journal.journal_type != "C") ? "empty" : ""; print safe "<div class=\"inner-entry-userpic\">\n"; print safe "<span class=\"poster entry-poster $emptyclass\">"; if ($p isa FriendsPage or $p isa EntryPage or $p isa ReplyPage) { $this.poster->print(); if (not $this.poster->equals($this.journal)) { print $*text_posting_in; $this.journal->print(); print safe "</span>"; if ($this.poster.username != $this.poster.name) { print safe "<span class='display-name'>" + $this.poster.name + "</span>"; } } } else { if (not $this.poster->equals($this.journal)) { $this.poster->print(); print safe "</span>"; if ($this.poster.username != $this.poster.name) { print safe "<span class='display-name'>" + $this.poster.name + "</span>"; } } } print safe "</div>"; } ##=============================== ## Custom CSS ##=============================== set custom_css = """/*-------------------------------------- layout by baisemain base code by myrtillenne (https://myrtillenne.dreamwidth.org) --------------------------------------*/ /*----- OPTIONS -----*/ :root { --text-size: 16px; --text-color: #192A51; --line-height: 1.5; --background-color: #F5E6E8; --link-color: #AAA1C8; --link-hover-color: #192A51; --main-font: 'Nunito Sans', sans-serif; --title-font: 'Homemade Apple', sans-serif; --title-color: #F5E6E8; --subtitle-font: 'Nunito Sans', sans-serif; --subtitle-color: #192A51; --entry-width: 650px; --entry-poster-background-color: #FFF3F7; --entry-poster-text-color: #192A51; --entry-subname-background-color: #192A51; --entry-subname-text-color: #fff; --border-color: #fff; --border-color-two: #FFF3F7; --sidebar-image: url('SIDEBAR_IMAGE_URL'); --sidebar-image-width: 240px; --sidebar-image-height: 350px; --sidebar-background-color: #967AA1; --sidebar-width: 400px; --sidebar-border: 10px; --sidebar-icon-color: #192A51; --sidebar-icon-hover-color: #967AA1; --sidebar-link-color: #fff; --sidebar-link-background-color: #192A51; --sidebar-link-hover-color: #121212; --accentbar-width: 50px; --customtext-background-color: transparent; --customtext-text-color: #F5E6E8; --customtext-link-color: #F5E6E8; --customtext-link-hover-color: #F5E6E8; --entry-background-color: #fff; --entry-datetime-color: #AAA1C8; --blockquote-background-color: #FFF3F7; --blockquote-text-color: #192A51; --blockquote-link-color: #AAA1C8; --blockquote-link-hover-color: #192A51; --icon-size: 80px; --icon-text-size: 10px; --icon-border-color: #fff; --controlstrip-text-size: 12px; }"""; function Page::print_theme_stylesheet () { """/*---------- FONTS ----------*/ @font-face { font-family: 'Material Icons'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialicons/v138/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2'); } /*---------- GENERAL ----------*/ h1, h2, h3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--background-color); color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } .entry blockquote, .comment blockquote { background: var(--blockquote-background-color); color: var(--blockquote-text-color); padding: 1em; margin: 1em 0 0 1.5em; position: relative; } blockquote a { color: var(--blockquote-link-color); } blockquote a:hover { color: var(--blockquote-link-hover-color); } /*---------- HEADER ----------*/ #invisible-separator { display: none; } #header { position: relative; float: left; width: 100%; padding: 0; font-family: var(--title-font); text-align: center; z-index: 2; } #header .inner { padding: 2em 2em 20px; } @media (min-width: 800px) { #header .inner { /*padding: 70px 70px 20px;*/ padding: 2em 2em 0; } } @media (min-width: 1124px) { #header { top: 0; left: 0; position: fixed; width: var(--sidebar-width); } #header .inner { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 30px; height: 150px; } } h1#title { margin: 0; color: var(--title-color); font-size: 1.5em; font-weight: normal; line-height: 1; } h1#title a { color: inherit; } h2#subtitle { font-size: 0.9em; margin: 0; margin-top: -1em; color: var(--subtitle-color); font-family: var(--subtitle-font); /*font-weight: normal;*/ /*text-align: right;*/ text-transform: uppercase; letter-spacing: 0.25em; line-height: 1; } h2#pagetitle { display: none; } /*---------- CONTENT ----------*/ #canvas { /*margin-bottom: 20px;*/ } @media (min-width: 1124px) { #content { border-left: var(--sidebar-width) solid transparent; max-width: 100%; } } #primary { margin: 0; padding: 40px 0 20px; } @media (min-width: 800px) { #primary > .inner:first-child { padding-right: calc(var(--icon-size) + 40px); } } @media (min-width: 1124px) { #primary > .inner:first-child { padding-left: 50px; } } @media (min-width: 1124px) { #content>.inner { display: flex; flex-direction: row; } } /*---------- ENTRIES ----------*/ .entry { width: var(--entry-width); max-width: 100%; } .entry, .full .comment { margin: 0 auto 50px; } .entry > .inner:first-child, .full .comment > .inner:first-child { background: var(--entry-background-color); padding: 2em; overflow: auto; } @media (min-width: 800px) { .entry > .inner:first-child, .full .comment > .inner:first-child { overflow: visible; } } .entry .header, .comment .header { margin-bottom: 1em; } .entry .entry-title { margin: 0; padding: 0; font-family: var(--title-font); font-weight: normal; font-size: 1.3em; line-height: 1; } .entry .datetime { font-size: 0.75em; text-transform: uppercase; letter-spacing: 1px; } .entry .datetime, .entry .datetime a { color: var(--entry-datetime-color); } .admin-post-icon, .sticky-entry-icon { display: none; } .header a, .metadata a, .footer a { color: var(--text-color); } .header a:hover, .metadata a:hover, .footer a:hover { color: var(--link-color); } .no-subject .entry .entry-title { background: none; border: none; padding: 0; } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: \"lock\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; color: var(--entry-datetime-color); } .security-private .access-filter:before { content: \"visibility_off\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; color: var(--entry-datetime-color); } .restrictions-NSFW .restrictions:before { content: \"warning\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; color: var(--entry-datetime-color); } .restrictions-18 .restrictions:before { content: \"18+\"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; color: var(--entry-datetime-color); } .has-userpic .userpic { float: right; /*shape-outside: circle(50%) padding-box;*/ margin-top: -4em; } .has-userpic .userpic img { border: 5px solid var(--icon-border-color); background: var(--icon-order-color); display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; /*border-radius: 50%;*/ } @media (min-width: 800px) { .has-userpic .userpic { width: calc(var(--icon-size) + 20px); margin-top: calc((var(--icon-size) + 2em) * -1); margin-right: calc((var(--icon-size) + 30px + 2em) * -1); } .has-userpic .userpic img { max-width: var(--icon-size); max-height: var(--icon-size); width: auto; height: auto; border: 10px solid var(--icon-border-color); margin: 0 auto; } } .entry .poster .ljuser { display: block; font-size: var(--icon-text-size); padding-right: 0.25em; } .entry .display-name { display: block; padding: 4px 6px; font-size: var(--icon-text-size); line-height: 1; background: var(--entry-subname-background-color); color: var(--entry-subname-text-color); } .entry .inner-entry-userpic { float: right; display: flex; flex-direction: column; align-items: end; text-align: center; } .entry .inner-entry-userpic .entry-poster { display: block; position: relative; align-self: center; padding: 4px 8px; background: var(--entry-poster-background-color); color: var(--entry-poster-text-color); text-transform: uppercase; line-height: 1.2; z-index: 2; } .entry .inner-entry-userpic .entry-poster a { color: var(--sidebar-icon-color); } @media (min-width: 800px) { .entry .inner-entry-userpic { min-width: calc(var(--icon-size) + 20px); margin-top: -10px; margin-right: calc((var(--icon-size) + 30px + 2em) * -1); transform: rotate(5deg); will-change: transform; } .entry .display-name { transform: rotate(-5deg); width: var(--icon-size); will-change: transform; } } .entry .inner-entry-userpic .entry-poster.empty { display: none !important; } .entry .inner-entry-userpic .entry-poster .ljuser img { display: none; } .entry .inner-entry-userpic .entry-poster .ljuser b { font-weight: normal; } .entry-content, .comment-content { margin: 2em 0; } .entry-content *, .comment-content * { max-width: 100%; } @media (min-width: 800px) { .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; } .metadata li { line-height: 1.2; margin-bottom: 0.5em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: \"speaker\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; margin-right: 5px; } #metadata-mood:before { content: \"sentiment_satisfied_alt\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; margin-right: 5px; } #metadata-location:before { content: \"location_on\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; margin-right: 5px; } #metadata-xpost:before { content: \"add_location\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; margin-right: 5px; } .entry .tag { margin-bottom: 0.5em; line-height: 1.2; } .tag-text { display: none; } .tag a { font-size: 0.75em; text-transform: uppercase; color: var(--link-color); } .tag ul { display: inline; margin-left: 0; padding-left: 0; } .tag ul li { display: inline; } .tag:before { content: \"label_important\"; font-family: Material Icons; font-size: 20px; vertical-align: middle; margin-right: 5px; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { margin: 0; padding: 0; float: left; } ul.entry-management-links li { display: inline; margin-right: 5px; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a:before { font-family: Material Icons; font-size: 20px; line-height: 20px; } .icon-links .link_prev a:before { content: \"arrow_back\"; } .icon-links .edit_entry a:before { content: \"edit\"; } .icon-links .edit_tags a:before { content: \"sell\"; } .icon-links .mem_add a:before { content: \"favorite\"; } .icon-links .tell_friend a:before { content: \"share\"; } .icon-links .watch_comments a:before { content: \"add_alert\"; } .icon-links .link_next a:before { content: \"arrow_forward\"; } ul.entry-interaction-links li { display: inline; margin-left: 0.5em; font-size: 0.8em; text-transform: uppercase; } ul.entry-interaction-links { margin: 0; padding: 0; float: right; } .footer:after { content: \"\"; display: block; clear: both; } /*---------- COMMENTS ----------*/ .comment-pages { background: var(--entry-background-color); padding: 1em; text-align: center; margin: 10px 0; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .full .thread-depth { display: block; line-height: 1; margin-bottom: 1em; } .comment .comment-title { margin: 0; font-weight: normal; } .full .comment .comment-title { padding: 0 0 0.5em; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .comment-date-text { display: none; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .poster-ip { display: block; } .partial { background: var(--entry-background-color); padding: 1em; margin: 20px 0; } .multiform-checkbox { margin-right: 0.5em; float: left; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links { margin: 0; padding: 0; float: right; } ul.comment-management-links li { display: inline-block; margin-left: 5px; } ul.comment-management-links.icon-links li { width: 22px; overflow: hidden; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; } .icon-links .edit_comment a:before { content: \"edit\"; } .icon-links .delete_comment a:before { content: \"delete_forever\"; } .icon-links .screen_comment a:before { content: \"visibility_off\"; } .icon-links .unscreen_comment a:before { content: \"visibility\"; } .icon-links .freeze_thread a:before { content: \"ac_unit\"; } .icon-links .unfreeze_thread a:before { content: \"wb_sunny\"; } ul.comment-interaction-links li { display: inline; margin-right: 0.5em; font-size: 0.8em; text-transform: uppercase; } ul.comment-interaction-links { margin: 0; padding: 0; float: left; } .comment-pages.bottompages, #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } .bottomcomment { background: var(--entry-background-color); text-align: center; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); } #qrdiv input[type=\"button\"], #qrdiv input[type=\"submit\"] { background: transparent; border: 0; font-size: var(--text-size); font-family: var(--title-font); padding: 0.5em; color: var(--link-color); line-height: 1; } #postform { padding: 2em; background: var(--entry-background-color); } /*---------- PAGES ----------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 20px 0; } .month-wrapper .month > .inner:first-child, .tags-container > .inner:first-child, .icons-container > .inner:first-child, #archive-month > .inner:first-child { background: var(--entry-background-color); padding: 2em; } @media (min-width: 800px) { .month-wrapper, #archive-month, .tags-container, .icons-container { background-color: var(--sidebar-background-color); padding-right: 60px; margin: 70px 0; } } .month .header, .tags-container .header, .icons-container .header { margin-bottom: 2em; padding-bottom: 1em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { padding: 0; font-family: var(--title-font); font-style: italic; font-weight: normal; font-size: 1.5em; line-height: 1; } .month .footer, #primary .manage-link { margin-top: 2em; padding-top: 1em; } /*---------- ARCHIVE ----------*/ table.month { margin: 0 auto; border-spacing: 3px; text-align: center; } table.month td { width: 2em; height: 2em; } table.month th { padding: 3px; background: var(--blockquote-background-color); color: var(--blockquote-text-color); font-family: var(--title-font); font-weight: normal; width: 2em; /*border-radius: 4px;*/ } table.month td p { margin: 0; padding: 3px; } table.month td.day-has-entries { position: relative; background: var(--blockquote-background-color); color: var(--blockquote-text-color); } .day.day-has-entries .label { border: 1px solid var(--border-color); display: block; border-radius: 50px; width: 2em; height: 2em; line-height: 2em; } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; } table.month .day-has-entries p a { color: transparent; padding: 1em; } .month dl { margin: 0; } .month dl dt { font-family: var(--title-font); font-size: 1em; padding-bottom: 1em; font-style: italic; } .month dl dt a { color: var(--text-color); } .month dl dt a:hover { color: var(--link-color); } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dl .tag ul { margin-top: 0; } .month dd { margin: 1em 0 0; } .day-date { display: none; } .month caption { display: none; } #archive-year .navigation li a, #archive-year li.active { display: inline-block; height: 50px; width: 50px; background: var(--border-color); line-height: 50px; border-radius: 50px; text-align: center; color: var(--sidebar-icon-color); margin: 0 5px; } #archive-year .navigation li a:hover, #archive-year li.active { color: var(--sidebar-icon-hover-color); } #archive-year .navigation li a:hover { transform: rotate(360deg); will-change: transform; } /*---------- TAGS ----------*/ ul.ljtaglist { list-style-position: inside; padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*---------- ICONS PAGE ----------*/ .sorting-options ul { margin: 0 0 1em; padding: 0; } .sorting-options ul li { display: inline; } .icon { padding: 1em 0; margin: 1em 0; display: flex; } .icon-image { margin-right: 1em; } .icon-image img { display: block; } .default.label { font-size: 0; } .default.label:before { content: \"star\"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .keywords-label, .comment-text, .description-text { font-weight: bold; } /*------------ modules ------------*/ #secondary { background-color: var(--sidebar-background-color); border-bottom: 10px solid var(--border-color); position: relative; } @media (min-width: 1124px) { #secondary { position: fixed; left: 0; top: 0; width: var(--sidebar-width); height: 100%; border-right: var(--sidebar-border) solid var(--border-color); border-bottom: 0; z-index: 1; } } .module-section-one { clear: left; } .module-section-one { padding: 0 2em 25px; } @media (min-width: 1124px) { .module-section-one { padding: 150px 40px 0; } .module-section-one .inner { display: flex; flex-direction: column; min-height: 0; height: calc(100vh - 200px); padding-bottom: 50px; box-sizing: border-box; } } .module-content ul { list-style: none; margin: 0; padding: 0; } .module .userpic img { display: block; border: 10px solid var(--icon-border-color); /*border-radius: 50%;*/ max-width: 70px; max-height: 70px; width: auto; height: auto; margin: 0 auto; } @media (min-width: 800px) { .module-userprofile { width: 120px; height: 120px; position: absolute; bottom: -65px; left: 70px; display: flex; align-items: center; } .module .userpic img { max-width: 60px; max-height: 60px; background: var(--icon-border-color); } } @media (min-width: 1124px) { .module-userprofile { top: 80px; right: -75px; left: auto; bottom: auto; } .module .userpic img { display: none; } } .module-navlinks { position: absolute; left: 2em; bottom: -40px; text-align: center; margin: 0 auto; left: 0; right: 0; } @media (min-width: 800px) { .module-navlinks { left: 190px; padding-right: 195px; } } .module-navlinks ul.module-list { display: inline-block; } .module-navlinks li { float: left; width: 40px; height: 40px; overflow: hidden; /*border-radius: 50%;*/ background: var(--border-color); margin-left: 2px; } .module-navlinks li:nth-child(odd) { transform: rotate(10deg); } .module-navlinks li:nth-child(even) { transform: rotate(-10deg); background: var(--border-color-two); } @media (min-width: 1124px) { .module-navlinks { width: 40px; top: 220px; right: -25px; left: auto; bottom: auto; padding-right: 0; } .module-navlinks li { float: none; margin: 2px auto; } } .module-navlinks li a { color: var(--sidebar-icon-color); } .module-navlinks li a:hover { color: var(--sidebar-icon-hover-color); } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 16px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; } .list-item-recent a:before { content: \"home\"; } .list-item-archive a:before { content: \"date_range\"; } .list-item-read a:before { content: \"library_books\"; } .list-item-tags a:before { content: \"sell\"; } .list-item-network a:before { content: \"language\"; } .list-item-memories a:before { content: \"favorite\"; } .list-item-userinfo a:before { content: \"info\"; } .module-typelist { margin-top: 10px; padding-top: 10px; } .module-typelist ul { display: flex; flex-wrap: wrap; margin: -2px; } .module-typelist li { flex-grow: 1; text-align: center; line-height: 1; margin: 0; } @media (min-width: 1124px) { .module-typelist li { min-width: 50%; } } .module-typelist li a { display: block; margin: 2px; padding: 0.5em; background: var(--sidebar-link-background-color); color: var(--sidebar-link-color); font-size: 0.9em; letter-spacing: 0.2em; line-height: 1; text-transform: uppercase; } .module-typelist li a:hover { background: var(--sidebar-link-hover-color); color: var(--sidebar-link-color); backdrop-filter: blur(1px); } .module-customtext { background: var(--customtext-background-color); color: var(--customtext-text-color); } .module-customtext a { color: var(--customtext-link-color); } .module-customtext a:hover { color: var(--customtext-link-hover-color); } @media (min-width: 1124px) { .module-customtext .sidebar-image { margin: 0 auto; max-width: 100%; width: var(--sidebar-image-width); height: var(--sidebar-image-height); aspect-ratio: 2/3; background: #fff var(--sidebar-image) center; background-size: cover; border: 20px solid var(--border-color); transform: rotate(-2deg); will-change: transform; } } .module-calendar, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module h2.module-header, .module-userprofile h2.module-header, .module-userprofile .journal-name, .module-userprofile ul.userlite-interaction-links, .module .manage-link { display: none; } /*---------------- tertiary ----------------*/ #tertiary { position: static; width: 100%; border-top: var(--sidebar-border) solid var(--border-color); background-color: var(--sidebar-background-color); } @media (min-width: 1124px) { #tertiary { width: var(--accentbar-width); border-top: 0; border-left: var(--sidebar-border) solid var(--border-color); position: fixed; top: 0; bottom: 0; right: 0; z-index: -1; } } /*---------- NAVIGATION ----------*/ .navigation .page-separator, .topnav { display: none; } .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { display: inline; } #entries .navigation li { display: inline-block; width: 40px; height: 40px; overflow: hidden; background: var(--border-color); margin: 0 10px; padding: 0; transform: rotate(10deg); } #entries .navigation li a { color: var(--sidebar-icon-color); } #entries .navigation li a:hover { color: var(--sidebar-icon-hover-color); } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; transform: rotate(-10deg); } li.page-back a:before { content: \"arrow_back\"; } li.page-forward a:before { content: \"arrow_forward\"; } @media (min-width: 1124px) { #entries .navigation ul { position: fixed; left: var(--sidebar-width); margin-left: -55px; bottom: 65px; width: 120px; z-index: 3; } #entries .navigation li { display: block; margin: 2px auto; } } li.page-separator { display: none !important; } .noentries { display: none; } /*---------- FOOTER ----------*/ #footer { text-align: center; margin-top: -100px; margin-bottom: 25px; } .page-top { width: 40px; height: 40px; background: var(--border-color-two); /*border-radius: 50%;*/ overflow: hidden; margin: 0 auto; margin-right: 1em; transform: rotate(-10deg); } @media (min-width: 1124px) { #footer { position: fixed; left: var(--sidebar-width); bottom: 0; margin-top: 0; margin-left: -55px; padding: 0; width: 120px; height: 40px; z-index: 3; } .page-top { margin-right: auto; } } .page-top a { color: var(--sidebar-icon-color); } .page-top a:hover { color: var(--sidebar-icon-hover-color); } .page-top a:before { content: \"arrow_upward\"; display: block; font-family: Material Icons; font-size: 22px; height: 40px; width: 40px; line-height: 40px; transform: rotate(10deg); } /*---------- CONTEXTUAL POPUP ----------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 1em; width: 180px; border-radius: 0; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: 0; float: none; margin: 0; } div.ContextualPopup .Userpic img { border: 5px solid var(--icon-border-color); border-radius: 50%; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em 0 0; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*---------- NAVSTRIP ----------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; transform: translateY(-100%); position: absolute; transition: transform 0.7s; z-index: 9; gap: 25px; } #lj_controlstrip:before { content: \"\"; position: absolute; bottom: -65px; height: 60px; width: 40px; right: 10px; } #lj_controlstrip:after { font-family: \"Material Icons\"; content: \"settings\"; font-size: 22px; position: absolute; bottom: -65px; height: 40px; width: 40px; right: 10px; cursor: pointer; line-height: 40px; text-align: center; background: var(--border-color-two); color: var(--sidebar-icon-color); background-clip: padding-box; transform: rotate(-10deg); } #lj_controlstrip:hover { transform: translateY(0); } @media (min-width: 1124px) { #lj_controlstrip { position: fixed; } #lj_controlstrip:before { left: var(--sidebar-width); right: auto; margin-left: -10px; } #lj_controlstrip:after { left: var(--sidebar-width); right: auto; margin-left: -15px; } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--controlstrip-text-size); line-height: 1.5; padding: 0.25em 0.5em; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--controlstrip-text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--border-color-two); background: var(--border-color-two) !important; color: var(--sidebar-icon-color) !important; font-family: var(--main-font) !important; font-size: var(--controlstrip-text-size) !important; } #lj_controlstrip input[type=\"submit\"] { border: 0; background: transparent; font-size: var(--controlstrip-text-size); /*color: var(--text-color);*/ /*font-family: var(--title-font) !important;*/ padding: 0 0.25em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border: 3px solid var(--icon-border-color); border-radius: 50%; }"""; } ##=============================== ## Custom Settings ##=============================== set font_comment_title_units = "em"; set font_entry_title_units = "em"; set font_journal_subtitle_units = "em"; set font_journal_title_units = "em"; set font_module_heading_units = "em"; set font_module_text_units = "em"; set include_default_stylesheet = true; set layout_type = "one-column-split"; set linked_stylesheet = "https://fonts.googleapis.com/css2?family=Homemade+Apple&family=Nunito+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"; set module_active_show = false; set module_calendar_order = 5; set module_calendar_show = false; set module_credit_show = false; set module_customtext_order = 3; set module_customtext_show = true; set module_cuttagcontrols_show = false; set module_pagesummary_show = false; set module_poweredby_show = false; set module_search_show = false; set module_syndicate_show = false; set module_tags_show = false; set module_time_show = false;

Go to Your Custom Layers under Select Style. Find the theme called "Proof" and click "Apply Theme." (Select/Customize Style is also where you can set your Journal Title and Journal Subtitle, if you haven't done that yet.)

CUSTOMIZING YOUR LAYOUT

To add the sidebar image: go to Text under Customize Style. Find Text for the 'Custom Text' box, paste in the text below, and click "Save Changes." You can edit the image by going to Custom CSS (see below).
<div class="sidebar-image"></div>
To customize your layout, you can change the values in Custom CSS:
- Find and replace SIDEBAR_IMAGE_URL with your sidebar image. The image height and width can adjusted below that line.
- Every colour is named in the CSS, but if you're overwhelmed, here's the colours I used:
  - #FFF - borders
  - #FFF3F7 - bg color of sidebar icons, blockquotes, entry poster names
  - #F5E6E8 - main bg, sidebar title
  - #AAA1C8 - main link color, date/time color
  - #967AA1 - sidebar color
  - #192A51 - main text color, icon colors, bg color of sidebar links & entry poster display names
- By default, this layout uses "Homemade Apple" (script font) and "Nunito Sans" (sans-serif font) but you can swap those out in the Custom stylesheet URL.

To add sidebar links: go to Links List.

A few things you might also want to do:
- Disable customized comment pages: Go to Display Settings, scroll down to Entry Page Default: Your Journal and uncheck the box. Then go to Entry Pages: Shown to You and swap that over to "Site skin."
- Disable the contextual hover over icons: Go to Display Settings, scroll down to Hover Menu and change the dropdown to "Nothing."

OPTIONAL SPLASH PAGE

Go to Post an Entry. Click Edit Date. Check Don't show on Reading Pages.

Post the following into the entry. Edit the SPLASH_IMG_URL, SPLASH_TITLE, SPLASH_SUBTITLE and the links.
<lj-raw><div class="mask"><div class="vertical-center"> <div class="splash-image"> <img style="max-height:250px; max-width:250px;" src="SPLASH_IMG_URL" /> </div> <div class="splash-text" style="width:400px; font-size:12px;"> <h1 class="title"> SPLASH_TITLE </h1> <h2 class="subtitle"> SPLASH_SUBTITLE </h2> <a href="#"> Link 1 </a> <a href="#"> Link 2 </a> <a href="#"> Link 3 </a> <a href="#"> Link 4 </a> <a href="#"> Link 5 </a> <a href="#"> Link 6 </a> </div> </div></div></lj-raw>
Post the entry and copy the URL of the entry. Go Display Settings and find IDs or URLs of Sticky Entries. Paste your entry URL into "Sticky 1" and click the "Save" button.

Go to Custom CSS and paste in the following at the bottom of Use embedded CSS: /*---------- SPLASH PAGE ----------*/ .page-recent { height:100vh; width:100vw; overflow:hidden; } .page-recent .mask { position:fixed; top:0; left:0; right:0; bottom:0; z-index:10; background-color:var(--sidebar-background-color); } .vertical-center { height:100%; width:100%; display:flex; align-items:center; justify-content:center; text-align:center; flex-direction:column; } .page-recent .mask a, .page-recent .mask a:visited { color:#121212; } .page-recent .mask a:active, .page-recent .mask a:hover { color:#2a9d8f; } .page-recent .mask .splash-image { display:inline-block; background:var(--border-color); margin:20px; padding:20px; transform:rotate(-2deg); line-height:1; } .page-recent .mask .splash-text { width:400px; max-width:100%; display:flex; flex-wrap:wrap; gap:5px; line-height:1; text-align:center; font-size:12px; } .page-recent .mask .title { width:100%; color:var(--title-color); font-family:var(--title-font); font-size:2.2em; font-weight:normal; } .page-recent .mask .subtitle { width:100%; color:var(--subtitle-color); margin-top:-1.5em; font-size:1.2em; text-transform:uppercase; letter-spacing:0.25em; line-height:1; } .page-recent .mask .splash-text a { min-width:100px; flex:1 1 0; padding:8px; letter-spacing:1px; text-transform:uppercase; background:var(--sidebar-link-background-color); color:var(--sidebar-link-color); } .page-recent .mask .splash-text a:hover { background:var(--sidebar-link-hover-color); color:var(--sidebar-link-color); backdrop-filter:blur(1px); } .page-recent #lj_controlstrip { z-index:20; } .page-recent #lj_controlstrip:after { left:auto; right:25px; margin-left:0; transform:none; } @media (min-width:800px) { .mask .vertical-center { flex-direction:row; } }
You're done! Check your journal to see if the splash page is showing.

Please ask below if you have any questions! I'm always happy to help people customize this layout if they want something in particular.

LAYOUT: Proof

no subject