serenitywheeler

LIVE PREVIEW

FEATURES

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

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula rasa" and apply any theme.
Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" 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 "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)".

Green-red:/*------------------------------------- - layout - neon (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - image - https://www.freepik.com/author/svstudioart -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #b0acaf; --line-height: 1.5; --background-color: #1c2124; --link-color: #ec4882; --link-hover-color: #27c2cb; --main-font: Syne, sans-serif; --title-font: Federant, sans-serif; --gradient1-color: #27c2cb; --gradient2-color: #ec4882; --title-color:#293338; --heading-color: #c0bcbf; --heading-link-color: #ec4882; --heading-link-hover-color: #49becb; --heading-background-color: #293338; --entry-background-color: #353e44; --icon-color: #27c2cb; --icon-hover-color: #ec4882; --icon-background-color: #1c2124; --entry-icon-color: #27c2cb; --sidebar-width: 350px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/196215.jpg"); --sidebar-image-height: 500px; --spacing: 50px; --entry-width: 1000px; --userpic-size: 100px; }
Purple-yellow:/*------------------------------------- - layout - neon (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - image - https://www.freepik.com/author/freepik -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #b0acaf; --line-height: 1.5; --background-color: #1F1C24; --link-color: #AC95D9; --link-hover-color: #F7C973; --main-font: Syne, sans-serif; --title-font: Federant, sans-serif; --gradient1-color: #F7C973; --gradient2-color: #9374CD; --title-color:#293338; --heading-color: #c0bcbf; --heading-link-color: #AC95D9; --heading-link-hover-color: #F7C973; --heading-background-color: #2F2938; --entry-background-color: #423D50; --icon-color: #AC95D9; --icon-hover-color: #F7C973; --icon-background-color: #1F1C24; --entry-icon-color: #F7C973; --sidebar-width: 350px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/199157.jpg"); --sidebar-image-height: 500px; --spacing: 50px; --entry-width: 1000px; --userpic-size: 100px; }
Layout:/*--------------- 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; } blockquote { margin: 1em 0; padding: 1em; border: 1px solid transparent; background: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 8px; } blockquote:before { display: inline-block; content: "format_quote"; font-family: Material Icons; font-size: 26px; line-height: 0; vertical-align: middle; margin-right: 10px; color: var(--entry-icon-color); } /*------------ content ------------*/ #canvas { position: relative; clear: left; } @media (min-width: 800px) { #content > .inner:first-child { margin: var(--spacing); } } @media (min-width: 1024px) { #content > .inner:first-child { max-width: calc(var(--entry-width) + var(--spacing)); } #content > .inner:first-child { margin: var(--spacing) auto; padding: 0 var(--spacing); } .two-columns-left #content > .inner:first-child { border-left: var(--sidebar-width) solid transparent; } .two-columns-right #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } .two-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; } .two-columns-left #primary > .inner:first-child { padding-left: var(--spacing); } .two-columns-right #primary > .inner:first-child { padding-right: var(--spacing); } } @media (min-width: 1280px) { .two-columns-left #content > .inner:first-child { border-right: calc(var(--userpic-size) + 10px) solid transparent; } .two-columns-right #content > .inner:first-child { border-left: calc(var(--userpic-size) + 10px) solid transparent; } } /*--------------- header ---------------*/ #header { background: var(--heading-background-color); border-bottom: 5px solid; border-image: linear-gradient( to right, var(--gradient2-color), var(--gradient1-color) ) 1; text-align: center; margin-bottom: var(--spacing); } #header > .inner { padding: 1em; font-family: var(--title-font); } #header a { color: var(--heading-link-color); } #header a:hover { color: var(--heading-link-hover-color); } h1#title { font-size: 1.2em; line-height: 1.2; padding: 0; margin: 0; display: inline; } h2#subtitle { font-size: 1.2em; font-weight: normal; padding: 0; margin-left: 0.5em; line-height: 1; color: var(--heading-color); display: inline; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment { margin-bottom: var(--spacing); background: var(--entry-background-color); border-radius: 8px; position: relative; } .sticky-entry-icon, .admin-post-icon { display: none; } .header { background: var(--heading-background-color); border-radius: 8px 8px 0 0; border-bottom: 3px solid; border-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ) 1; } .header .inner { padding: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .entry .entry-title, .full .comment-title { font-size: 1.2em; line-height: 1.2; font-weight: normal; font-family: var(--title-font); padding: 6px 10px; margin: 0; flex-grow: 1; color: var(--heading-color); } .entry .entry-title a, .full .comment-title a { color: var(--heading-link-color); } .entry .entry-title a:hover, .full .comment-title a:hover { color: var(--heading-link-hover-color); } .sticky-entry .header .inner:before { content: "push_pin"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; color: var(--icon-color); background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; } .admin-post .header .inner:after { content: "verified"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; color: var(--icon-color); background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; order: -1; } .header .datetime { color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } .sticky-entry .datetime { display: none; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--icon-color); } .entry .datetime a:hover { color: var(--icon-hover-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; color: var(--icon-color); } .entry .contents, .comment .contents { margin-top: 2em; padding: 0 2em; } .two-columns-left .userpic { float: right; margin-left: 10px; } .two-columns-right .userpic { float: left; margin-right: 10px; } .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 8px; } @media (min-width: 640px) { .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } @media (min-width: 1280px) { .has-userpic .userpic { position: absolute; top: 0; right: -10px; transform: translateX(100%); margin: 0; } .two-columns-right .has-userpic .userpic { left: -10px; transform: translateX(-100%); right: auto; } } .entry .poster { font-size: 0; display: block; } .two-columns-left .entry .poster { clear: left; } .two-columns-right .entry .poster { clear: right; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster .ljuser:before, .full .poster:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .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 img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 5px; } .cuttag-action:after { content: ""; height: 0; width: 100%; height: 1px; background: linear-gradient( to right, transparent 50%, var(--entry-background-color) 50% ), linear-gradient(to right, var(--gradient1-color), var(--gradient2-color)); background-size: 10px 1px, 100% 1px; } .cut-open, .cut-close { display: none; } .cut-text { font-weight: normal; margin-left: 27px; display: block; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { padding-bottom: 0.5em; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "queue_music"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-location:before { content: "flag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .entry .footer { background: var(--heading-background-color); border-radius: 0 0 8px 8px; } .entry .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .entry .footer .inner:before { content: ""; flex: 0 0 100%; width: 100%; border-bottom: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; } .entry div.tag { background: var(--entry-background-color); padding: 0 2em 0.5em; flex: 0 0 100%; box-sizing: border-box; order: -1; } .entry div.tag:before { content: "tag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } .tag-text { display: none; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; list-style: none; } .entry ul.entry-management-links, .entry ul.entry-interaction-links { padding: 10px; } ul.entry-management-links.icon-links li { display: inline; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { display: inline; padding: 0 5px; font-family: var(--title-font); } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a:before { display: inline-block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; transition: color 0.4s ease; } ul.entry-management-links.icon-links li a:hover:before { color: var(--icon-hover-color); } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .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-management-links.text-links li a, ul.entry-interaction-links li a { color: var(--heading-link-color); } ul.entry-management-links.text-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--heading-link-hover-color); } /*--------------- comments ---------------*/ .comment-pages { margin: 10px 0; padding: 1em 2em; color: var(--heading-color); font-family: var(--title-font); background: var(--heading-background-color); line-height: 1; text-align: center; border-radius: 8px; } .comment-pages:last-of-type { margin-bottom: var(--spacing); } .comment-pages a { color: var(--heading-link-color); } .comment-pages a:hover { color: var(--heading-link-hover-color); } .comment-wrapper { min-width: 15em; } .thread-depth { display: inline-block; color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } .no-subject .comment .comment-title, .no-subject .entry-title { padding: 0; margin: 0; } .partial .comment-title { margin: 0; } .comment-date-text, .comment-from-text, .comment-ip-text { display: none; } .full .poster { display: block; } .two-columns-left .full .poster { clear: left; } .two-columns-right .full .poster { clear: right; } .comment .poster-ip { font-size: 1em; } .partial .comment { padding: 1em; background: var(--entry-background-color); border-radius: 8px; } .comment-content { padding: 2em 0; } .comment .footer { padding: 10px; background: var(--heading-background-color); border-radius: 0 0 8px 8px; border-top: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; color: var(--heading-text-color); } .comment .footer .inner { display: flex; flex-wrap: wrap; align-items: center; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; list-style: none; } ul.comment-management-links { order: -1; margin-right: auto; } ul.comment-management-links.icon-links li { display: inline; } .multiform-checkbox, ul.comment-management-links.text-links li, ul.comment-interaction-links li { display: inline; padding: 0 5px; font-family: var(--title-font); color: var(--heading-color); } ul.comment-management-links.text-links li a, ul.comment-interaction-links li a { color: var(--heading-link-color); } ul.comment-management-links.text-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--heading-link-hover-color); } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { display: inline-block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; transition: color 0.4s ease; } ul.comment-management-links.icon-links li a:hover:before { color: var(--icon-hover-color); } .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"; } .bottomcomment { padding: 10px; background: var(--heading-background-color); border-radius: 8px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; } .bottomcomment input { font-family: var(--main-font); font-size: var(--text-size); color: var(--icon-color); border: 2px solid transparent; margin: 0 5px; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; } .bottomcomment select { font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); border: 1px solid transparent; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 8px; padding: 6px; margin: 0 5px; } .bottomcomment label { flex-basis: 100%; text-align: center; } .bottomcomment ul.entry-interaction-links { margin-left: auto; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrformdiv .de { font-family: var(--title-font); } .entry #qrform { padding: 10px; } .comment #qrform { padding-top: 20px; } #qrdiv input, #qrdiv select, #qrdiv textarea { color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; border: 1px solid transparent; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; font-family: var(--title-font); color: var(--heading-link-color); } #postform { padding: 1.5em; background: var(--entry-background-color); border: 0; border-radius: 8px; margin: var(--spacing) 0; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { margin-bottom: var(--spacing); background: var(--entry-background-color); border-radius: 8px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.2em; line-height: 1; font-weight: normal; padding: 6px 10px; margin: 0; } #archive-year .month .footer, #primary .manage-link { font-family: var(--title-font); padding: 10px 20px; background: var(--heading-background-color); border-top: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; border-radius: 0 0 8px 8px; } #archive-year .month .footer a, #primary .manage-link a { color: var(--heading-link-color); font-family: var(--title-font); } #archive-year .month .footer a:hover, #primary .manage-link a:hover { color: var(--heading-link-hover-color); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } .month table { text-align: center; width: 100%; border-collapse: collapse; } .month tbody tr { background: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ); background-size: 100% 1px; background-position: left top; background-repeat: no-repeat; } .month td, .month th { padding: 1em 0; border: 0; font-weight: normal; width: 1em; } 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: " )"; } #archive-year .navigation li a { display: inline-block; color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } #archive-year .navigation li a:hover { color: var(--icon-hover-color); } .month dl { margin: var(--spacing) 0 0; } .month dt { float: left; display: block; width: 100%; background: var(--heading-background-color); border-radius: 8px 8px 0 0; font-size: 1.2em; line-height: 1.2; margin-bottom: 2em; padding: 10px; box-sizing: border-box; border-bottom: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; font-family: var(--title-font); } #primary .month dt a { color: var(--heading-link-color); } #primary .month dt a:hover { color: var(--heading-link-hover-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: 0 0 var(--spacing); padding: 2em; background: var(--entry-background-color); border-radius: 8px; } .month dd br { display: block; } #archive-month .month-back, #archive-month .month-forward { color: var(--icon-color); border-radius: 14px; line-height: 24px; padding: 6px; border: 2px solid transparent; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; } #archive-month .navigation select { border: 1px solid transparent; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)) !important; background-origin: border-box; background-clip: padding-box, border-box; color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #archive-month .navigation input[type="submit"] { border: 0; color: var(--heading-link-color); background: transparent; font-family: var(--title-font); font-size: var(--text-size); } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; list-style-position: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0.5em 2em; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { padding: 0.5em 2em; border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; } .icon { border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; padding: 1em; margin: 0; display: flex; } .icon-image { order: 2; padding-left: 1em; } .icon-image img { display: block; } .icon-info { flex-grow: 1; padding: 0 1em; } .icon-pages p { margin: 0; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } /*------------ modules ------------*/ @media (min-width: 1024px) { .two-columns #secondary { width: var(--sidebar-width); } .two-columns-left #secondary { float: left; margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #secondary { float: right; margin-right: calc(-1 * var(--sidebar-width)); } } .module { margin-bottom: var(--spacing); border-radius: 8px; overflow: hidden; } .module-content { background: var(--entry-background-color); padding: 1em; } .module .module-content ul { margin: 0; padding: 0; list-style: none; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content ul { margin: -1em; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content li { border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; padding: 0.5em 1em; } .module:not(.module-navlinks, .module-tags_cloud) .module-content li:before { content: "chevron_right"; font-family: Material Icons; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content li:hover:before { margin-right: 10px; } .module:not(.module-navlinks, .module-tags_multilevel, .module-tags_cloud) .module-content li:first-child { border: 0; } .module h2 { background: var(--heading-background-color); font-family: var(--title-font); font-size: 1.2em; font-weight: normal; display: flex; align-items: center; margin: 0; padding: 10px; padding-right: 20px; color: var(--heading-color); border-bottom: 3px solid; border-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ) 1; } .module h2 a { color: var(--heading-link-color); } .module h2 a:hover { color: var(--heading-link-hover-color); } .module h2:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; margin-right: auto; } .module-navlinks:before { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); background-image: var(--sidebar-image); background-size: cover; border-bottom: 3px solid; border-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ) 1; } .module-navlinks .module-content { padding: 10px; background: var(--heading-background-color); } .module-navlinks ul { display: flex; justify-content: space-evenly; flex-wrap: wrap; } .module-navlinks li a { display: block; font-size: 0; } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: var(--icon-color); border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; text-align: center; border-radius: 14px; transition: color 0.4s ease; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "calendar_month"; } .list-item-read a:before { content: "feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "travel_explore"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } .module-typelist h2:before { content: "explore"; } .module-tags_list h2:before, .module-tags_multilevel h2:before, .module-tags_cloud h2:before { content: "loyalty"; } .module-customtext h2:before { content: "comment"; } .module-navlinks li a:hover:before { color: var(--icon-hover-color); } .module-calendar .module-content { text-align: center; padding: 0; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: collapse; } .module-calendar table td { padding: 0.5em 0; } .module-calendar table th { padding: 0.5em 0; } .module-calendar table tr:not(:first-child) { background: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ); background-size: 100% 1px; background-position: left top; background-repeat: no-repeat; } .module-calendar .module-header a { padding-left: 0.25em; } .module-calendar h2:before { content: "calendar_month"; } .module-pagesummary h2:before { content: "article"; } .module-active h2:before { content: "local_fire_department"; } .module-search h2:before { content: "search"; } .module-cuttagcontrols h2:before { content: "content_cut"; } .module-syndicate h2:before { content: "rss_feed"; } .module-subscriptionfilters h2:before { content: "filter_alt"; } .module-credit h2:before { content: "code_off"; } .module-tags_multilevel .module-content ul { margin-left: 1em; } .module-tags_multilevel .module-content > ul { margin: 0; } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Neon" by myrtillenne'; } .module .manage-link, .module-userprofile, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation { padding: 10px; margin-bottom: var(--spacing); background: var(--heading-background-color); border-radius: 8px; overflow: hidden; } .navigation ul { margin: 0; padding: 0; list-style: none; } .navigation li { display: inline; color: var(--heading-color); } .navigation li a { color: var(--icon-color); } .navigation li a:hover { color: var(--icon-hover-color); } li.page-back { float: left; } li.page-forward { float: right; } li.page-back a, li.page-forward a { font-size: 0; } li.page-back a:before, li.page-forward a:before { font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { clear: both; background: var(--heading-background-color); border-top: 3px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; padding: 5px; text-align: center; } .page-top a { font-size: 0; color: var(--icon-color); } .page-top a:hover { color: var(--icon-hover-color); } .page-top a:before { content: "arrow_upward"; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 2px solid transparent; padding: 6px; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); background-origin: border-box; background-clip: padding-box, border-box; border-radius: 14px; display: inline-block; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; border-radius: 8px; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { border: 0; float: none; padding: 10px; } div.ContextualPopup .Userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; display: block; margin: 0 auto; border-radius: 8px; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid; border-image: linear-gradient( to left, var(--gradient1-color), var(--gradient2-color) ) 1; line-height: 1; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { color: var(--heading-color); background: var(--heading-background-color); justify-content: center; padding: 0.75em 0; } #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(--heading-link-color); } #lj_controlstrip a:hover { color: var(--heading-link-hover-color); text-decoration: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--heading-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid transparent !important; background-color: var(--entry-background-color); background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)) !important; background-origin: border-box; background-clip: padding-box, border-box; font-size: var(--text-size) !important; font-family: var(--main-font) !important; border-radius: 8px; color: var(--text-color) !important; padding: 6px !important; } #lj_controlstrip input[type="submit"] { color: var(--icon-color) !important; border-radius: 14px; border: 2px solid transparent !important; background-image: linear-gradient( var(--icon-background-color), var(--icon-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)) !important; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip img { border-radius: 8px; } #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=Material+Icons&family=Syne&family=Federant&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" (optional).

RESOURCES

icon font by Google
images from freepik by freepik, svstudioart

It's Time To Duel!

Reading

Custom Text

Links

Neon