drunk friends

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

10billionghosts

dreamcodes

10billionghosts

dreamcodes

splash nav code

10billionghosts

dreamcodes

Oct. 22nd, 2025

10billionghosts

dreamcodes

( code: CHARM POINT - a splash nav code in 6 mix-n-match flavors )

Tags: navigation & info pages

linky

iconic

linky

iconic

85 Kamen Rider Gotchard Icons

linky

iconic

Oct. 19th, 2025

linky

iconic

Find Them Here at

chemyxstory

wickedgame

iconic

wickedgame

iconic

multifandom icons.

wickedgame

iconic

Oct. 19th, 2025

wickedgame

iconic

Fandoms: Bed Friend, Echo, Euphoria, Fallout, Hawkeye, I Will Turn Back This Time, Jessica Jones, Killing Eve, Legends of Tomorrow, Mako Mermaids, Moon Knight, Motorheads, Mr. Robot, Ransom Canyon, Superman & Lois, Wednesday, Yellowjackets

rest HERE @

mundodefieras

baisemain

dreamcodes

baisemain

dreamcodes

kaskade roster

baisemain

dreamcodes

Oct. 17th, 2025

baisemain

dreamcodes

mobile-friendly character roster code
code generator with customizable colours + content preview

( KASKADE ROSTER )

Tags: cr charts & muselists

chocolatefrogs

iconic

chocolatefrogs

iconic

20 Harry Kim (Star Trek Voyager) icons

chocolatefrogs

iconic

Oct. 17th, 2025

chocolatefrogs

iconic

When I think about everything we've been through together, maybe it's not the destination that matters, maybe it's the journey

10billionghosts

dreamcodes

10billionghosts

dreamcodes

biosheet code

10billionghosts

dreamcodes

Oct. 15th, 2025

10billionghosts

dreamcodes

( code: LIMITED 5 STAR - a simple, mobile compatible biosheet code in HSR-inspired and non-HSR-inspired flavors )

Tags: navigation & info pages

chocolatefrogs

iconic

chocolatefrogs

iconic

20 Fall/Autumn Disney themed icons

chocolatefrogs

iconic

Oct. 14th, 2025

chocolatefrogs

iconic

I’d say the first thing you need is … a pumpkin

linky

iconic

linky

iconic

40 Multifandom Icons

linky

iconic

Oct. 13th, 2025

linky

iconic

Kamen Rider Gotchard, Sukeban Deka II

Find Them Here at

chemyxstory

rosecarmine

myrtillenne

rosecarmine

myrtillenne

Neon

rosecarmine

myrtillenne

Oct. 12th, 2025

rosecarmine

myrtillenne

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).