Candy

[rosecarmine]

LIVE PREVIEW

FEATURES

• default icon, navigation links, links list, custom text
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
2. Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
3. 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.
4. Click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
5. Click on the on "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - candy (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #57486a; --line-height: 1.5; --body-background-color: #f3ebf3; --link-color: #f260c7; --link-hover-color: #6394ed; --main-font: PT Sans, sans-serif; --title-font: Sirin Stencil, sans-serif; --gradient1-color: #e292c6; --gradient2-color: #92aee4; --title-gradient1-color: #f260c7; --title-gradient2-color: #6394ed; --entry-gradient1-color: #eab0d5; --entry-gradient2-color: #a3bbe9; --content-width: 800px; --entry-background-color: #faf8fa; --entry-border-color: #e7d8e7; --sidebar-link-color: #57486a; --sidebar-link-hover-color: #f260c7; --sidebar-icon-color: #f3ebf3; --customtext-height: 10.5em; } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- 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(--body-background-color); background-image: url(); 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: 1.5em 0; padding-left: 1em; font-style: italic; border-left: 2px solid; border-image: linear-gradient( var(--entry-gradient1-color), var(--entry-gradient2-color) ) 1; } /*--------------- content ---------------*/ #canvas { margin: 20px auto; max-width: var(--content-width); } @media (min-width: 800px) { #canvas { padding: 0 70px; margin: 70px auto; } } @media (min-width: 1024px) { #canvas { padding: 0 240px; margin: 100px auto; } } /*--------------- header ---------------*/ #header { float: left; width: 100%; background: transparent; position: relative; z-index: 3; } #header > .inner:first-child { padding: 2em; text-align: center; line-height: 1.2; } h1#title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; margin: 0; padding: 0; } h1#title span { background-image: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; padding: 0 0.25em; } h2#subtitle { font-size: 1em; padding: 0; margin: 0.5em 0 0; font-weight: normal; text-transform: lowercase; } h2#pagetitle { display: none; } /*------------ modules ------------*/ #secondary { margin-bottom: 20px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; padding-bottom: 0.5em; } #secondary .separator-after { clear: left; } .module-content ul { list-style: none; margin: 0; padding: 0; } .module-navlinks { margin: 1.5em 2em; } .module-navlinks li { text-transform: lowercase; display: inline-block; line-height: 1; margin-right: 0.5em; font-family: var(--title-font); } .module-navlinks li a:before { display: inline-block; font-family: Material Icons; font-size: 22px; margin-right: 0.25em; vertical-align: middle; line-height: 22px; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "today"; } .list-item-read a:before { content: "menu_book"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "people_alt"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "person"; } .module-navlinks li a { color: var(--text-color); } .module-navlinks li a:hover { color: var(--link-color); } @media (min-width: 1024px) { .module-navlinks { width: 180px; margin: 0 0 0 -222px; top: 100px; position: fixed; text-align: right; padding: 0; } .module-navlinks li { display: block; margin-right: 0; margin-bottom: 0.5em; } .module-navlinks li a:before { display: none; } .module-navlinks li a:after { display: inline-block; font-family: Material Icons; font-size: 24px; margin-left: 0.75em; vertical-align: middle; height: 36px; width: 36px; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 32px; transition: all 0.5s; } .module-navlinks li a:hover:after { text-shadow: 0 0 1px var(--sidebar-icon-color); } .list-item-recent a:after { content: "home"; } .list-item-archive a:after { content: "today"; } .list-item-read a:after { content: "menu_book"; } .list-item-tags a:after { content: "style"; } .list-item-network a:after { content: "people_alt"; } .list-item-memories a:after { content: "star"; } .list-item-userinfo a:after { content: "person"; } .module-navlinks li a { color: var(--sidebar-link-color); } .module-navlinks li a:hover { color: var(--sidebar-link-hover-color); } } .module-userprofile { text-align: center; } .module-userprofile .userpic { margin-bottom: 8px; } .module .userpic img { max-width: 50px; max-height: 50px; border: 3px solid transparent; padding: 2px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; } .journal-name, .journal-website-name { line-height: 1; text-transform: lowercase; margin-bottom: 8px; display: inline; font-family: var(--title-font); color: var(--text-color); } .journal-name:before, .journal-website-name:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .journal-name:before { content: "account_circle"; } .journal-website-name:before { content: "public"; } @media (min-width: 1024px) { .module-userprofile { float: right; width: 180px; margin-top: -2px; margin-right: -220px; padding: 0; text-align: left; } .module .userpic img { max-width: 100px; max-height: 100px; border-width: 5px; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); } .journal-name, .journal-website-name { margin-bottom: 8px; display: block; } .journal-name, .journal-website-name a { color: var(--sidebar-link-color); } .journal-website-name a:hover { color: var(--sidebar-link-hover-color); } .journal-name:before, .journal-website-name:before { background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); } } .module-typelist { text-transform: lowercase; margin: 1.5em 2em; clear: left; } .module-typelist ul:before { content: "explore"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--icon-color); line-height: 0; margin-right: 0.25em; background: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .module-typelist li { display: inline; } .module-typelist li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em 0 0.75em; } .module-typelist li:last-child:after { display: none; } .module-typelist li a { color: var(--text-color); } .module-typelist li a:hover { color: var(--link-color); } .module-customtext { border: 1px solid var(--entry-border-color); margin: 0 0.5em; padding: 1.5em; clear: left; } .module-customtext .module-content { max-height: var(--customtext-height); overflow: auto; } @media (min-width: 800px) { .module-customtext { text-align: justify; } } .module-customtext .module-content::-webkit-scrollbar { width: 5px; height: 5px; } .module-customtext .module-content::-webkit-scrollbar-track { background: transparent; } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--entry-border-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--entry-border-color); } .module h2, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- entries ---------------*/ .entry { margin-bottom: 20px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; } @media (min-width: 800px) { .entry { margin: 70px 0; } } @media (min-width: 1024px) { .entry { margin: 100px 0; } } .entry .header, .comment .header { float: left; width: 100%; } .entry .header .inner, .comment .header .inner { padding: 2em; text-align: center; line-height: 1.2; } .entry .entry-title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; background-image: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; margin: 0 auto; } .no-subject .entry .entry-title { background: none; border: none; } .admin-post-icon, .sticky-entry-icon { display: none; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--text-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .restrictions-18 .restrictions:before { content: "18+"; font-family: arial; font-size: 18px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .has-userpic .userpic { text-align: center; } .has-userpic .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; border: 3px solid transparent; padding: 2px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; } @media (min-width: 1024px) { .has-userpic .userpic { width: 180px; margin-top: -2px; margin-right: -220px; margin-left: 0; float: right; margin-left: 1em; margin-bottom: 8px; text-align: left; } .has-userpic .userpic img { max-width: 100px; max-height: 100px; border: 5px solid transparent; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient(-45deg, var(--gradient1-color), var(--gradient2-color)); } } .entry .poster, .full .comment .poster { font-family: var(--title-font); } .entry .poster { font-size: 0; text-align: center; display: block; line-height: 1; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster .ljuser { font-size: var(--text-size); margin-right: 0.25em; } .poster .ljuser:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .poster .ljuser img { display: none; } .poster .ljuser { white-space: normal !important; } .poster .ljuser b { font-weight: normal; } .poster { word-wrap: break-word; } @media (min-width: 1024px) { .entry .poster, .full .comment .poster { float: right; width: 180px; margin-right: -220px; clear: right; text-align: left; color: var(--sidebar-link-color); } .entry .poster .ljuser { display: block; margin-bottom: 8px; } .entry .poster a, .full .poster a { color: var(--sidebar-link-color); } .entry .poster .ljuser:before, .full .poster .ljuser:before { background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); } } .entry .poster .ljuser:nth-child(1):before, .full .poster .ljuser:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry-content, .comment-content { border: 1px solid var(--entry-border-color); margin: 1.5em 0.5em; padding: 1.5em; clear: left; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .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; background: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ text-transform: lowercase; font-weight: normal; margin-left: 27px; display: block; } .metadata { padding: 0 2em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata li { display: inline; margin-right: 0.5em; } .metadata-label { display: none; } .metadata li img { vertical-align: middle; } #metadata-music:before { content: "library_music"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #metadata-mood:before { content: "sentiment_satisfied_alt"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .tag-text { display: none; } .tag-nav-trigger { vertical-align: middle; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; color: transparent; } .tag ul li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em; } .tag ul li:last-child:after { display: none; } div.tag:before { content: "loyalty"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--icon-color); background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-right: 0.25em; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; display: inline; text-transform: lowercase; } ul.entry-management-links a, ul.entry-interaction-links a { color: var(--text-color); } ul.entry-management-links a:hover, ul.entry-interaction-links a:hover { color: var(--link-color); } ul.entry-management-links li { display: inline; margin-right: 0.5em; } ul.entry-management-links li a:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .link_prev a:before { content: "arrow_back"; } .edit_entry a:before { content: "edit"; } .edit_tags a:before { content: "local_offer"; } .mem_add a:before { content: "favorite"; } .tell_friend a:before { content: "share"; } .watch_comments a:before { content: "notification_important"; } .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links li { display: inline; margin-right: 0.5em; } ul.entry-interaction-links li a:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 0.25em; background-image: linear-gradient( 45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } li.entry-permalink a:before { content: "launch"; } li.entry-readlink a:before { content: "question_answer"; } li.entry-replylink a:before { content: "add_comment"; } .entry .footer, .comment .footer { padding: 0 2em 2em; text-transform: lowercase; } /*--------------- comments ---------------*/ .comment-pages { color: var(--sidebar-link-color); font-family: var(--title-font); } .comment-pages a { color: var(--sidebar-link-color); } .comment-pages a:hover { color: var(--sidebar-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment { margin: 20px 0; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; clear: both; } .page-reply .full .comment { margin-top: 0; } @media (min-width: 800px) { .comment { margin: 50px 0; } } .comment .header .inner { padding-top: 2em; line-height: 1.2; } .comment .comment-title { margin: 0; padding: 0; } .full .comment .comment-title { font-family: var(--title-font); font-size: 1.2em; font-weight: normal; text-shadow: 0 0.75em 0 var(--title-shadow-color); background-image: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); -webkit-text-fill-color: transparent; background-clip: text, padding-box; -webkit-background-clip: text, padding-box; display: table; margin: 0 auto; padding: 0.25em 0; } .no-subject .comment .comment-title { background: none; border: none; margin: 0; padding: 0; } .comment-from-text, .comment-date-text, .comment-ip-text { display: none; } .full .poster, .poster-ip { text-align: center; display: block; line-height: 1; } .comment-pages { text-align: center; } .comment-pages.bottompages { display: none; } .comment .footer { padding: 0 2em 2em; } .multiform-checkbox { display: inline; margin-right: 0.5em; } ul.comment-management-links, ul.comment-interaction-links { display: inline; margin: 0; padding: 0; text-transform: lowercase; } ul.comment-management-links li, ul.comment-interaction-links li { display: inline; padding: 0; margin-right: 0.5em; } .partial .comment { padding: 2em; } .bottomcomment { color: var(--sidebar-link-color); margin: 20px 0; } #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { margin-top: 1.5em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); font-family: var(--title-font); line-height: 1; } #postform { padding: 2em; margin: 20px 0; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; } @media (min-width: 800px) { #postform { margin: 100px 0; } } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin-bottom: 20px; background: var(--entry-background-color); border: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; } @media (min-width: 800px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 70px 0; } } @media (min-width: 1024px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 100px 0; } } .month .header, .tags-container .header, .icons-container .header { text-align: center; padding-top: 2em; padding-bottom: 1.5em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; line-height: 1; background: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: table; margin: 0 auto; } .month .contents, .tags-container .contents, .icons-container .contents { margin: 0.5em; } .month .footer, #primary .manage-link { margin-top: 1.5em; padding: 0 2em 2em; text-transform: lowercase; } .footer a, #primary .manage-link a { color: var(--text-color); } .footer a:hover, #primary .manage-link a:hover { color: var(--link-color); } /*------------ archive ------------*/ .month caption { display: none; } .month table { width: 100%; text-align: center; } table.month { margin: 0 auto; border-collapse: collapse; text-align: center; } table.month td, table.month th { max-width: 0; padding: 0.25em; border: 1px solid var(--entry-border-color); } table.month td p { margin: 0; display: inline; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } .page-month .month { padding: 0.5em; } .month dl { margin: 0; } .month dl dt { font-family: var(--title-font); font-size: 1.2em; line-height: 1; background: linear-gradient( 45deg, var(--title-gradient1-color), var(--title-gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: table; margin: 0 auto; padding: 1em 0; } .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 dd { margin: 0; padding: 1.5em; border: 1px solid var(--entry-border-color); } .month dd br { display: block; } #archive-year .navigation ul { margin-bottom: 20px; } @media (min-width: 800px) { #archive-year .navigation ul { margin: 100px 0; } } #archive-year .navigation li { display: inline-block; width: 3em; height: 3em; line-height: 3em; color: var(--sidebar-icon-color); border-radius: 50%; background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); margin: 5px; } #archive-year .navigation li a { color: var(--sidebar-icon-color); } #archive-year .navigation li a:hover { text-shadow: 0 0 1px var(--sidebar-icon-color); } #archive-year .navigation li.active { font-weight: bold; } #archive-month .navigation ul { padding: 1em 2em 2em; } #archive-month .navigation li { display: inline; } .day-date { display: none; } /*------------ tags ------------*/ .tags-container .contents { padding: 1.5em; border: 1px solid var(--entry-border-color); } ul.ljtaglist { padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { list-style-position: inside; padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; margin: 2em; } .icon { border: 1px solid var(--entry-border-color); margin-top: 0.5em; display: flex; } .icon-image { border-right: 1px solid var(--entry-border-color); padding: 0.5em; } .icon-image img { display: block; } .icon-info { text-transform: lowercase; padding: 1.5em; } .icon-info div span { font-style: normal; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; background: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sorting-options ul { margin: 0; padding: 0; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*--------------- navigation ---------------*/ .topnav { display: none; } .navigation { text-transform: lowercase; text-align: center; } .navigation ul { margin: 0; padding: 0; } #entries .navigation ul { line-height: 1; text-align: right; margin-right: 20px; font-family: var(--title-font); } @media (min-width: 1024px) { #entries .navigation ul { position: fixed; width: 180px; margin-left: -220px; margin-bottom: 36px; margin-right: 0; bottom: 100px; } } #entries .navigation li { display: block; margin-bottom: 8px; list-style: none; } #entries .navigation li a { color: var(--sidebar-link-color); } #entries .navigation li a:hover { color: var(--sidebar-link-hover-color); } #entries .navigation li a:after { display: inline-block; font-family: Material Icons; font-size: 22px; margin-left: 0.75em; vertical-align: middle; height: 36px; width: 36px; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 36px; transition: all 0.5s; } #entries .navigation li a:hover:after { text-shadow: 0 0 1px var(--sidebar-icon-color); } li.page-back a:after { content: "arrow_back"; } li.page-forward a:after { content: "arrow_forward"; } li.page-separator { display: none !important; } .noentries { display: none; } /*--------------- footer ---------------*/ #footer { text-align: right; text-transform: lowercase; line-height: 1; margin-right: 20px; font-family: var(--title-font); } @media (min-width: 1024px) { #footer { position: fixed; width: 180px; margin-left: -220px; margin-right: 0; bottom: 100px; height: 36px; } } #footer a { color: var(--sidebar-link-color); } #footer a:hover { color: var(--sidebar-link-hover-color); } .page-top a:after { content: "arrow_upward"; display: inline-block; font-family: Material Icons; font-size: 22px; margin-left: 0.75em; vertical-align: middle; height: 36px; width: 36px; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 32px; transition: all 0.5s; } .page-top a:hover:after { text-shadow: 0 0 1px var(--sidebar-icon-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 0.5em; width: 200px; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; text-align: center; margin-top: 1em; } div.ContextualPopup .Userpic { border: 0; float: none; text-align: center; padding-top: 1em; } div.ContextualPopup .Userpic img { border: 5px solid transparent; padding: 2px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em; border: 1px solid var(--entry-border-color); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 2px solid; border-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ) 1; z-index: 9; } @media (min-width: 800px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -46px; height: 46px; width: 36px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "more_horiz"; font-size: 24px; position: absolute; bottom: -46px; height: 36px; width: 36px; right: 10px; cursor: pointer; line-height: 36px; text-align: center; color: var(--sidebar-icon-color); background-image: linear-gradient( 45deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 36px; } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; 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_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--entry-border-color); background: var(--entry-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: transparent; font-size: var(--text-size); color: var(--text-color); font-family: var(--main-font); padding: 0.25em; } #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: 3px solid transparent; padding: 1px; border-radius: 50%; background-image: linear-gradient( var(--entry-background-color), var(--entry-background-color) ), linear-gradient( -45deg, var(--entry-gradient1-color), var(--entry-gradient2-color) ); background-origin: border-box; background-clip: padding-box, border-box; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=PT+Sans&family=Sirin+Stencil&display=swap
6. Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout".

