Notebook

[rosecarmine]

LIVE PREVIEW

FEATURES

• header image (pattern)
• sidebar image (square)
• left or right sidebar
• 2 colour schemes
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the "Select style" page, search for "Paletteable" and apply any theme.
2. Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
3. Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
   • Select whether entry management links are printed as text or using the available icons
   • Select whether comment management links are printed as text or using the available icons.
4. 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)".
   
   Light:/*------------------------------------- - layout - notebook - light (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - header image - callmetak - https://www.freepik.com/author/callmetak - sidebar image - garetsvisual - https://www.freepik.com/author/garetsvisual -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #f1e0d8; --text-color: #69483f; --link-color: #ff7566; --link-hover-color: #69483f; --header-height: 200px; --header-image: url("https://rosecarmine.dreamwidth.org/file/155902.jpg"); --entry-width: 1000px; --entry-background-color: #faf5ef; --entry-border-color: #e9c8ba; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/156108.jpg"); --icon-color: #ff9488; --icon-hover-color: #69483f; }
   Dark:/*------------------------------------- - layout - notebook - dark (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - rawpixel.com - https://www.freepik.com/author/rawpixel-com - sidebar image - lookstudio - https://www.freepik.com/author/lookstudio -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Poppins, sans-serif; --title-font: Poppins, sans-serif; --background-color: #3F2D57; --text-color: #B7ACC4; --link-color: #A576D8; --link-hover-color: #B691DF; --header-height: 200px; --header-image: url("https://rosecarmine.dreamwidth.org/file/157278.png"); --entry-width: 1000px; --entry-background-color: #261B34; --entry-border-color: #784BAB; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/157846.jpg"); --icon-color: #B691DF; --icon-hover-color: #A576D8; }
   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 { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1em 0; padding: 20px; border: 1px solid var(--entry-border-color); } blockquote:before { float: left; content: "format_quote"; font-family: Material Symbols Outlined; font-size: 22px; line-height: 22px; padding: 7px; margin-top: -20px; margin-left: -20px; margin-right: 20px; border-right: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); color: var(--icon-color); } #content-footer { height: 0; font-size: 0; clear: both; } /*--------------- header ---------------*/ #header { background: var(--entry-background-color); text-align: center; border-top: 1px solid var(--entry-border-color); } #header > .inner:first-child { text-align: center; border-bottom: 1px solid var(--entry-border-color); display: flex; flex-wrap: wrap; justify-content: center; padding: 10px; } @media (min-width: 800px) { #header:before { content: ""; display: block; width: 100%; height: var(--header-height); background: var(--header-image); background-position: top center; border-bottom: 1px solid var(--entry-border-color); } } h1#title { font-family: var(--title-font); font-size: 1em; margin: 0; padding: 0 5px; line-height: 1.2; display: inline; text-transform: uppercase; } h2#subtitle { margin: 0; padding: 0 5px; font-size: 1em; line-height: 1.2; display: inline; font-weight: normal; } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #content > .inner:first-child { padding-top: 40px; } @media (min-width: 800px) { #content { margin: 0 auto; padding: 0 40px; } } @media (min-width: 1024px) { #content { max-width: calc(var(--entry-width) + var(--sidebar-width) + 40px); } .two-columns-left #content > .inner:first-child { border-left: var(--sidebar-width) solid transparent; } .multiple-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; clear: both; } .two-columns-left #primary > .inner:first-child { padding-left: 40px; } .two-columns-left #secondary { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } .two-columns-right #primary > .inner:first-child { padding-right: 40px; } .two-columns-right #secondary { float: right; width: var(--sidebar-width); margin-right: calc(-1 * var(--sidebar-width)); } } @media (min-width: 1280px) { #content { max-width: calc(var(--entry-width) + 234px + var(--sidebar-width) + 40px); } #content > .inner:first-child { padding: 40px 117px 0; } } /*--------------- entries ---------------*/ .entry, .full .comment { margin-bottom: 40px; border: 1px solid var(--entry-border-color); background: var(--entry-background-color); position: relative; } .entry .header .inner, .comment .header .inner { display: flex; border-bottom: 1px solid var(--entry-border-color); flex-wrap: wrap; } .entry .entry-title { margin: 0; padding: 10px; font-weight: normal; font-size: 1em; line-height: 22px; flex-grow: 1; border-right: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); margin-right: -1px; margin-bottom: -1px; } .sticky-entry-icon, .admin-post-icon { display: none; } .sticky-entry-title:before { content: "push_pin"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); } .no-subject .entry .entry-title, .no-subject .comment .comment-title { background: none; padding: 0; } .header .datetime { display: flex; line-height: 22px; } .comment .header .datetime { padding: 10px; } .header .date { border-right: 1px solid var(--entry-border-color); padding: 10px; } .header .time { padding: 10px; } .header a { color: var(--text-color); } .header a:hover { color: var(--link-color); } .sticky-entry .datetime { display: none; } .restrictions, .access-filter { border-right: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); padding: 10px; line-height: 22px; margin-right: -1px; margin-bottom: -1px; } .restrictions img, .access-filter img { display: none; } .restrictions-NSFW .restrictions:before { content: "NSFW"; } .restrictions-18 .restrictions:before { content: "18+"; } .security-protected .access-filter:before { content: "lock"; font-family: Material Symbols Outlined; font-size: 22px; float: left; color: var(--icon-color); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Symbols Outlined; font-size: 22px; float: left; color: var(--icon-color); } .has-userpic .userpic { float: right; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); margin-left: 10px; margin-top: -1px; margin-right: -1px; } .two-columns-right .has-userpic .userpic { float: left; margin-left: 0; margin-right: 10px; margin-left: -1px; } .has-userpic .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; padding: 5px; } @media (min-width: 1024px) { .has-userpic .userpic img { max-width: 100px; max-height: 100px; } } @media (min-width: 1280px) { .has-userpic .userpic { position: absolute; top: -1px; right: -5px; transform: translateX(100%); margin: 0; } .two-columns-right .has-userpic .userpic { left: -10px; right: auto; transform: translateX(-100%); } } .entry .poster, .full .poster { display: block; margin: 0 10px; padding-top: 10px; clear: left; } .two-columns-right .entry .poster, .two-columns-right .full .poster { clear: right; } .entry .poster { font-size: 0; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .entry .poster .ljuser { font-size: var(--text-size); display: inline-flex; line-height: 22px; align-items: center; margin-right: -1px; border: 1px solid var(--entry-border-color); } .entry .poster .ljuser:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 7px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .entry .poster .ljuser:nth-child(1):before { content: "person"; } .entry .poster .ljuser:nth-child(2):before { content: "group"; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; padding: 0 0.5em; } .poster.empty { padding-top: 1px; } .entry-content { margin: 2em; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content li::marker, .comment-content li::marker { color: var(--icon-color); } .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 Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--icon-color); } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display:block; } .metadata ul { list-style: none; margin: 0; padding: 0; line-height: 1.2; } .metadata li { display: flex; border-top: 1px solid var(--entry-border-color); } #metadata-music .metadata-label:before { content: "headphones"; } #metadata-mood .metadata-label:before { content: "face"; } #metadata-location .metadata-label:before { content: "location_on"; } #metadata-xpost .metadata-label:before { content: "add_location"; } .metadata-label { border-right: 1px solid var(--entry-border-color); overflow: hidden; font-size: 0; text-align: center; flex-shrink: 0; } .metadata-label:before { font-family: Material Symbols Outlined; font-size: 22px; line-height: 22px; padding: 10px; display: block; color: var(--icon-color); } .metadata li img { margin-left: 0.5em; align-self: center; } .metadata-item { align-self: center; padding: 0.25em 0.5em; } .entry div.tag { display: flex; line-height: 1.2; border-top: 1px solid var(--entry-border-color); } .entry .tag-text { border-right: 1px solid var(--entry-border-color); overflow: hidden; font-size: 0; flex-shrink: 0; } .entry .tag-text:before { content: "tag"; font-family: Material Symbols Outlined; font-size: 22px; line-height: 22px; padding: 10px; display: block; color: var(--icon-color); text-align: center; } .entry .tag ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0.25em 0.5em; align-items: center; } .tag ul li { display: inline; margin-right: 0.25em; } .entry .tag a, .metadata a { color: var(--text-color); } .entry .tag a:hover, .metadata a:hover { color: var(--link-color); } .tag-nav-trigger, .tag-nav-actions input { align-self: center; } .tag ul { padding: 0; margin: 0; display: inline; } .tag li { display: inline; } .entry-management-links, .entry-interaction-links { margin: 0; padding: 0; list-style: none; } .entry-management-links, .entry-interaction-links { border-top: 1px solid var(--entry-border-color); } .entry-management-links.icon-links li, .entry-interaction-links li { float: left; border-right: 1px solid var(--entry-border-color); } .entry-management-links li a, .entry-interaction-links li a { color: var(--text-color); } .entry-management-links li a:hover, .entry-interaction-links li a:hover { color: var(--link-color); } .entry-management-links.icon-links li a { color: var(--icon-color); display: block; } .entry-management-links.icon-links li a:hover { color: var(--icon-hover-color); } .entry-management-links li a img { display: none; } .entry-management-links.icon-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 10px; display: block; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "notifications"; } .icon-links .link_next a:before { content: "arrow_forward"; } .entry-management-links.text-links { padding: 10px; } .entry-management-links.text-links li { display: inline-block; padding-right: 10px; } .entry-interaction-links { clear: left; } @media (min-width: 600px) { .entry-management-links.text-links { border-bottom: 1px solid var(--entry-border-color); } .entry-interaction-links { border: 0; clear: none; } } .entry-interaction-links li a { display: block; } li.entry-readlink a { padding: 10px; line-height: 22px; } li.entry-permalink a, li.entry-replylink a { font-size: 0; color: var(--icon-color); } li.entry-permalink a:hover, li.entry-replylink a:hover { color: var(--icon-hover-color); } li.entry-permalink a:before, li.entry-replylink a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 10px; display: block; } li.entry-permalink a:before { content: "launch"; } li.entry-replylink a:before { content: "add_comment"; } .footer:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); text-align: center; margin: 40px 0; padding: 7px; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; position: relative; z-index: 9; } .partial { padding: 1em; margin: 40px 0; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); } .comment .comment-title { margin: 0; } .comment-date-text, .comment-from-text { display: none; } .full .comment-title { margin: 0; padding: 10px; font-weight: normal; font-size: 1em; line-height: 22px; flex-grow: 1; border-right: 1px solid var(--entry-border-color); margin-right: -1px; } .thread-depth { padding: 10px; line-height: 22px; border-right: 1px solid var(--entry-border-color); } .full .poster .ljuser { display: inline-flex; line-height: 22px; align-items: center; border: 1px solid var(--entry-border-color); } .full .poster .ljuser:before { content: "person"; font-family: "Material Symbols Outlined"; font-size: 22px; padding: 7px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .full .poster .anonymous { display: inline-block; padding: 7px; border: 1px solid var(--entry-border-color); } .poster-ip { display: inline-block; border: 1px solid var(--entry-border-color); padding: 0.5em; margin: 10px 10px 0; line-height: 22px; } .comment-content { padding: 2em; border-bottom: 1px solid var(--entry-border-color); } .multiform-checkbox { float: left; line-height: 22px; padding: 10px; border-right: 1px solid var(--entry-border-color); } .comment-management-links { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid var(--entry-border-color); } .comment-management-links:after { content: ""; display: block; clear: both; } .comment-management-links.icon-links li { float: left; border-right: 1px solid var(--entry-border-color); } .comment-management-links.icon-links li a { display: block; color: var(--icon-color); padding: 0 !important; } .comment-management-links.icon-links li a:hover { color: var(--icon-hover-color); } .comment-management-links li a img { display: none; } .comment-management-links.icon-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 10px; display: block; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } .comment-management-links.text-links li { display: inline-block; line-height: 22px; padding: 10px 0 0 10px; } ul.comment-interaction-links { margin: 0; padding: 10px; clear: left; } ul.comment-interaction-links li { display: inline; padding-right: 0.5em; } .comment-management-links li a, .comment-interaction-links li a { color: var(--text-color); } .comment-management-links li a:hover, .comment-interaction-links li a:hover { color: var(--link-color); } .bottomcomment { background: var(--entry-background-color); text-align: center; margin: 50px 0; border: 1px solid var(--entry-border-color); } .bottomcomment .entry-management-links { border-top: 0; text-align: left; } .bottomcomment .entry-management-links.icon-links { border: 0; } .bottomcomment .entry-interaction-links:after { content: ""; display: block; clear: left; } .bottomcomment label:before { content: ""; display: block; clear: left; border-top: 1px solid var(--entry-border-color); padding-top: 2px; } #multiform_mode { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); font-size: var(--text-size); font-family: var(--main-font); clear: both; } #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 6px 10px; background: var(--entry-background-color); border-radius: 8px; color: var(--text-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { border-top: 1px solid var(--entry-border-color); padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; } #postform { margin-bottom: 40px; padding: 2em; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin-bottom: 40px; border: 1px solid var(--entry-border-color); } .month .header, .tags-container .header, .icons-container .header { border-bottom: 1px solid var(--entry-border-color); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; position: relative; line-height: 24px; padding: 10px; font-weight: normal; margin: 0; } .month .header:before, .tags-container .header:before, .icons-container .header:before { float: left; font-family: Material Symbols Outlined; font-size: 24px; line-height: 24px; padding: 10px; border-right: 1px solid var(--entry-border-color); margin-right: 10px; color: var(--icon-color); } .month .header:before { content: "calendar_month"; } .tags-container .header:before { content: "style"; } .icons-container .header:before { content: "photo_library"; } .tags-container .contents { padding: 2em; } .month .footer, #primary .manage-link { text-align: center; border-top: 1px solid var(--entry-border-color); padding: 0.5em; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--text-color); } .month .footer a:hover, .tags-container .footer a:hover, .icons-container .footer a:hover { color: var(--link-color); } /*------------ archive------------*/ .day-date { display: none; } .month caption { display: none; } .month table { width: 100%; border: none; text-align: center; border-collapse: collapse; } table.month { margin: 0 auto; } table.month td { border-top: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); max-width: 1em; height: 3.25em; } table.month th { padding: 0.5em 0; border-right: 1px solid var(--entry-border-color); max-width: 1em; } table.month td:last-child, table.month th:last-child { border-right: none; } table.month td p { margin: 0; } table.month td.day-has-entries .label { font-weight: bold; } .page-month .month { background: var(--entry-background-color); margin-bottom: 50px; border: 1px solid var(--entry-border-color); } .month dl { margin: 0; } .month dl dt { border-top: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); } .month dl dt a { display: inline-block; border-right: 1px solid var(--entry-border-color); padding: 0.5em; } .month dl dt:first-child { border-top: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { padding: 2em; margin: 0; } .month dd > span { padding-right: 0.25em; } #archive-year .navigation li { border-bottom: 1px solid var(--entry-border-color); margin-bottom: -1px; } #archive-month .navigation form { display: flex; } #archive-month .navigation select { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); padding: 5px; } #archive-month .navigation input { background: transparent; color: var(--text-color); border: 1px solid var(--entry-border-color); font-family: var(--main-font); font-size: var(--text-size); padding: 5px; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: disc inside; } ul.ljtaglist li::marker { color: var(--icon-color); } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { border-top: 1px solid var(--entry-border-color); text-align: center; padding: 1em; } .icon { border-top: 1px solid var(--entry-border-color); display: flex; } .icon-image { padding: 10px; border-right: 1px solid var(--entry-border-color); } .icon-info { padding: 1em; } .icon-image img { display: block; } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ modules ------------*/ .module { background: var(--entry-background-color); margin-bottom: 40px; border: 1px solid var(--entry-border-color); } .module h2 { font-size: 1em; display: flex; font-weight: normal; align-items: center; margin: 0; padding: 0; border-bottom: 1px solid var(--entry-border-color); } .module h2:before { display: inline-block; font-family: Material Symbols Outlined; font-size: 24px; line-height: 24px; padding: 10px; margin-right: 10px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .module-navlinks h2:before { content: "map"; } .module-typelist h2:before { content: "explore"; } .module-tags_list h2:before, .module-tags_multilevel h2:before, .module-tags_cloud h2:before { content: "loyalty"; } .module-calendar h2:before { content: "calendar_month"; } .module-customtext h2:before { content: "comment"; } .module-pagesummary h2:before { content: "article"; } .module-active h2:before { content: "local_fire_department"; } .module-search h2:before { content: "search"; } .module-cuttagcontrols h2:before { content: "content_cut"; } .module-syndicate h2:before { content: "rss_feed"; } .module-subscriptionfilters h2:before { content: "filter_alt"; } .module-credit h2:before { content: "code_off"; } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Notebook" by myrtillenne'; } .module h2, .module h2 a { color: var(--text-color); } .module h2 a:hover { color: var(--link-color); } .module-content { padding: 1.5em; } .module-content ul { list-style: none; padding: 0; clear: both; } .module-content > ul { margin: -1.5em; } .module-content li { border-bottom: 1px solid var(--entry-border-color); padding: 0.5em 1em; } .module-navlinks li a:hover, .module-typelist li a:hover { letter-spacing: 2px; } .module-content li:last-child { border-bottom: 0; } .module-tags_multilevel .module-content ul{ margin-left: 1em; } .module-tags_multilevel .module-content > ul, .module-tags_cloud .module-content ul{ margin:0; } .module-tags_multilevel .module-content li, .module-tags_cloud .module-content li { border-bottom: 0; padding: 0; } .module-calendar .module-content { text-align: center; padding: 0; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: collapse; } .module-calendar td { border-top: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); padding: 0.5em 0; } .module-calendar td:last-child { border-right: none; } .module-calendar th { padding: 0.5em 0; } .module-calendar .module-header a { padding-right: 0.25em; } .tags_cloud li, .module-tags_cloud li { display: inline; } .module .manage-link, .module .userpic, .journal-website-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none !important; } .module-userprofile .module-content { padding: 0; } .module .journal-name { display: flex; font-weight: normal; align-items: center; } .module .journal-name:before { content: "person"; display: inline-block; font-family: Material Symbols Outlined; font-size: 24px; line-height: 24px; padding: 10px; margin-right: 10px; color: var(--icon-color); border-right: 1px solid var(--entry-border-color); } .module-userprofile .module-header { display: none; } @media (min-width: 1024px) { .module-userprofile .module-header { display: block; padding: 10px; } .module-userprofile .module-header a { display: none; } .module-userprofile .module-header:after { content: ""; display: block; padding-bottom: 100%; background-image: var(--sidebar-image); background-size: cover; } } .module-search .module-content { text-align: center; padding: 0; } .search-form form { display: flex; flex-wrap: wrap; } .comment_search_label { display: none; } .comment_search_checkbox_item { order: 9; flex: 0 0 100%; padding: 10px; border-top: 1px solid var(--entry-border-color); box-sizing: border-box; } .comment_search_checkbox_item:after { content: "Include comments"; } .search-box-item { flex: 1; padding: 5px; } .search-button-item { padding: 5px; border-left: 1px solid var(--entry-border-color); } input.search-box { width: 100%; background: var(--entry-background-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); } input.search-button { background: var(--entry-background-color); color: var(--text-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .noentries, .navigation.empty { display: none; } .navigation { background: var(--entry-background-color); margin-bottom: 40px; } .navigation ul { margin: 0; padding: 0; list-style: none; border: 1px solid var(--entry-border-color); overflow: hidden; } .navigation li { padding: 0.5em; border-right: 1px solid var(--entry-border-color); float: left; } li.page-back { padding: 0; border-right: 1px solid var(--entry-border-color); } li.page-forward { padding: 0; border-left: 1px solid var(--entry-border-color); border-right: 0; float: right; } li.page-back a, li.page-forward a { font-size: 0; display: block; color: var(--icon-color); } li.page-back a:hover, li.page-forward a:hover { color: var(--icon-hover-color); } #entries .navigation li a:before { display: block; font-family: "Material Symbols Outlined"; font-size: 24px; line-height: 24px; padding: 10px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } /*------------ footer ------------*/ #footer { clear: both; background: var(--entry-background-color); border-top: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); text-align: center; } .page-top a { font-size: 0; color: var(--icon-color); } .page-top a:hover { color: var(--icon-hover-color); } .page-top a:before { display: inline-block; content: "arrow_upward"; font-family: "Material Symbols Outlined"; font-size: 24px; line-height: 24px; padding: 10px; border-left: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); padding: 10px 0 0; border-radius: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 220px; text-align: center; box-shadow: none; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { margin: 0; border: 0; float: none; } div.ContextualPopup .Userpic img { border: 1px solid var(--entry-border-color); padding: 5px; } div.ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid var(--entry-border-color); line-height: 1; list-style: none; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--entry-background-color); justify-content: center; padding: 0.75em 0; color: var(--text-color); } #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 { text-decoration: none; color: var(--link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: 1em; color: var(--text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip_search form, #lj_controlstrip_login form { display: flex; flex-wrap: wrap; justify-content: flex-end; } #lj_controlstrip_login input, #lj_controlstrip_search select, #lj_controlstrip input { border: 1px solid var(--entry-border-color); font-size: 1em !important; padding: 5px !important; font-family: var(--main-font) !important; background: var(--entry-background-color) !important; color: var(--text-color) !important; margin-right: -1px !important; } #lj_controlstrip_search input#search { width: 12em; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_userpic a img { max-width: 50px; max-height: 50px; width: auto; height: auto; padding: 5px; border: 1px solid var(--entry-border-color); } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_user form div { display: flex; } #lj_controlstrip_user .ljuser { line-height: 22px; padding: 5px; border: 1px solid var(--entry-border-color); border-right: 0; }
   Into the "Custom stylesheet URL" field paste the following.
   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&family=Poppins&display=swap
5. 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

• icon font by Google
• images from freepik by callmetak, garetsvisual, rawpixel.com, lookstudio

Comments

[violateraindrop]

Very pretty! I added this entry to my memories and might use the dark one soon :D

[asukarkreutz]

Ooo, I’m really digging the purple version of this… saving for future use, ty!!

[calzephyr]

Thank you for the lovely layout and clear instructions!

[adore]

I love both versions! My journal is wearing the light one now! Thank you for your beautiful creations ♡

[skargasm]

Absolutely adore this - so easily personalised, really nice and easy on my (old) eyes - beautiful!

[death]

beautiful! using with credit on sidebar and also on info page. thank you!

[sandrine]

This is gorgeous! ♥ I'd love to use it as a layout for a community, but when I switch the tags module to multilevel, the top level is written partially over the secondary level and the dividing lines are a bit messed up (screenshot here: https://sandrine.dreamwidth.org/file/96381.png). Is there anything I can change in the settings or add to the CSS to fix this?

[tofistig]

This is very lovely. I was intending on using it but when I switched out the hex codes, I found that the blank side panel has not changed colours, and I could not find any #FDF5EE left in my code.

Screenshot here: https://tofistig.dreamwidth.org/file/1924.png