Scroll

[rosecarmine]

LIVE PREVIEW

FEATURES

• header image
• 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" and "Select whether comment management links are printed as text or using the available icons". For "Indentation for nested comment threads" select "Responsive" (optional).
4. Click on the "Modules" tab. Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.
5. Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - scroll (tabula rasa) - https://myrtillenne.dreamwidth.org - header image - tawatchai07 - https://www.freepik.com/tawatchai07 -------------------------------------*/ /*--------------- general ---------------*/ :root { --text-size: 16px; --text-color: #37324b; --line-height: 1.5; --background-color: #bab6e1; --border-color: #bfabcd; --link-color: #8851ac; --link-hover-color: #d08764; --main-font: Source Sans Pro, sans-serif; --title-font: Philosopher, sans-serif; --header-image: url(https://rosecarmine.dreamwidth.org/file/130149.jpg); --header-image-height: 350px; --entry-width: 800px; --entry-background-color: #eeebf1; --customtext-height: 9em; --entry-background-color-alt: #5e3e88; --text-color-alt: #dec9e4; --link-color-alt: #e2d3cd; --link-hover-color-alt: #dec9e4; } 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: var(--entry-background-color-alt); border: 1px solid var(--border-color); margin: 1em 0; padding: 1em; color: var(--text-color-alt); } blockquote a { color: var(--link-color-alt); } blockquote a:hover { color: var(--link-hover-color-alt); } q { font-style: italic; } #canvas { margin: 2em 0; } @media (min-width: 1024px) { #content { padding: 0 144px; } } #content > .inner:first-child { max-width: var(--entry-width); margin: 0 auto; background: var(--entry-background-color); border-left: 1px solid var(--border-color); border-right: 1px solid var(--border-color); } /*--------------- header ---------------*/ #header { position: relative; } @media (min-width: 1024px) { #header { padding: 0 144px; } } #header > .inner { background: var(--entry-background-color); max-width: var(--entry-width); margin: 0 auto; padding: 2em 0; text-align: center; border: 1px solid var(--border-color); border-bottom: 0; } @media (min-width: 800px) { #header:before { content: ""; position: absolute; bottom: -1px; left: 0; width: 100%; height: var(--header-image-height); background: var(--entry-background-color-alt); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); z-index: -1; } #header:after { content: ""; display: block; bottom: 0; max-width: var(--entry-width); margin: 0 auto; height: var(--header-image-height); background-image: var(--header-image); border: 1px solid var(--border-color); border-bottom: 0; background-size: cover; background-position: center center; } } h1#title { font-family: var(--title-font); text-transform: uppercase; font-size: 2em; line-height: 1.2; margin: 0; padding: 0 1em; } h2#subtitle { font-size: 1em; font-weight: normal; margin: 0; padding: 0.5em 2em 0; line-height: 1.2; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .comment-thread { border-top: 1px solid var(--border-color); position: relative; } .entry .header, .comment .header { border-bottom: 1px solid var(--border-color); padding: 0.5em; text-align: center; } .entry .entry-title { font-family: var(--title-font); font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0.5em; } .no-subject .entry .entry-title { background: none; border: none; 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 .userpic, .comment .userpic { float: left; margin: -1px 1em 0 -1px; } .entry .userpic img, .comment .userpic img { padding: 5px; background: var(--entry-background-color-alt); border: 1px solid var(--border-color); max-width: 50px; max-height: 50px; width: auto; height: auto; } @media (min-width: 800px) { .entry .userpic img, .comment .userpic img { max-width: 100px; max-height: 100px; padding: 10px; } } @media (min-width: 1024px) { .entry .userpic, .comment .userpic { position: absolute; top: 0; width: 122px; text-align: right; left: -134px; margin: 0; } } .entry .poster { font-size: 0; display: block; text-align: center; } .entry .poster .ljuser { font-size: var(--text-size); padding: 0.5em 0.25em 0; display: inline-block; } .poster .ljuser img { display: none; } .poster.empty { display: none; } .entry-content { padding: 2em 2em 0; margin-bottom: 2em; } @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 { display: inline-block; font-size: 26px; width: 30px; height: 30px; line-height: 30px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--link-color-alt); background: var(--entry-background-color-alt); border: 1px solid var(--border-color); } .cuttag-action:hover { color: var(--link-hover-color-alt); } .cuttag-action:before { content: "+"; display: inline-block; } .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; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .metadata { padding: 0 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .entry div.tag { padding: 0 2em; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } ul.entry-management-links::before { content: ""; display: block; margin-top: 2em; padding-bottom: 0.5em; border-top: 1px solid var(--border-color); clear: both; } ul.entry-management-links { padding: 0 0 0.5em; margin: 0; text-align: center; line-height: 1.2; text-transform: uppercase; font-family: var(--title-font); } ul.entry-management-links li, ul.comment-management-links li { display: inline; padding: 0 0.25em; } ul.entry-interaction-links { padding: 0.5em; margin: 0; background: var(--entry-background-color-alt); text-align: center; text-transform: uppercase; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } ul.entry-interaction-links li, ul.comment-interaction-links li { display: inline; padding: 0 0.25em; } .entry-interaction-links a, .comment-interaction-links a { color: var(--link-color-alt); } .entry-interaction-links a:hover, .comment-interaction-links a:hover { color: var(--link-hover-color-alt); } /*--------------- comments ---------------*/ .comment-pages { background: var(--entry-background-color-alt); text-align: center; padding: 0.5em; text-transform: uppercase; color: var(--text-color-alt); line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } .comment-pages a { color: var(--link-color-alt); } .comment-pages a:hover { color: var(--link-hover-color-alt); } .comment-pages.bottompages { display: none; } .comment-thread:not(.comment-depth-1) .comment { border-left: 1px solid var(--border-color); margin-left: -1px; } .dwexpcomment { margin-top: 0 !important; } .comment-wrapper { min-width: 15em; } .comment { background: var(--entry-background-color); } .dwexpcomment { margin-top: 0; } .page-reply .full .comment { position: relative; } .comment .comment-title { margin: 0; } .full .comment .comment-title { font-family: var(--title-font); font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0.5em; } .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .comment-date-text, .comment-from-text { display: none; } .comment .contents { text-align: center; } .full .comment .poster { display: inline-block; padding-top: 0.5em; } .poster-ip { display: inline-block; padding-top: 0.5em; } .poster-ip:before { content: "("; } .poster-ip:after { content: ")"; } .comment-content { text-align: left; margin: 2em; } .partial .comment { background: var(--entry-background-color-alt); color: var(--text-color-alt); padding: 0.5em 1em; } .partial .comment a { color: var(--link-color-alt); } .partial .comment a:hover { color: var(--link-hover-color-alt); } .comment .footer { text-align: center; } .multiform-checkbox { text-transform: uppercase; font-family: var(--title-font); display: block; padding-bottom: 0.5em; line-height: 1; } ul.comment-management-links { padding: 0.5em; margin: 0; line-height: 1.2; text-transform: uppercase; font-family: var(--title-font); border-top: 1px solid var(--border-color); clear: both; } ul.comment-interaction-links { padding: 0.5em; margin: 0; background: var(--entry-background-color-alt); text-transform: uppercase; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; border-top: 1px solid var(--border-color); } #qrform { padding: 2em; } #postform { padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: var(--entry-background-color-alt); font-size: var(--text-size); padding: 0.5em; color: var(--link-color-alt); line-height: 1; text-transform: uppercase; font-family: var(--title-font); } #comments ul.entry-interaction-links { display: none; } #comments ul.entry-management-links { display: none; } .bottomcomment { text-align: center; padding: 0.5em 0; border-top: 1px solid var(--border-color); } .bottomcomment select { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { border: 1px solid var(--border-color); background: var(--entry-background-color-alt); color: var(--link-color-alt); font-size: var(--text-size); font-family: var(--title-font); text-transform: uppercase; padding: 0.5em; line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .month .header, .tags-container .header, .icons-container .header { border-top: 1px solid var(--border-color); text-align: center; padding: 0.5em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0.5em; } .tags-container .contents, .icons-container .contents { border-top: 1px solid var(--border-color); } .month .footer, #primary .manage-link { background: var(--entry-background-color-alt); text-align: center; text-transform: uppercase; padding: 0.5em; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } .month .footer a, #primary .manage-link a { color: var(--link-color-alt); } .month .footer a:hover, #primary .manage-link a:hover { color: var(--link-hover-color-alt); } /*------------ archive ------------*/ .month caption { display: none; } .month table { border: none; text-align: center; border-collapse: collapse; width: 100%; } table.month td, table.month th { border-right: 1px solid var(--border-color); max-width: 1em; height: 3.25em; } table.month td:last-child, table.month th:last-child { border-right: none; } table.month tr, table.month th { border-top: 1px solid var(--border-color); } table.month th { background: var(--entry-background-color-alt); text-transform: uppercase; color: var(--link-color-alt); font-family: var(--title-font); } table.month td.day-has-entries { background: var(--entry-background-color-alt); color: var(--text-color-alt); } table.month td a { color: var(--link-color-alt); } table.month td a:hover { color: var(--link-hover-color-alt); } table.month td p { margin: 0; } .month dl { margin: 0; } .month dl dt { font-weight: bold; text-align: center; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0.5em; text-transform: uppercase; font-family: var(--title-font); } .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; padding: 2em; } .month dl br { display: block; } .day-date { display: none; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--border-color); background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #archive-month .navigation input[type="submit"] { border: 1px solid var(--border-color); background: var(--entry-background-color-alt); color: var(--link-color-alt); padding: 0.25em; font-family: var(--title-font); text-transform: uppercase; } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon { border-top: 1px solid var(--border-color); display: flex; } .icon-image { margin-bottom: -1px; } .icon-image img { padding: 10px; background: var(--entry-background-color-alt); display: block; border-right: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } .icon-info { padding: 2em; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .page-icons .bottompages { text-align: center; padding: 1em; text-transform: uppercase; border-top: 1px solid var(--border-color); } .icon-pages p { margin: 0; } .keywords-label, .comment-text, .description-text { font-weight: bold; } /*------------ modules ------------*/ .module ul { padding: 0.5em; margin: 0; background: var(--entry-background-color-alt); text-align: center; text-transform: uppercase; line-height: 1.2; border-top: 1px solid var(--border-color); font-family: var(--title-font); } .module li { display: inline; padding: 0 0.25em; } .module li a { text-transform: uppercase; color: var(--link-color-alt); } .module li a:hover { color: var(--link-hover-color-alt); } .module-customtext { padding: 2em; background: var(--entry-background-color); border-top: 1px solid var(--border-color); } .module-customtext .module-content { max-height: var(--customtext-height); overflow: auto; text-align: left; } @media (min-width: 800px) { .module-customtext .module-content { 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(--border-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--border-color); } .module h2, .module-userprofile, .module .manage-link, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-calendar, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*--------------- navigation ---------------*/ .navigation { text-align: center; line-height: 1.2; font-family: var(--title-font); } .navigation ul { margin: 0; padding: 0.5em; border-top: 1px solid var(--border-color); } .navigation li { display: inline; padding: 0.5em; text-transform: uppercase; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } @media (min-width: 1024px) { #footer { padding: 0 144px; } } #footer .inner { max-width: var(--entry-width); border: 1px solid var(--border-color); margin: 0 auto; } .page-top { background: var(--entry-background-color-alt); line-height: 1.2; padding: 0.5em 0; text-align: center; text-transform: uppercase; font-family: var(--title-font); } #footer a { color: var(--link-color-alt); } #footer a:hover { color: var(--link-hover-color-alt); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 1px solid var(--border-color); box-shadow: none; padding: 0; border-radius: 0; font-family: var(--main-font); color: var(--text-color); } div.ContextualPopup .Relation { font-size: 1em; padding: 1em; margin: 0; font-family: var(--title-font); } .ContextualPopup .Actions ul { margin: 0; padding: 0 1em 1em; } div.ContextualPopup .Userpic { border: none; padding: 0; } div.ContextualPopup .Userpic img { padding: 7px; background: var(--entry-background-color-alt); border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); } div.ContextualPopup a { color: var(--link-color); } div.ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { color: var(--text-color-alt); padding: 0.75em 0; width: auto; justify-content: center; text-align: center; border-bottom: 1px solid var(--border-color); background: var(--entry-background-color-alt); } #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-alt); } #lj_controlstrip a:hover { color: var(--link-hover-color-alt); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color-alt); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 0; 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; text-transform: uppercase; padding: 0.25em; background: transparent !important; color: var(--header-text-color) !important; font-family: var(--title-font) !important; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_search { text-align: right; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Source+Sans+Pro&family=Philosopher&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" (optional).

RESOURCES

• image by tawatchai07 from freepik.com

Comments

[adore]

This is lovely!

[intothisshadow]

Another pretty theme :D You such good work! Thank you :D

[mulanreflection]

Lovely layout!

Question, on an individual entry's comment page, is there a way to have to the page numbers links, and the entry's reply link display at the both the top and bottom of the page, rather than only at the top?

[rosecarmine]

Thank you!

From the code delete #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; }