RESOURCES

• icon font by Google

Comments

[intothisshadow]

It's so pretty!

[luckyzukky]

love this!!!

[sodium_amytal]

Ooh, pretty!

[skargasm]

This is absolutely beautiful!

[sphinxofthenile]

Love this, using it for my main journal!

[goblinesque]

I'm so sorry to bother you about something Dreamwidth has broken, but since their last code push all your layouts have had their cut-text code gone awry. I've been using this layout for a long time and LOVE it, and I particularly liked the cut text with the little scissors icon. Since the code push, the cut-text has reverted to the default bold font style for my journal, and has an un-deletable bracket at the end (these things are also the case for everyone on my flist who also uses your codes).

It basically just looks messy instead of the nice code you provided, entirely DW's fault (incidentally the code push also broke many other aspects of userstyles, but they have apparently fixed most of those).

I know my explanation wasn't the best, and I'm mostly just annoyed at DW for breaking your gorgeous work (I did raise the issue with them and they gave me a solution which didn't work and then said the onus is on the original layout creator... sigh). But maybe just a heads-up if you need to change the code for future layouts...?

[rosecarmine]

Hi! I found a solution. Replace

.cuttag + b {
font-size: 0;
}

.cuttag + b a {
font-size: var(--text-size);
text-transform: lowercase;
font-weight: normal;
margin-left: 27px;
}

with

.cut-open, .cut-close {
display:none;
}

.cut-text{
text-transform: lowercase;
font-weight: normal;
margin-left: 27px;
display:block;
}

Let me know if it works.

[goblinesque]

Oh my gosh THANK YOU so much 😭😭😭 I know it seems like quite a minor thing but I LOVE this layout so much that it really bothered me that a site update made it look messy haha. I'll be sure to pass this fix on to other people too ♡

[rosecarmine]

You're welcome and thanks!