myrtillenne | Fragment

LIVE PREVIEW

FEATURES

sidebar image (set to "cover")
default icon, navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
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.
Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - fragment (tabula rasa) - https://myrtillenne.dreamwidth.org - image - unsplash.com -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Source Sans Pro, sans-serif; --title-font: Charm, sans-serif; --background-color: #302d40; --text-color: #b5b3c4; --link-color: #f8b8b6; --link-hover-color: #c5b9fd; --title-color: #c5b9fd; --title-shadow-color: #302d40; --entry-width: 1000px; --entry-border-color: #69638d; --entry-header-background-color: #f8b8b6; --entry-header-text-color: #302d40; --entry-header-link-color: #544e7c; --entry-header-link-hover-color: #302d40; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/122915.jpg"); --sidebar-width: 36vw; --sidebar-background-color: rgba(30, 28, 38, 0.7); --sidebar-border-color: #1e1c26; --sidebar-text-color: #c7c5d1; --sidebar-link-color: #f8b8b6; --sidebar-link-hover-color: #c5b9fd; --customtext-height: 9em; } 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, a:link, a:visited { text-decoration: none; transition: color 0.4s; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } q { font-style: italic; } blockquote { background: var(--entry-header-background-color); clip-path: polygon(0 0, 100% 0, 100% 100%, 1em 100%); padding: 1em 1em 1em 2em; margin: 1em 0; color: var(--entry-header-text-color); } blockquote a { color: var(--entry-header-link-color); } blockquote a:hover { color: var(--entry-header-link-hover-color); } @media (min-width: 1024px) { #content { border-left: calc(var(--sidebar-width) + 4vw) solid transparent; } } @media (min-width: 800px) { #primary { max-width: var(--entry-width); margin: 0 auto; padding: 0 40px; } } #header > .inner { text-align: center; padding: 40px 2em 0; } h1#title { font-size: 2em; font-family: var(--title-font); margin: 0; padding: 0; line-height: 1; } h2#subtitle { font-size: 1em; margin: 0; padding: 0.25em 0 0; font-weight: normal; } @media (min-width: 1024px) { #header { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: calc(100% - 4vw); border: 2vw solid var(--sidebar-border-color); background-image: var(--sidebar-image); background-size: cover; background-position: center center; background-clip: content-box; } #header > .inner { padding: 10vh 2em 0; } h1#title { color: var(--title-color); text-shadow: 1px 1px 5px var(--title-shadow-color), -1px -1px 5px var(--title-shadow-color); } h1#title a { color: var(--title-color); } h2#subtitle { color: var(--title-color); text-shadow: 1px 1px 5px var(--title-shadow-color), -1px -1px 5px var(--title-shadow-color); } } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment { padding: 5px; border: 1px solid var(--entry-border-color); margin: 40px 0; } .entry .header, .comment .header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0% 100%); background: var(--entry-header-background-color); padding: 1.5em; color: var(--entry-header-text-color); } .entry .entry-title, .full .comment-title { font-size: 1.5em; margin: 0 0 0.5em; padding: 0; font-family: var(--title-font); position: relative; line-height: 1; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--entry-header-link-color); } .entry .entry-title a:hover { color: var(--entry-header-link-hover-color); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .restrictions-NSFW .restrictions:before { content: "NSFW"; padding-right: 0.25em; } .restrictions-18 .restrictions:before { content: "18+"; padding-right: 0.25em; } .entry .datetime a { color: var(--entry-header-text-color); } .entry .contents { padding: 0 2em; } .has-userpic .userpic { float: right; shape-outside: circle(50%); margin: 0 -15px 0 1em; } .entry .userpic img, .comment .userpic img { display: block; border-radius: 50%; border: 5px solid var(--entry-header-background-color); padding: 5px; max-width: 50px; max-height: 50px; } @media (min-width: 640px) { .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; } } .entry .poster { font-size: 0; } .entry .poster:before { content: ""; display: block; font-size: var(--text-size); padding-top: 1em; } .entry .poster .ljuser { font-size: var(--text-size); margin-right: 0.5em; } .entry .poster .ljuser a, .comment .poster .ljuser a { color: var(--text-color); } .entry .poster .ljuser:before, .comment .poster .ljuser:before { content: "@"; color: var(--link-color); } .poster .ljuser img { display: none; } .poster.empty { display: none; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { padding-top: 2em; margin-bottom: 2em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action:before { content: "+"; display: inline-block; font-size: 26px; line-height: 22px; vertical-align: bottom; font-family: arial; } .cuttag-action-after:before { transform: rotate(45deg); } .cut-open, .cut-close { display: none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 0.25em; } .tag { text-align: left; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; display: inline; line-height: 1; } ul.entry-management-links::before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links li { display: inline; margin: 0 0.5em; } ul.entry-interaction-links li { display: inline; margin: 0 0.5em; } .entry .footer, .comment .footer { padding: 0 2em 2em; clear: both; text-align: center; } /*--------------- comments ---------------*/ .comment-pages { text-align: center; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } .comment .contents { padding: 0 2em; } .full .comment .poster { display: block; padding-top: 1em; } .comment-content { padding: 2em 0; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; display: inline; line-height: 1; } ul.comment-management-links li { padding: 0.5em; display: inline; } ul.comment-interaction-links li { padding: 0.5em; display: inline; } #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { text-align: center; margin-bottom: 40px; } .bottomcomment input, .bottomcomment select { border: 1px solid var(--entry-border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .partial .comment { padding: 1em; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { border: 1px solid var(--entry-border-color); padding: 2em; margin-bottom: 40px; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { padding: 5px; border: 1px solid var(--entry-border-color); margin: 40px 0; } .month-wrapper .header, .tags-container .header, .icons-container .header { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0% 100%); background: var(--entry-header-background-color); padding: 1.5em; color: var(--entry-header-link-color); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; margin: 0 0 0.5em; padding: 0; font-family: var(--title-font); position: relative; line-height: 1; } .month .contents, .tags-container .contents, .icons-container .contents { padding: 2em; } .month .footer, #primary .manage-link { padding: 0 2em 2em; text-align: center; line-height: 1; } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: collapse; width: 100%; border: none; text-align: center; } table.month tr { border: 1px solid var(--entry-border-color); border-right: none; border-left: none; } table.month th { font-weight: normal; } table.month tr:first-child { border-top: none; } table.month td:last-child, table.month th:last-child { border-right: none; } table.month td, table.month th { padding: 0.5em; border: 0; height: auto; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } .month dl { margin: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dl dt { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0% 100%); background: var(--entry-header-background-color); padding: 1em; font-family: var(--title-font); font-weight: bold; font-size: 1.2em; line-height: 1; } .month dl dt a { color: var(--entry-header-link-color); } .month dl dt a:hover { color: var(--entry-header-link-hover-color); } dd { margin: 0; padding: 1em 2em 2em; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation { text-align: center; } #archive-year .navigation ul, #archive-month .navigation ul form { display: inline-block; } #archive-year .navigation li, #archive-month .navigation li { display: inline-block; padding: 0 0.5em; } #archive-month .navigation { padding: 0 2em 2em; text-align: center; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--entry-border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { padding: 0.25em; text-align: center; } .icons-container .icon { border-top: 1px solid var(--entry-border-color); display: flex; flex-wrap: wrap; align-items: center; margin-top: 1em; padding-top: 1em; } .icon-image img { display: block; } .icon-info { padding-left: 1em; flex: 1; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ sidebar ------------*/ .module-section-one { text-align: center; } .module-section-one .inner { margin: 2em; } @media (min-width: 1024px) { #secondary { position: fixed; left: 0; bottom: 0; width: var(--sidebar-width); margin: 2vw; z-index: 1; } .module-section-one { margin: 5px; position: relative; } .module-section-one:before { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 100%; padding-top: 50px; clip-path: polygon(0 50px, 100% 0, 100% 100%, 0% 100%); background: var(--sidebar-background-color); backdrop-filter: blur(1px); z-index: -1; } .module-section-one .inner { padding: 15px 2em 2em; margin: 0; } } .module { display: inline; color: var(--sidebar-text-color); } .module a { color: var(--sidebar-link-color); } .module a:hover { color: var(--sidebar-link-hover-color); } .module .userpic { margin-bottom: 1em; } .module .userpic img { border-radius: 50%; border: 5px solid var(--entry-header-background-color); padding: 5px; } @media (min-width: 1024px) { .module .userpic { position: absolute; top: -130px; left: 20px; display: flex; align-items: flex-end; height: 100px; margin: 0; } .module .userpic img { display: block; border: 5px solid var(--sidebar-background-color); backdrop-filter: blur(1px); } } .module-content { display: inline; } .module-content ul { padding: 0; margin: 0; list-style: none; display: inline; } .module li { display: inline-block; line-height: 1; padding: 0.25em 0.5em; } .module-customtext { display: block; max-height: var(--customtext-height); overflow: auto; margin-top: 1em; text-align: left; } .module-customtext::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext::-webkit-scrollbar-track { background: transparent; } .module-customtext::-webkit-scrollbar-thumb { background: var(--sidebar-link-color); } .module-customtext::-webkit-scrollbar-corner { background: var(--sidebar-link-color); } .module h2, .module .manage-link, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation ul { margin: 0; padding: 0; text-align: center; } .navigation li { line-height: 1; display: inline; padding: 0 0.5em; } @media (min-width: 1024px) { #entries .navigation li { padding: 1em 0; } li.page-back { float: left; } li.page-forward { float: right; } } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { margin: 40px 0; text-align: center; } #footer .inner { max-width: var(--entry-width); margin: 0 auto; } @media (min-width: 800px) { #footer .inner { max-width: var(--entry-width); margin: 0 auto; padding: 0 40px; } } @media (min-width: 1024px) { #footer { margin-left: calc(var(--sidebar-width) + 4vw); } } .page-top { border-top: 1px solid var(--entry-border-color); padding-top: 1em; line-height: 1; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-header-background-color); color: var(--entry-header-text-color); border: 0; padding: 1.5em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--entry-header-link-color); } .ContextualPopup a:hover { color: var(--entry-header-link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 50%; border: 5px solid var(--background-color); padding: 5px; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } div.ContextualPopup li { } /*------------ control strip ------------*/ #lj_controlstrip { background: transparent; color: var(--text-color); padding: 0.75em 0; width: auto; justify-content: center; text-align: center; } @media (min-width: 800px) { #lj_controlstrip { padding: 0.75em 40px; } } @media (min-width: 1024px) { #lj_controlstrip { margin-left: calc(var(--sidebar-width) + 4vw); } } #lj_controlstrip:before { content: ""; width: 100%; order: 9; flex: 0 0 100%; } #lj_controlstrip:after { content: ""; width: 100%; max-width: var(--entry-width); border-bottom: 1px solid var(--entry-border-color); padding-top: 1em; margin: 0 auto; order: 10; } #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(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--entry-border-color); background: var(--background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; text-transform: uppercase; padding: 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-radius: 50%; border: 2px solid var(--entry-header-background-color); padding: 3px; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Source+Sans+Pro&family=Charm&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".