Neon

[rosecarmine]

LIVE PREVIEW

FEATURES

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

INSTRUCTIONS

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

Comments

[sweettartheart]

Gorgeous!

[rosecarmine]

Thank you!

[sodium_amytal]

omg beautiful! it was time to change my journal layout anyway XD

[rosecarmine]

Thank you!

[lofivibe]

Gorgeous! I absolutely love these! Thank you so much for sharing!

[rosecarmine]

Thank you!

[intothisshadow]

Yay! New layout from you :D This are gorgeous! I switched to the red-green one immediately :D Thank you so much for making wonderful layouts :D

[rosecarmine]

Thank you dear!

[zimena]

Wow, these are gorgeous! Great to see you making new ones again!

[rosecarmine]

Thank you!

[skargasm]

Ooh yes this is gorgeous!!! Thank you so much!

[rosecarmine]

Thank you!

[sweettartheart]

Could you tell me how to assign an icon or add text that says "Filter:" before the name of an access filter? The name of the filter appears at the bottom of an entry, just above the tags assigned to that entry.

[rosecarmine]

You can add:
#metadata-groups:before {
content: "lock";
font-family: Material Icons;
font-size: 22px;
vertical-align: middle;
margin-right: 5px;
color: var(--entry-icon-color);
}
You can replace "lock" with another icon from here https://fonts.google.com/icons or, if you want text, replace with "Filter:" and delete the rest of the code.

[sweettartheart]

Awesome, thank you! I went with filter_list because it amused me. :D Again, such a beautiful layout. Thank you for sharing it.

[rosecarmine]

You're welcome and thank you again ^_^

[violateraindrop]

Very pretty! One day I will get around to changing my layout. Until then, I added this entry to my memories ;)

[haebin]

Beautiful! 🧡

[florianschild]

This is so pretty! I wanted to change my layout after having the same one since I joined years ago. I followed your instructions and it worked so perfectly. Thank you!

[valor]

Hello! I'm unsure how busy you might be, or whether you'll see this, but I have a question regarding how the code works.

I got it set up on a community and it went pretty well, thanks to your clear instructions. However, I noticed a behavior that I can't seem to find a way to correct myself, and I was hoping to get your insight.

On Mobile, the sidebar/navigation module gets pushed down to the bottom of the page. I would've expected it to jump to the top of the page. Is there something in the code that I could change to make the navigation move to the top instead of the bottom?

[rosecarmine]

Hi! This the default behavior in multiple column layouts so unfortunately you can't put it at the top.

[valor]

Thank you so much for the reply! I appreciate you taking the time to clarify that for me, and all the codes you share here.