myrtillenne | Shine

LIVE PREVIEW

FEATURES

sidebar image
navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" 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" and "Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive" (optional).
Click on the "Modules" tab. Set "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - shine (tabula rasa) - https://myrtillenne.dreamwidth.org - image - unsplash.com -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Ubuntu, sans-serif; --title-font: Ubuntu, sans-serif; --background-color: #cbd2e2; --text-color: #3d4361; --link-color: #429eb3; --link-hover-color: #a761be; --gradient1-color: #48b8cc; --gradient2-color: #a256ba; --content-background-color: #f5f8fc; --content-width: 1200px; --entry-title-gradient1-color: #429eb3; --entry-title-gradient2-color: #a761be; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/133759.jpg"); --sidebar-width: 300px; --sidebar-image-width: 200px; --sidebar-image-height: 200px; --sidebar-border-color: #cbd2e2; --sidebar-text-color: #dbeaf0; --sidebar-link-color: #f5f8fc; --sidebar-link-hover-color: #fff; } 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 { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); padding: 1em; margin: 1em 0; color: var(--sidebar-text-color); border-radius: 10px; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } blockquote a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } blockquote a:hover { color: var(--sidebar-link-hover-color); } #canvas { padding: 40px 0; } @media (min-width: 640px) { #canvas { margin: 0 auto; padding: 40px; max-width: var(--content-width); } } #canvas > .inner:first-child { position: relative; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); border-radius: 10px; background: var(--content-background-color); } @media (min-width: 900px) { #canvas > .inner:first-child { border-left: var(--sidebar-width) solid transparent; padding-bottom: 2em; padding-left: 2em; } } #content-footer { clear: both; } #primary > .inner:first-child { padding: 0 2em 2em; } @media (min-width: 900px) { #primary { width: 100%; float: right; } #primary > .inner:first-child { padding: 0 2em; } } #header { background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); text-align: center; border-radius: 10px 10px 0 0; } #header > .inner { padding: 2em; } @media (min-width: 900px) { #header { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); position: relative; z-index: 2; background: transparent; } #header > .inner:before { content: ""; width: var(--sidebar-image-width); height: var(--sidebar-image-height); display: block; margin: 20px auto 2em; border-top: 2px solid rgba(0, 0, 0, 0.3); border-right: 2px solid rgba(255, 255, 255, 0.3); border-left: 2px solid rgba(0, 0, 0, 0.3); border-bottom: 2px solid rgba(255, 255, 255, 0.3); background: var(--sidebar-image); background-clip: padding-box; background-size: cover; } #header > .inner { padding: 1em 2em 0; } } h1#title { font-size: 1.5em; font-family: var(--title-font); margin: 0; padding: 0; line-height: 1; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } h1#title a { color: var(--sidebar-link-color); } h2#subtitle { font-size: 1em; margin: 0; padding: 1em 0 0; font-weight: normal; line-height: 1; color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } h2#subtitle:before { content: ""; display: block; height: 1px; width: 20px; background: var(--sidebar-border-color); margin: 0 auto 1em; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment { padding-top: 2em; } @media (min-width: 900px) { .entry .header, .comment .header { float: left; width: calc(100% - 100px); } } .entry .entry-title, .full .comment-title { font-size: 1.5em; margin: 0 0 0.25em; padding-right: 1em; font-family: var(--title-font); line-height: 1.2; background-image: linear-gradient( 45deg, var(--entry-title-gradient1-color), var(--entry-title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; } .entry .entry-title, .entry .entry-title a, .full .comment-title a { color: var(--entry-header-link-color); } .entry .entry-title a:hover { color: var(--entry-header-link-hover-color); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .month .restrictions, .month .access-filter, .month .admin-post-icon, .month .sticky-entry-icon { display: none; } .security-protected .access-filter:before { content: "LOCKED"; padding-right: 0.25em; } .security-private .access-filter:before { content: "PRIVATE"; padding-right: 0.25em; } .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(--entry-header-text-color); } .has-userpic .userpic { float: right; } .entry .userpic img, .comment .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 5px; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } @media (min-width: 640px) { .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; border-radius: 10px; } } .entry .poster { font-size: 0; display: block; clear: left; } .entry .poster:before { content: ""; display: block; font-size: var(--text-size); padding-top: 0.5em; } .entry .poster .ljuser { display: inline-block; font-size: var(--text-size); margin-right: 0.5em; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .entry .poster .ljuser a, .full .comment .poster, .full .comment .poster .ljuser a { color: var(--sidebar-link-color); } .entry .poster .ljuser a:hover, .full .comment .poster .ljuser a:hover { color: var(--sidebar-link-hover-color); } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { padding-top: 2em; margin-bottom: 2em; clear: left; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cuttag-action { display: inline-block; font-size: 26px; width: 30px; height: 30px; line-height: 30px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--content-background-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .cuttag-action:before { content: "+"; display: inline-block; } .cuttag-action-after:before { transform: rotate(45deg); } .cuttag-action:hover { color: var(--content-background-color); } .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; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links { margin: 0; padding: 0; line-height: 1; text-align: center; } ul.entry-management-links:before { content: ""; display: block; margin-top: 2em; } ul.entry-management-links li { display: inline; margin: 0 0.5em; } ul.entry-interaction-links { margin: 1em 0 0; padding: 0.5em; line-height: 1; text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } ul.entry-interaction-links li { display: inline; margin: 0 0.5em; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } ul.entry-interaction-links li a { color: var(--sidebar-link-color); } ul.entry-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } .entry .footer { clear: both; } /*--------------- comments ---------------*/ .comment-pages { text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); margin: 0.5em 0 0; padding: 0.5em; line-height: 1; color: var(--sidebar-text-color); } .comment-pages a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .comment-pages a:hover { color: var(--sidebar-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .partial .comment:after { content: ""; display: block; width: 100%; height: 7px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); margin-top: 1em; } .partial .comment-title { margin: 0; } .thread-depth { display: inline-block; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; margin-bottom: 1em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } .full .comment .poster { display: block; clear: left; } .full .comment .poster .ljuser, .full .comment .poster .anonymous { display: inline-block; font-size: var(--text-size); margin-top: 0.5em; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .comment-content { padding: 2em 0; } .comment .footer { text-align: center; clear: both; } .multiform-checkbox input { vertical-align: top; } ul.comment-management-links { margin: 0; padding: 0; line-height: 1; text-align: center; display: inline; } ul.comment-management-links li { padding: 0.5em; display: inline; } ul.comment-interaction-links { margin: 0.5em 0 0; padding: 0.5em; line-height: 1; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } ul.comment-interaction-links li { padding: 0.5em; display: inline; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } ul.comment-interaction-links li a { color: var(--sidebar-link-color); } ul.comment-interaction-links li a:hover { color: var(--sidebar-link-hover-color); } #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { text-align: center; } .bottomcomment label:before { content: ""; display: block; margin-top: 2em; } .bottomcomment select { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { padding-top: 2em; } #qrform { border: 0; padding: 2em 0 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { padding-top: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; margin: 0; font-family: var(--title-font); line-height: 1.2; background-image: linear-gradient( 135deg, var(--entry-title-gradient1-color), var(--entry-title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; } .month .contents, .tags-container .contents { padding-top: 2em; } .month .footer, #primary .manage-link { text-align: center; line-height: 1; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); padding: 0.5em; margin-top: 2em; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .month .footer a, #primary .manage-link a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .month .footer a:hover, #primary .manage-link a:hover { color: var(--sidebar-link-hover-color); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: separate; border-spacing: 3px; width: 100%; border: none; text-align: center; } table.month td { width: 2.5em; line-height: 2.5em; height: 2.5em; position: relative; } table.month td.day-has-entries .label { display: block; color: var(--content-background-color); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); width: 2.5em; line-height: 2.5em; height: 2.5em; margin: 0 auto; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dl dt { padding: 0.5em; text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); line-height: 1; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .month dl dt a { color: var(--sidebar-link-color); } .month dl dt a:hover { color: var(--sidebar-link-hover-color); } dd { margin: 0; padding: 2em 0; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation { text-align: center; } #archive-month .navigation ul form { display: inline-block; } #archive-year .navigation li, #archive-month .navigation li { display: inline; padding: 0 0.5em; } #archive-month .navigation ul { margin: 0; padding: 0 2em; text-align: center; } #archive-month .navigation select { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #archive-month .navigation input { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--sidebar-link-color); font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } /*------------ 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 0 2em; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { margin-top: 2em; text-align: center; } .icons-container .icon { display: flex; flex-wrap: wrap; align-items: center; margin-top: 1em; } .icon-image img { display: block; } .icon-info { padding-left: 1em; flex: 1; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ sidebar ------------*/ #secondary { z-index: 1; } .module-section-one .inner { padding: 2em; clear: left; } .module-section-one { background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); padding-bottom: 3em; border-radius: 0 0 10px 10px; } @media (min-width: 900px) { #secondary { width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); position: relative; } #secondary:before { content: ""; position: absolute; left: 0; top: -16px; width: calc(var(--sidebar-width) + 13px); height: 16px; border-radius: 16px 0 0 0; background: var(--gradient1-color); background-image: linear-gradient( to bottom, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 100% ); z-index: 2; } #secondary:after { content: ""; position: absolute; background: var(--gradient1-color); right: -26px; top: -16px; width: 26px; height: 16px; border-radius: 16px 16px 0 0; background-image: linear-gradient( 45deg, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.3) 100% ); z-index: 3; } #secondary > .inner:first-child:before { content: ""; display: block; position: absolute; width: var(--sidebar-width); height: 40px; right: 0; top: -16px; background: linear-gradient( to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100% ); z-index: 4; } .module-wrapper { filter: drop-shadow(7px 7px 3px rgba(0, 0, 0, 0.3)); } .module-section-one { clip-path: polygon( 100% 0, 100% 100%, 50% calc(100% - 80px), 0% 100%, 0% 0% ); background-image: linear-gradient( var(--gradient1-color), var(--gradient2-color) ); padding-bottom: 80px; border-radius: 0; } #secondary .separator-before { content: ""; position: absolute; left: 0; top: -16px; width: var(--sidebar-width); height: 16px; border-radius: 16px 0 0 0; background: var(--gradient1-color); z-index: 1; } } .module { color: var(--sidebar-text-color); } .module a { color: var(--sidebar-link-color); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } .module a:hover { color: var(--sidebar-link-hover-color); } .module-content { display: inline; } .module-content ul { padding: 0; margin: 0; list-style: none; } .module li { line-height: 1; display: flex; align-items: center; margin-bottom: 0.75em; } .module li:before { content: ""; width: 20px; flex-shrink: 0; height: 1px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background: var(--sidebar-border-color); transition: all 0.4s ease; } .module li:after { content: ""; flex: 1; min-width: 20px; height: 1px; box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); background: var(--sidebar-border-color); transition: all 0.4s ease; } .module li a { padding: 0 1em; } .module li:hover:before { width: 30px; } .module-customtext { margin-top: 2em; } .module h2, .module-userprofile, .module .manage-link, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*------------ navigation ------------*/ .navigation ul { margin: 2em 0 0; padding: 0; text-align: center; line-height: 1; } .navigation li { display: inline; } li.page-back { float: left; } li.page-forward { float: right; } .navigation:after { display: block; content: ""; clear: both; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { float: left; width: 100%; line-height: 1; margin-top: -3em; text-align: center; z-index: 1; position: relative; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); } #footer a { color: var(--sidebar-link-color); } #footer a:hover { color: var(--sidebar-link-hover-color); } @media (min-width: 900px) { #footer { width: var(--sidebar-width); padding: 0 2em; text-shadow: none; } #footer a { color: var(--link-color); } #footer a:hover { color: var(--link-hover-color); } } /*------------ contextual pop-up ------------*/ div.ContextualPopup { color: var(--text-color); background: var(--content-background-color); color: var(--text-color); border: 0; padding: 1.5em; font-family: inherit; border-radius: 0; width: 200px; text-align: center; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 0; padding: 1em 0; } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 10px; max-width: 100px; max-height: 100px; width: auto; height: auto; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--content-background-color); color: var(--text-color); padding: 0.75em 0; width: auto; justify-content: center; text-align: center; box-shadow: 0 0 20px rgba(0, 0, 0, 0.3); } #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: 1em; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid; border-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) 1; background: var(--content-background-color) !important; font-size: var(--text-size) !important; color: var(--text-color) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) !important; color: var(--sidebar-link-color) !important; font-size: var(--text-size); font-family: var(--main-font); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); padding: 0.5em; border-radius: 5px; line-height: 1; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border-radius: 5px; max-width: 50px; max-height: 50px; width: auto; height: auto; box-shadow: 2px 2px 1px rgba(0, 0, 0, 0.3); }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Ubuntu&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).