myrtillenne

LIVE PREVIEW

FEATURES

multiple columns
left or right sidebar
navigation, links list, custom text and tags list
4 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 "text-only" for:
- Select whether entry management links are printed as text or using the available icons
- Select whether comment management links are printed as text or using the available icons.
Click on the "Modules" tab and set "Custom text" to number 5.
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)".

Magenta-orange:/*------------------------------------- - layout - aurora - magenta-orange (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #e7dfd8; --text-color: #473a32; --link-color: #bc549d; --link-hover-color: #eca24f; --text-color-alt: #473a32; --link-color-alt: #bc549d; --link-hover-color-alt: #eca24f; --title-color: #fbebd9; --title-shadow-color: #bc549d; --header-height: 250px; --gradient1-color: #bc549d; --gradient2-color: #eca24f; --header-border1-color:rgba(255, 255, 255, 0.3); --header-border2-color:rgba(255, 255, 255, 0.5); --header-border3-color:rgba(255, 255, 255, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #f8f4f1; --entry-background-color-alt: #fbebd9; --sidebar-width: 400px; --sidebar-link-color: #473a32; --sidebar-link-hover-color: #473a32; --userpic-size: 80px; }
Green-red:/*------------------------------------- - layout - aurora - green-red (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #E0E4E4; --text-color: #506363; --link-color: #4DC8B9; --link-hover-color: #E46B96; --text-color-alt: #506363; --link-color-alt: #357D75; --link-hover-color-alt: #506363; --title-color: #F8FAFA; --title-shadow-color: #4DC8B9; --header-height: 250px; --gradient1-color: #4DC8B9; --gradient2-color: #E46B96; --header-border1-color:rgba(255, 255, 255, 0.3); --header-border2-color:rgba(255, 255, 255, 0.5); --header-border3-color:rgba(255, 255, 255, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #F8FAFA; --entry-background-color-alt: #D2E6E3; --sidebar-width: 400px; --sidebar-link-color: #E46B96; --sidebar-link-hover-color: #4DC8B9; --userpic-size: 80px; }
Blue-green:/*------------------------------------- - layout - aurora - blue-green (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #324452; --text-color: #C9CDC7; --link-color: #0197F1; --link-hover-color: #9CD980; --text-color-alt: #000; --link-color-alt: #C0E7AD; --link-hover-color-alt: #C6D5BF; --title-color: #1D262E; --title-shadow-color: #0181CD; --header-height: 250px; --gradient1-color: #0181CD; --gradient2-color: #88D165; --header-border1-color:rgba(29, 38, 46, 0.3); --header-border2-color:rgba(29, 38, 46, 0.5); --header-border3-color:rgba(29, 38, 46, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #1D262E; --entry-background-color-alt: #349FA5; --sidebar-width: 400px; --sidebar-link-color: #C6D5BF; --sidebar-link-hover-color: #C0E7AD; --userpic-size: 80px; }
Grey-purple:/*------------------------------------- - layout - aurora - grey-purple (tabula rasa) - https://myrtillenne.dreamwidth.org -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 14px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #D3D5DC; --text-color: #3D3D4B; --link-color: #6C6CD5; --link-hover-color: #3D3D4B; --text-color-alt: #3D3D4B; --link-color-alt: #6C6CD5; --link-hover-color-alt: #3D3D4B; --title-color: #F7F7F9; --title-shadow-color: #3D3D4B; --header-height: 250px; --gradient1-color: #AFB1C0; --gradient2-color: #8C8CD9; --header-border1-color:rgba(255, 255, 255, 0.3); --header-border2-color:rgba(255, 255, 255, 0.5); --header-border3-color:rgba(255, 255, 255, 0.7); --column-number: 2; --column-width: 500px; --column-spacing: 50px; --entry-width: 800px; /* on entry pages */ --entry-background-color: #F7F7F9; --entry-background-color-alt: #E2E2F5; --sidebar-width: 400px; --sidebar-link-color: #3D3D4B; --sidebar-link-hover-color: #6C6CD5; --userpic-size: 80px; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a, a:link, a:visited { text-decoration: none; transition: color 0.4s; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } q { font-style: italic; } blockquote { margin: 1em 0; background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 1em 1em 1.5em; color: var(--text-color-alt); } blockquote a { color: var(--link-color-alt); } blockquote a:hover { color: var(--link-hover-color-alt); } @media (min-width: 1024px) { .two-columns-left #canvas { border-left: var(--sidebar-width) solid transparent; } .two-columns-right #canvas { border-right: var(--sidebar-width) solid transparent; } } #primary { margin: var(--column-spacing) auto 0; } @media (min-width: 800px) { #primary { padding: 0 var(--column-spacing); max-width: var(--entry-width); } .page-recent #primary, .page-read #primary, .page-archive #primary, .page-day #primary { max-width: calc( var(--column-number) * var(--column-width) + (var(--column-number) - 1) * var(--column-spacing) ); } } #entries > .inner:first-child { column-count: var(--column-number); column-gap: var(--column-spacing); column-width: var(--column-width); } /*--------------- header ---------------*/ #header { position: relative; height: var(--header-height); padding-bottom: 20px; background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 30px), 40% 100%, 0 calc(100% - 30px) ); z-index: 2; font-family: var(--title-font); color: var(--title-color); text-shadow: 1px 1px 0 var(--title-shadow-color); } #header > .inner { height: 100%; clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 30px), 40% 100%, 0 calc(100% - 30px) ); display: flex; flex-direction: column; justify-content: flex-end; padding: 2em 2em 60px; box-sizing: border-box; } #header > .inner:after { content: ""; position: absolute; bottom: 20px; left: 0; width: 100%; height: 40px; background: var(--header-border1-color); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 40% 30px); } #header:before { content: ""; position: absolute; bottom: 10px; left: 0; width: 100%; height: 40px; background: var(--header-border2-color); clip-path: polygon( 0 0, 0 calc(100% - 30px), 40% 100%, 100% calc(100% - 30px), 100% 0, 40% 30px ); } #header:after { content: ""; position: absolute; bottom: 0px; left: 0; width: 100%; height: 40px; background: var(--header-border3-color); clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0, 40% 30px); } @media (min-width: 1024px) { .two-columns #header { position: fixed; top: 0; width: var(--sidebar-width); } .two-columns-left #header { left: 0; } .two-columns-right #header { right: 0; } } h1#title { font-size: 2em; margin: 0; padding: 0; line-height: 1; } h1#title a { color: var(--title-color); } h2#subtitle { font-size: 1em; margin: 0; padding: 0.25em 0 0; font-weight: normal; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry-wrapper { margin-bottom: var(--column-spacing); break-inside: avoid; display: inline-block; width: 100%; } .page-entry .entry-wrapper { max-width: var(--entry-width); display: block; } .entry, .comment { background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 10px; } .header { background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 10px; color: var(--text-color-alt); } .has-userpic .entry .header { display: flex; flex-direction: column; justify-content: center; min-height: var(--userpic-size); } @media (min-width: 640px) { .has-userpic .entry .header .inner { width: calc(100% - var(--userpic-size)); box-sizing: border-box; } } .header .inner { padding: 10px 10px 20px; line-height: 1; } .entry .entry-title, .full .comment-title { font-size: 1.2em; margin: 0 0 0.5em; padding: 0; font-family: var(--title-font); position: relative; line-height: 1; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--link-color-alt); } .entry .entry-title a:hover { color: var(--link-hover-color-alt); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .restrictions-NSFW .restrictions:before { content: "NSFW"; padding-right: 0.25em; } .restrictions-18 .restrictions:before { content: "18+"; padding-right: 0.25em; } .entry .datetime a { color: var(--text-color-alt); } .has-userpic .userpic { float: right; } .entry .userpic img, .comment .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; } .has-userpic .entry .userpic { margin-top: 10px; } @media (min-width: 640px) { .entry .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); clip-path: polygon( 0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 23px) 100%, 0 100% ); } .has-userpic .entry .userpic { margin-top: calc(-1 * (var(--userpic-size) + 10px)); margin-right: 10px; height: var(--userpic-size); display: flex; align-items: flex-end; } } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); margin-right: 0.5em; } .entry .poster .ljuser a, .comment .poster .ljuser a { color: var(--text-color); } .entry .poster .ljuser:before, .comment .poster .ljuser:before { content: "@"; color: var(--link-color); } .poster .ljuser img { display: none; } .poster.empty { display: block; height: 1px; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { margin: 2em 1em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action:before { content: "+"; display: inline-block; font-size: 26px; line-height: 22px; vertical-align: bottom; font-family: arial; } .cuttag-action-after:before { transform: rotate(45deg); } .cut-open, .cut-close { display:none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { list-style: none; margin: 0; padding: 0 1em; } .metadata li { margin-bottom: 0.25em; } .metadata-label, .tag-text { display: inline-block; padding: 0.25em 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; display: inline; } .entry ul.entry-management-links::before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links li, ul.entry-interaction-links li { display: inline-block; margin-right: 0.5em; font-weight: bold; } ul.entry-management-links li a, ul.entry-interaction-links li a { padding: 0.25em 0; display: block; color: var(--sidebar-link-color); } ul.entry-management-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } ul.entry-management-links li:after, ul.entry-interaction-links li:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } ul.entry-management-links li:hover:after, ul.entry-interaction-links li:hover:after { width: 100%; } .entry .footer, .comment .footer { padding: 0 1em 1em; } /*--------------- comments ---------------*/ #comments { margin-bottom: var(--column-spacing); } .comment-pages { margin-bottom: 10px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 1em; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment { margin-bottom: var(--column-spacing); } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } @media (min-width: 640px) { .comment .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } .comment .userpic { margin-top: 10px; } .comment-content { padding: 2em 1em; } .multiform-checkbox { background: var(--entry-background-color-alt); color: var(--text-color-alt); display: inline-block; padding: 0.25em 0.5em; margin-right: 0.5em; } ul.comment-management-links, ul.comment-interaction-links { margin: 0; padding: 0; display: inline; } ul.comment-management-links li, ul.comment-interaction-links li { display: inline-block; font-weight: bold; margin-right: 0.5em; } ul.comment-management-links li a, ul.comment-interaction-links li a { padding: 0.25em 0; display: block; color: var(--sidebar-link-color); } ul.comment-management-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } ul.comment-management-links li:after, ul.comment-interaction-links li:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } ul.comment-management-links li:hover:after, ul.comment-interaction-links li:hover:after { width: 100%; } .bottomcomment { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 1em; } .bottomcomment select { border: 0; background: var(--entry-background-color-alt); color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); line-height: 1; font-family: var(--main-font); } .partial .comment { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 1em; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 2em; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 0; background: var(--entry-background-color-alt); color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); line-height: 1; } /*------------ archive, tags, icons containers ------------*/ #archive-month .month, .tags-container, .icons-container { margin-bottom: var(--column-spacing); background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 10px; } .month-wrapper { margin-bottom: var(--column-spacing); break-inside: avoid; display: inline-block; width: 100%; } .month-wrapper div.month { background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient(var(--gradient1-color), var(--gradient2-color)) 1; padding: 10px; } .month-wrapper .month .contents, .tags-container .contents, .icons-container .contents { padding: 0 1em; } #archive-year > .inner:first-child { column-count: var(--column-number); column-gap: var(--column-spacing); column-width: var(--column-width); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; margin: 0; padding: 0; font-family: var(--title-font); line-height: 1; color: var(--link-color-alt); } .month .footer, #primary .manage-link { display: inline-block; margin: 1em; } .month .footer a, #primary .manage-link a { padding: 0.25em 0; display: block; color: var(--sidebar-link-color); } .month .footer a:hover, #primary .manage-link a:hover { color: var(--sidebar-link-hover-color); } .month .footer:after, #primary .manage-link:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } .month .footer:hover:after, #primary .manage-link:hover:after { width: 100%; } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: collapse; width: 100%; border: none; text-align: center; } table.month td, table.month th { padding: 0.5em; height: auto; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } .month dl { margin: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dl dt { background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 10px 20px 20px; font-size: 1.2em; font-family: var(--title-font); } .month dl dt a { color: var(--link-color-alt); } .month dl dt a:hover { color: var(--link-hover-color-alt); } dd { margin: 0; padding: 1em; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation ul, #archive-month .navigation ul form { display: inline-block; } #archive-year .navigation li, #archive-month .navigation li { display: inline-block; padding: 0 0.5em; } #archive-month .navigation input, #archive-month .navigation select { border: 0; background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { margin-top: 1em; } .icons-container .icon { display: flex; flex-wrap: wrap; margin-top: 1em; } .icon-image img { display: block; } .icon-info { padding-left: 1em; flex: 1; } .icon-info div { margin-bottom: 0.25em; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .default.label { display: inline-block; padding: 0.25em 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .keywords-label { display: inline-block; padding: 0.25em 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .icon-pages p { margin: 0; } /*------------ sidebar ------------*/ #secondary { position: relative; background: var(--entry-background-color); margin-bottom: -45px; } #secondary .module-wrapper { padding: 3em 2em; } #secondary > .inner:first-child { padding-bottom: 45px; } @media (min-width: 1024px) { .two-columns #secondary { position: fixed; bottom: 0; height: 100%; width: var(--sidebar-width); z-index: 1; margin: 0; } .two-columns-left #secondary { left: 0; } .two-columns-right #secondary { right: 0; } .two-columns #secondary > .inner:first-child { height: 100%; padding-top: var(--header-height); box-sizing: border-box; } .two-columns #secondary .module-wrapper { height: 100%; box-sizing: border-box; } .two-columns .module-section-one { height: 100%; overflow: auto; } } .module-section-one { scrollbar-width: thin; scrollbar-color: var(--entry-background-color-alt) var(--entry-background-color); } .module-section-one::-webkit-scrollbar { width: 10px; height: 10px; } .module-section-one::-webkit-scrollbar-track { background: var(--entry-background-color); } .module-section-one::-webkit-scrollbar-thumb { background: var(--entry-background-color-alt); border: 3px solid var(--entry-background-color); } .module-section-one::-webkit-scrollbar-corner { background: var(--entry-background-color); } .module-navlinks, .module-typelist, .module-navlinks .module-content, .module-typelist .module-content, .module-navlinks .module-content ul, .module-typelist .module-content ul { display: inline; } .module a { color: var(--sidebar-link-color); } .module a:hover { color: var(--sidebar-link-hover-color); } .module-content ul, .module-content ul { padding: 0; margin: 0; list-style: none; } .module-navlinks li, .module-typelist li { display: inline-block; margin-right: 0.5em; } .module li a { padding: 0.25em 0; display: inline-block; font-weight: bold; position: relative; } .module li a:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; position: absolute; left: 0; bottom: 0; } .module li a:hover:after { width: 100%; } .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-customtext { overflow: auto; margin-top: 1.5em; } .module-tags_multilevel ul { padding-left: 1em; } .module-tags_multilevel ul:first-child { padding-left: 0; } .module-tags_cloud li, .module-tags_cloud li a { font-size: 1em !important; } .module-tags_cloud li { display: inline-block; margin-right: 0.25em; } .module .non-link-tag { display: inline-block; padding: 0.25em 0.5em; margin-top: 0.5em; background: var(--entry-background-color-alt); color: var(--text-color-alt); } .module-customtext { background: var(--entry-background-color-alt); clip-path: polygon( 0 0, 100% 0%, 100% calc(100% - 20px), calc(100% - 30px) 100%, 0 calc(100% - 15px) ); padding: 1em 1em 1.5em; color: var(--text-color-alt); } .module-customtext a { color: var(--link-color-alt); } .module-customtext a:hover { color: var(--link-hover-color-alt); } .module h2, .module .manage-link, .module-userprofile, .module-calendar, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation { background: var(--entry-background-color); margin-bottom: var(--column-spacing); display: inline-block; width: 100%; } .navigation ul { margin: 0; padding: 0; display: inline-block; background-image: linear-gradient( -135deg, var(--entry-background-color) 30px, transparent 30px ), linear-gradient(-135deg, var(--header-border1-color) 40px, transparent 30px), linear-gradient(-135deg, var(--header-border1-color) 50px, transparent 30px), linear-gradient(-135deg, var(--header-border1-color) 60px, transparent 30px), linear-gradient(var(--gradient1-color), var(--gradient2-color)); padding: 0.5em 80px 0.5em 0.5em; } .navigation li { line-height: 1; display: inline; padding: 0 0.5em; color: var(--title-color); text-shadow: 1px 1px 0 var(--title-shadow-color); } .navigation li a { color: var(--title-color); } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { position: relative; padding-top: 20px; background-image: linear-gradient( var(--gradient2-color), var(--gradient1-color) ); clip-path: polygon(0 30px, 0 100%, 100% 100%, 100% 30px, 60% 0); z-index: 2; } #footer .inner { position: relative; clip-path: polygon(0 30px, 0 100%, 100% 100%, 100% 30px, 60% 0); height: 40px; display: flex; flex-direction: column; justify-content: flex-end; text-align: center; } #footer .inner:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 40px; background: var(--header-border1-color); clip-path: polygon( 0 0, 0 100%, 60% calc(100% - 30px), 100% 100%, 100% 0, 60% 0 ); } #footer:before { content: ""; position: absolute; top: 10px; left: 0; width: 100%; height: 40px; background: var(--header-border2-color); clip-path: polygon( 0 30px, 0 100%, 60% calc(100% - 30px), 100% 100%, 100% 30px, 60% 0 ); } #footer:after { content: ""; position: absolute; top: 0px; left: 0; width: 100%; height: 40px; background: var(--header-border3-color); clip-path: polygon( 0 11%, 0 100%, 60% calc(100% - 30px), 100% 100%, 100% 9%, 60% 0 ); } .page-top a { font-size: 0; display: block; width: 100%; height: 40px; } @media (min-width: 1024px) { .two-columns #footer { position: fixed; bottom: 0; width: var(--sidebar-width); } .two-columns-left #footer { left: 0; } .two-columns-right #footer { right: 0; } } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); color: var(--text-color); border: 0; padding: 1em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--sidebar-link-color); } .ContextualPopup a:hover { color: var(--sidebar-link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0.5em 0 0; padding: 0; } div.ContextualPopup .Userpic { display: inline-block; float: none; border: none; margin: 0; background: var(--entry-background-color-alt); clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); padding: 10px; margin: 0 auto; } div.ContextualPopup .Userpic img { clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); } .ContextualPopup .Actions ul { list-style: none; margin: 0.5em 0 0; padding: 0; } div.ContextualPopup li { font-weight: bold; float: left; clear: left; } div.ContextualPopup li a { padding: 0.25em 0; display: block; } div.ContextualPopup li:after { content: ""; display: block; width: 20px; height: 1px; background-image: linear-gradient( to right, var(--gradient1-color), var(--gradient2-color) ); transition: all 0.4s linear; } div.ContextualPopup li:hover:after { width: 100%; } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); padding: 0.75em 0; text-align: center; justify-content: center; z-index: 9; } @media (min-width: 1024px) { .two-columns #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; } .two-columns #lj_controlstrip:before { content: ""; position: absolute; bottom: -30px; height: 30px; width: 30px; } .two-columns #lj_controlstrip::after { content: ""; position: absolute; bottom: -30px; height: 20px; width: 30px; cursor: pointer; color: var(--sidebar-icon-color); background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); clip-path: polygon(50% 40%, 100% 0, 100% 60%, 50% 100%, 0 60%, 0 0); } .two-columns-left #lj_controlstrip:before { right: 10px; } .two-columns-left #lj_controlstrip::after { right: 10px; } .two-columns-right #lj_controlstrip:before { left: 10px; } .two-columns-right #lj_controlstrip::after { left: 10px; } #lj_controlstrip:hover { transform: translateY(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(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 0; background: var(--entry-background-color-alt) !important; font-size: var(--text-size) !important; color: var(--text-color-alt) !important; font-family: var(--main-font) !important; } #lj_controlstrip_search input#search { width: 12em; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent !important; text-transform: uppercase; padding: 0.25em; color: var(--sidebar-link-color) !important; font-weight: bold; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a { background: var(--entry-background-color-alt); clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); padding: 5px; } #lj_controlstrip_userpic a img { clip-path: polygon(100% 0, 100% 80%, 80% 100%, 0 90%, 0 0); }
Into the "Custom stylesheet URL" field paste the following.
https://fonts.googleapis.com/css2?family=Poppins&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).