Medallion

[rosecarmine]

LIVE PREVIEW

FEATURES

• default icon, navigation links, links list, custom text
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the  "Select style" page, search for "Tabula Rasa" and apply any theme.
2. Choose the "1 Column (modules at bottom; no sidebar)" 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, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
5. Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - medallion (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --text-color: #6d543d; --line-height: 1.5; --background-color: #f8f5f3; --link-color: #e68328; --link-hover-color: #b17043; --main-font: Libre Baskerville, sans-serif; --title-font: Libre Baskerville, sans-serif; --title-color: #6d543d; --title-hover-color: #b17043; --entry-width: 1000px; --border-color: #c9ab8b; --sidebar-width: 36vw; } 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 { padding: 1em; margin: 1em 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } blockquote::first-letter { font-size: 3.6em; float: left; padding: 0 0.1em 0 0; line-height: 0.8em; font-style: italic; } @media (min-width: 1024px) { #content { border-left: var(--sidebar-width) solid transparent; } } #primary { max-width: var(--entry-width); margin: 0 auto; padding: 0 2em; } #header > .inner { text-align: center; padding: 3em 2em 0; } h1#title { font-size: 2em; font-family: var(--title-font); font-style: italic; color: var(--title-color); margin: 0; padding: 0; line-height: 1; } h1#title a { color: var(--title-color); } h1#title a:hover { color: var(--title-hover-color); } h2#subtitle { font-size: 1em; color: var(--title-color); 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: 100%; border-right: 1px solid var(--border-color); } #header > .inner { padding: 10vh 2em 0; } } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry-wrapper, .comment-wrapper { margin: 3em 0; } .entry .header { text-align: center; padding-bottom: 2em; } .has-userpic .entry .header { margin-bottom: 31px; } @media (min-width: 800px) { .has-userpic .entry .header { margin: 0; } } .entry .entry-title, .full .comment-title { font-size: 1.5em; margin: 0 0 1.5em; padding: 0; font-family: var(--title-font); font-style: italic; line-height: 1; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--title-color); } .entry .entry-title a:hover { color: var(--title-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; } .has-userpic .restrictions, .has-userpic .access-filter { height: 56px; padding: 0; position: relative; z-index: 1; } .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; } .has-userpic .entry .datetime { height: 56px; padding: 0; position: relative; z-index: 1; } .entry .datetime a { color: var(--text-color); } @media (min-width: 800px) { .entry .datetime { float: left; padding-bottom: 1em; } .restrictions, .access-filter { float: right; padding-left: 0.25em; padding-bottom: 1em; } } .entry .contents { position: relative; clear: both; } .has-userpic .entry .contents { padding-top: 31px; } .no-userpic .entry .contents:before { content: ""; display: block; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .has-userpic .entry .userpic { display: flex; align-items: center; width: 100%; height: 62px; position: absolute; top: -31px; left: 0; } .entry .userpic:before, .entry .userpic:after { content: ""; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex: 1; } .entry .userpic img, .comment .userpic img { padding: 5px; max-width: 50px; max-height: 50px; display: block; border-radius: 50%; border: 1px solid var(--border-color); } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); padding-top: 1em; } .has-userpic .entry .poster .ljuser { padding-top: 0; } .entry .poster .ljuser:nth-child(1) { float: left; } .entry .poster .ljuser:nth-child(2) { float: right; } .poster .ljuser b { font-weight: normal; } @media (min-width: 800px) { .has-userpic .entry .contents { padding-top: 0; } .has-userpic .entry .userpic { height: 112px; top: -56px; } .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; } .entry .poster .ljuser { padding-top: 1em; } .has-userpic .entry .poster .ljuser { display: flex; width: calc(50% - 56px); min-height: 56px; padding: 0; align-items: flex-end; position: relative; z-index: 1; } .has-userpic .entry .poster .ljuser:nth-child(2) { justify-content: flex-end; } .has-userpic .poster.empty { height: 56px; display: block; } } .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 { display: inline-block; width: 24px; height: 24px; font-size: 24px; line-height: 1em; text-align: center; vertical-align: middle; font-family: arial; border: 1px solid var(--border-color); border-radius: 50%; } .cuttag-action:before { content: "+"; display: block; } .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-bottom: 3em; clear: both; text-align: center; } #primary .separator-after { display: flex; align-items: center; width: 100%; } #primary .separator-after:before, #primary .separator-after:after { content: ""; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex: 1; } #primary .separator-after .inner { border: 1px solid var(--border-color); border-radius: 50%; padding: 3px; } #primary .separator-after .inner:before { content: ""; width: 20px; height: 20px; display: block; border-radius: 50%; background: var(--border-color); } /*--------------- comments ---------------*/ .comment-pages { text-align: center; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .full .thread-depth { display: block; margin-bottom: 1em; } .comment .header { float: left; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text { display: none; } .comment .userpic { float: right; shape-outside: circle(50%); } .full .comment .poster { display: block; clear: left; } .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: 3em; } .bottomcomment input, .bottomcomment select { border: 1px solid var(--border-color); background: var(--background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .partial .comment { padding-bottom: 3em; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { border: 1px solid var(--border-color); padding: 2em; margin-bottom: 40px; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--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 { margin: 3em 0; } .month-wrapper .header, .tags-container .header, .icons-container .header { padding-bottom: 2em; text-align: center; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; margin: 0; padding: 0; font-family: var(--title-font); font-style: italic; line-height: 1; } .month .footer { padding: 2em 0 3em; text-align: center; line-height: 1; } #primary .manage-link { padding-top: 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-bottom: 1px solid var(--border-color); } table.month th { font-weight: normal; } table.month tr:first-child { border-top: 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 { font-family: var(--title-font); font-weight: bold; font-size: 1.2em; line-height: 1; text-align: center; font-style: italic; } .month dl dt a { color: var(--title-color); } .month dl dt a:hover { color: var(--title-hover-color); } dd { margin: 0; padding: 2em 0; } .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; text-align: center; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--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(--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 { margin: 0 auto; max-width: var(--entry-width); } .module-section-one .inner { margin: 3em 2em; column-count: 3; column-width: 140px; } @media (min-width: 1024px) { #secondary { position: fixed; left: 0; bottom: 0; width: var(--sidebar-width); z-index: 1; } } .module-userprofile { column-span: all; display: flex; align-items: center; margin-bottom: 1.5em; } .module-userprofile:before, .module-userprofile:after { content: ""; height: 3px; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); flex: 1; } .module .userpic { margin: 0 auto; border: 1px solid var(--border-color); padding: 5px; border-radius: 50%; } .module .userpic img { display: block; border-radius: 50%; } .module-content ul { padding: 0; margin: 0; list-style: none; } .module-content li { break-inside: avoid; padding-left: 24px; position: relative; } .module-content li a:before { content: ""; display: block; position: absolute; width: 6px; height: 6px; padding: 2px; background: var(--border-color); background-clip: content-box; border: 1px solid var(--border-color); margin-top: -6px; top: 50%; left: 0; border-radius: 50%; } .module-customtext { column-span: all; overflow: auto; margin-top: 1.5em; } @media (min-width: 1024px) { .module-customtext { max-height: 25vh; } } .module-customtext::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext::-webkit-scrollbar-track { background: transparent; } .module-customtext::-webkit-scrollbar-thumb { background: var(--border-color); } .module-customtext::-webkit-scrollbar-corner { background: var(--border-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) { li.page-back { float: left; } li.page-forward { float: right; } } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { margin: 3em 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 2em; } } @media (min-width: 1024px) { #footer { margin-left: var(--sidebar-width); } } .page-top { line-height: 1; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { color: var(--text-color); background: var(--background-color); border: 0; padding: 2em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0 0 1em; padding: 1em 0; border-bottom: 1px solid var(--border-color); } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 50%; border: 1px solid var(--border-color); padding: 5px; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } /*------------ 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 2em; } } @media (min-width: 1024px) { #lj_controlstrip { margin-left: var(--sidebar-width); } } #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(--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(--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; background: transparent !important; text-transform: uppercase; font-size: var(--text-size); color: var(--text-color); font-family: var(--main-font); 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: 1px solid var(--border-color); padding: 3px; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Libre+Baskerville:ital@0;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".

Comments

[skargasm]

This is absolutely beautiful!!

[intothisshadow]

Beautiful work! Mem'ed.

[impala_chick]

I really love this! I've been looking for a new layout :D

[myulalie]

Love it, thanks for sharing ♥