myrtillenne

LIVE PREVIEW

FEATURES

header image
sidebar image
left or right sidebar
2 colour schemes
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic boxes" and apply any theme.
Choose the "2 Column (sidebar on the left)" or the "2 Columns (sidebar on the right)" page setup.
Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "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.
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 - bloom - light (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - header image - freepik - https://www.freepik.com/author/freepik - sidebar image - tawatchai07 - https://www.freepik.com/author/tawatchai07 -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #4f3900; --line-height: 1.5; --background-color: #c6dde3; --link-color: #c28d01; --link-hover-color: #2e8bb4; --main-font: Nunito, sans-serif; --title-font: Shadows Into Light, sans-serif; --heading-color: #f2efe3; --heading-link-color: #f2e2a4; --heading-link-hover-color: #f2efe3; --heading-background-color: #4fabd2; --content-width: 1200px; --entry-background-color: #f2efe3; --entry-border-color: #8abbce; --icon-color: #2e8bb4; --icon-hover-color: #c28d01; --icon-background-color: #f2efe3; --entry-icon-color: #8abbce; --header-image: url("https://rosecarmine.dreamwidth.org/file/191726.png"); --header-image-height: 400px; --header-image-size: cover; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/187206.jpg"); --sidebar-image-height: 400px; --spacing: 40px; }
Dark:/*------------------------------------- - layout - bloom - dark (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - images - svstudioart - https://www.freepik.com/author/svstudioart -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #C9A3A6; --line-height: 1.5; --background-color: #00849B; --link-color: #31E0FF; --link-hover-color: #F47784; --main-font: Nunito, sans-serif; --title-font: Shadows Into Light, sans-serif; --heading-color: #C9A3A6; --heading-link-color: #F47784; --heading-link-hover-color: #31E0FF; --heading-background-color: #002135; --content-width: 1200px; --entry-background-color: #004055; --entry-border-color: #00849B; --icon-color: #002135; --icon-hover-color: #002135; --icon-background-color: #31E0FF; --entry-icon-color: #00849B; --header-image: url("https://rosecarmine.dreamwidth.org/file/190457.jpg"); --header-image-height: 400px; --header-image-size: cover; --sidebar-width: 300px; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/190141.jpg"); --sidebar-image-height: 400px; --spacing: 40px; }
Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { color: var(--text-color); background: var(--background-color); font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); margin: 0; } a, a:visited { 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: 1em; border: 1px solid var(--entry-border-color); border-radius: 8px; } blockquote:before { display: inline-block; content: "format_quote"; font-family: Material Symbols Outlined; font-size: 26px; line-height: 0; vertical-align: middle; margin-right: 10px; color: var(--entry-icon-color); } /*------------ content ------------*/ #canvas > .inner:first-child { max-width: var(--content-width); margin-top: var(--spacing); } @media (min-width: 800px) { #canvas > .inner:first-child { margin: var(--spacing); } } @media (min-width: 1024px) { #canvas > .inner:first-child { margin: var(--spacing) auto 0; padding: 0 var(--spacing); } .two-columns-left #content { border-left: var(--sidebar-width) solid transparent; } .two-columns-right #content { border-right: var(--sidebar-width) solid transparent; } } @media (min-width: 1280px) { #canvas > .inner:first-child { padding: 0 120px; } } @media (min-width: 1024px) { .two-columns #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; } .two-columns-left #primary > .inner:first-child { margin-left: var(--spacing); } .two-columns-right #primary > .inner:first-child { margin-right: var(--spacing); } } #content-footer { clear: both; } /*--------------- header ---------------*/ #header { box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); border-radius: 8px; color: var(--heading-color); overflow: hidden; } @media (min-width: 800px) { #header:before { content: ""; display: block; width: 100%; height: var(--header-image-height); background-image: var(--header-image); background-size: var(--header-image-size); background-position: top center; border-radius: 8px 8px 0 0; } } #header > .inner:first-child { background: var(--heading-background-color); } #header .module-wrapper { order: 2; } #header > .inner:first-child { border-radius: 0 0 8px 8px; display: flex; flex-wrap: wrap; align-items: center; } #journaltitles-container { padding: 0.75em 1em; flex: 1; line-height: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } h1#title { font-size: 1.5em; padding: 0 0.5em 0 0; font-family: var(--title-font); margin: 0; display: inline; } h1#title a { color: var(--heading-link-color); } h1#title a:hover { color: var(--heading-link-hover-color); } h2#subtitle { font-size: 1em; font-weight: normal; padding: 0; margin: 0; display: inline; } h2#pagetitle { display: none; } .module-navlinks { padding: 5px; } .module-navlinks ul { display: flex; gap: 5px; } .module-navlinks li a { display: block; padding: 7px; font-size: 0; color: var(--icon-color); border-radius: 8px; background: var(--icon-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .module-navlinks li a:hover { color: var(--icon-hover-color); } .module-navlinks li a:before { display: block; font-family: Material Symbols Outlined; font-size: 26px; line-height: 26px; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "calendar_month"; } .list-item-read a:before { content: "feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "travel_explore"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } /*--------------- entries ---------------*/ .entry, .comment { margin: var(--spacing) 0; background: var(--entry-background-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); border-radius: 8px; position: relative; } .sticky-entry-icon, .admin-post-icon { display: none; } .header { background: var(--heading-background-color); border-radius: 8px 8px 0 0; } .header .inner { padding: 5px; display: flex; flex-wrap: wrap; align-items: center; gap: 5px; } .entry .entry-title, .full .comment-title { font-size: 1.2em; line-height: 1.2; font-weight: normal; padding: 6px; margin: 0; flex-grow: 1; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .entry .entry-title a, .full .comment-title a { color: var(--heading-link-color); } .entry .entry-title a:hover, .full .comment-title a:hover { color: var(--heading-link-hover-color); } .sticky-entry .header .inner:before { content: "push_pin"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .admin-post .header .inner:after { content: "verified"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; order: -1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .header .datetime { color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .sticky-entry .datetime { display: none; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--icon-color); } .entry .datetime a:hover { color: var(--icon-hover-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; display: inline-block; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Symbols Outlined; font-size: 22px; display: inline-block; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; vertical-align: middle; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; vertical-align: middle; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .entry .contents, .comment .contents { padding: 0 2em; margin: 2em 0; } #primary .userpic { float: right; margin-left: 1em; } .two-columns-right #primary .userpic { float: left; margin-right: 1em; margin-left: 0; } #primary .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } @media (min-width: 640px) { #primary .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } @media (min-width: 1280px) { .has-userpic .userpic { position: absolute; top: 0; right: -10px; transform: translateX(100%); } .two-columns-right .has-userpic .userpic { left: -10px; transform: translateX(-100%); right: auto; } } .entry .poster { font-size: 0; display: block; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .poster .ljuser:before, .full .poster:before { font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry-content, .comment-content { margin-top: 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::marker, .comment-content li::marker { color: var(--entry-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; color: var(--entry-icon-color); margin-right: 5px; } .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 { margin-top: 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } .metadata li { display: inline; margin-right: 1em; } #metadata-music:before { content: "queue_music"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-location:before { content: "flag"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Symbols Outlined; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .footer { clear: both; } .entry .footer { margin-top: 1em; background: var(--heading-background-color); border-radius: 0 0 8px 8px; } .entry .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .entry div.tag { background: var(--entry-background-color); border-radius: 0 0 8px 8px; flex: 0 0 100%; } .entry .tag ul { margin: 0; padding: 0 5px 5px; } .entry .tag ul li { display: inline-block; margin-top: 5px; line-height: 1; font-size: 0; } .entry .tag ul li a { display: inline-block; padding: 8px; border-radius: 8px; font-size: var(--text-size); color: var(--heading-link-color); background: var(--heading-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .entry .tag ul li a:hover { color: var(--heading-link-hover-color); } .entry .tag-text { display: none; } .tag-nav-trigger { float: right; } .entry div.tag { flex: 0 0 100%; order: 3; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 5px 10px; } ul.entry-management-links li, ul.entry-interaction-links li { display: inline; padding: 0 5px; } ul.entry-management-links li a, ul.entry-interaction-links li a { color: var(--heading-link-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } ul.entry-management-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--heading-link-hover-color); } ul.entry-management-links li a img { display: none; } ul.entry-management-links li a:before { font-family: Material Symbols Outlined; font-size: 24px; } .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: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } /*--------------- comments ---------------*/ .comment-pages { color: var(--heading-color); background: var(--heading-background-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; padding: 1em 2em; margin-top: 10px; } .comment-pages a { color: var(--heading-link-color); } .comment-pages a:hover { color: var(--heading-link-hover-color); } .comment-pages:first-of-type { margin-top: var(--spacing); } .comment-pages:last-of-type { margin-bottom: var(--spacing); } .comment-wrapper { min-width: 15em; } .thread-depth { color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; line-height: 22px; padding: 9px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .comment-title { font-weight: normal; padding: 0; margin: 0; } .comment-date-text, .comment-from-text { display: none; } .comment .poster-ip { display: block; } .partial .comment { background: var(--entry-background-color); margin: var(--spacing) 0; padding: 0.5em 1em; border-radius: 8px; } .comment .footer { background: var(--heading-background-color); border-radius: 0 0 8px 8px; } .comment .footer .inner { display: flex; flex-wrap: wrap; align-items: center; padding: 5px 10px; color: var(--heading-color); } .multiform-checkbox { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); padding: 0 5px; } ul.comment-management-links { margin: 0; padding: 0; list-style: none; order: -1; margin-right: auto; } ul.comment-management-links li { display: inline; margin: 0 5px; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { font-family: Material Symbols Outlined; font-size: 24px; } .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"; } ul.comment-interaction-links { margin: 0; padding: 0; } ul.comment-interaction-links li { display: inline; margin: 0 5px; } ul.comment-management-links li a, ul.comment-interaction-links li a { color: var(--heading-link-color); background: var(--heading-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } ul.comment-management-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--heading-link-hover-color); } .bottomcomment { color: var(--heading-color); background: var(--heading-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 10px; } .bottomcomment ul.entry-management-links { margin-right: auto; padding: 0; } .bottomcomment ul.entry-interaction-links { margin-left: auto; padding: 0; } .bottomcomment label { flex-basis: 100%; text-align: center; } #multiform_mode, #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); margin: 0 2px; padding: 9px; background: var(--icon-background-color); border-radius: 8px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--entry-background-color); color: var(--text-color); font-family: var(--main-font); font-size: var(--text-size); border-radius: 8px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: var(--heading-background-color); border: 0; font-size: 1em; padding: 0.5em; color: var(--heading-link-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); line-height: 1; } #postform { padding: 2em; background: var(--entry-background-color); border: 0; border-radius: 8px; margin: var(--spacing) 0; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin: var(--spacing) 0; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; line-height: 1.2; font-weight: normal; padding: 6px; margin: 0; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .tags-container .contents { padding: 2em; } #archive-year .month .footer .inner, .manage-link { line-height: 1.2; padding: 10px; background: var(--heading-background-color); border-radius: 0 0 8px 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } #archive-year .month .footer a, .manage-link a { color: var(--heading-link-color); } #archive-year .month .footer a:hover, .manage-link a:hover { color: var(--heading-link-hover-color); } /*------------ archive ------------*/ .month caption { display: none; } .day-date { display: none; } .month table { text-align: center; width: 100%; border-collapse: collapse; } table.month td { padding: 0.5em; width: 2em; height: 2em; font-weight: normal; border-top: 1px solid var(--entry-border-color); border-right: 1px solid var(--entry-border-color); } table.month th { padding: 0.5em; font-weight: normal; border-right: 1px solid var(--entry-border-color); } table.month td:last-child, table.month th:last-child { border-right: none; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "[ "; color: var(--text-color); } table.month td p:after { content: " ]"; color: var(--text-color); } .month dl { margin: var(--spacing) 0 0; } .month dt { float: left; display: block; width: 100%; background: var(--heading-background-color); border-radius: 8px 8px 0 0; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-size: 1.2em; line-height: 1.2; margin-bottom: 2em; padding: 10px; box-sizing: border-box; } #primary .month dt a { color: var(--heading-link-color); } #primary .month dt a:hover { color: var(--heading-link-hover-color); } .month dl h3 { font-size: 1em; padding: 0; margin: 0; display: inline; } .month dl .time { padding-right: 0.5em; } .page-month .month .entry-poster { margin-right: 0.5em; } .page-month .month .entry-poster.empty { margin-right: 0; } .month dd { margin: 0; padding: 2em; background: var(--entry-background-color); border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); margin-bottom: var(--spacing); } .month .tag ul { display: inline; margin: 0; padding: 0; } .month .tag ul li { display: inline; } .month dl br { display: none; } .month dl .tag-text { font-style: normal; } #archive-year .navigation ul { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } #archive-year .navigation li a { display: block; padding: 7px; background: var(--icon-background-color); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; } #archive-year .navigation li a:hover { color: var(--icon-hover-color); } #archive-month .navigation ul form { display: flex; align-items: center; } #archive-month .navigation select { background: var(--icon-background-color); border: 0; border-radius: 8px; font-family: var(--main-font); font-size: var(--text-size); color: var(--icon-color); padding: 9px; } #archive-month .navigation input { background: var(--icon-background-color); border: 0; border-radius: 8px; font-family: var(--main-font); font-size: var(--text-size); color: var(--icon-color); padding: 9px; } #archive-month .navigation li { padding: 0 5px; color: var(--heading-color); } #archive-month .navigation li a { color: var(--heading-link-color); } #archive-month .navigation li a:hover { color: var(--heading-link-hover-color); } /*------------ tags ------------*/ ul.ljtaglist { font-family: var(--date-font); margin: 0 0 0 1em; padding: 0; list-style: none; } ul.ljtaglist li:before { content: "chevron_right"; font-family: Material Symbols Outlined; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 1em; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { border-top: 1px solid var(--entry-border-color); padding: 1em; } .icons-container .icon { border-top: 1px solid var(--entry-border-color); display: flex; flex-wrap: wrap; } .icon-image { order: 2; padding: 1em; border-left: 1px solid var(--entry-border-color); } .icon-image img { display: block; } .icon-info { padding: 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; } /*------------ navigation ------------*/ .navigation ul { margin: var(--spacing) 0; padding: 0; list-style: none; } .navigation ul { background: var(--heading-background-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; padding: 5px; } .navigation li { display: inline; } li.page-back { float: left; font-size: 0; } li.page-forward { float: right; font-size: 0; } li.page-back a, li.page-forward a { display: block; padding: 7px; background: var(--icon-background-color); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); border-radius: 8px; } li.page-back a:hover, li.page-forward a:hover { color: var(--icon-hover-color); } li.page-back a:before, li.page-forward a:before { display: block; font-family: Material Symbols Outlined; font-size: 26px; line-height: 26px; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ sidebar ------------*/ @media (min-width: 1024px) { .two-columns #secondary { width: var(--sidebar-width); } .two-columns-left #secondary { float: left; margin-left: calc(-1 * var(--sidebar-width)); } .two-columns-right #secondary { float: right; margin-right: calc(-1 * var(--sidebar-width)); } } #secondary .module { margin: var(--spacing) 0; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); border-radius: 8px; overflow: hidden; } #secondary .module-content { background: var(--entry-background-color); border-radius: 0 0 8px 8px; } .module h2 { background: var(--heading-background-color); font-size: 1.2em; font-weight: normal; display: flex; align-items: center; margin: 0; padding: 5px; color: var(--heading-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .module h2 a { color: var(--heading-link-color); } .module h2 a:hover { color: var(--heading-link-hover-color); } .module h2:before { float: left; text-align: center; font-family: Material Symbols Outlined; font-size: 26px; line-height: 26px; padding: 7px; margin-right: 10px; color: var(--icon-color); background: var(--icon-background-color); border-radius: 8px; } #secondary .module-content { padding: 1em; } .module-content ul { margin: 0; padding: 0; list-style: none; } .module-userprofile { color: var(--heading-color); } @media (min-width: 1024px) { .module-userprofile:after { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); background: var(--sidebar-image); background-size: cover; } } .module-userprofile .module-content { display: flex; align-items: center; padding: 5px !important; background: var(--heading-background-color) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); font-size: 1.2em; border-radius: 8px 8px 0 0 !important; } .journal-name { margin-left: 10px; } .module-userprofile .userpic img { max-width: 40px; max-height: 40px; width: auto; height: auto; border-radius: 8px; display: block; } .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-typelist .module-content, .module-tags_list .module-content, .module-pagesummary .module-content, .module-active .module-content, .module-subscriptionfilters .module-content { padding: 0 !important; } .module-typelist li, .module-tags_list li, .module-pagesummary li, .module-active li, .module-subscriptionfilters li { border-top: 1px solid var(--entry-border-color); padding: 0.5em 1em; } #secondary .module-content li:before { content: "chevron_right"; font-family: Material Symbols Outlined; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } #secondary .module-content li:hover:before { margin-right: 10px; } #secondary .module-content li:first-child { border: 0; } .module-tags_cloud li { display: inline; } .module-tags_multilevel ul { padding-left: 1em; } .module-tags_multilevel ul:first-child { padding-left: 0; } .module-tags_cloud li:before { display: none; } .module-calendar .module-content { text-align: center; padding: 0 !important; } .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, .module-calendar th:last-child { border-right: none; } .module-calendar th { padding: 0.5em 0; border-right: 1px solid var(--entry-border-color); } .module-calendar .module-header a { padding-right: 0.25em; } .entry-day { background: var(--heading-background-color); } .entry-day a { background: var(--heading-background-color); color: var(--heading-link-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .entry-day a:hover { color: var(--heading-link-hover-color); } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Bloom" by myrtillenne'; } .module-search .module-content { text-align: center; } .search-form .search-box-item, .search-form .search-button-item { display: block; } input.search-box { margin: 0 auto; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); border-radius: 8px; padding: 5px; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color-alt); } input.search-button { padding: 5px 10px; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); } .module .manage-link, .module-userprofile h2, .journal-website-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none; } /*------------ footer ------------*/ #footer { clear: both; background: var(--heading-background-color); padding: 5px; text-align: center; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } .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: 26px; line-height: 26px; padding: 7px; background: var(--icon-background-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); border-radius: 8px; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; border-radius: 8px; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { border: 0; float: none; padding: 10px; } div.ContextualPopup .Userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; display: block; margin: 0 auto; border-radius: 8px; } .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; } .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: 1px solid var(--border-color); box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4); } #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: var(--text-size); color: var(--text-color); } #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); font-family: var(--main-font) !important; border-radius: 8px; padding: 6px 0 !important; line-height: 1; } #lj_controlstrip input[type="submit"] { font-size: 1em; padding: 8px !important; color: var(--heading-link-color); border: 1px solid transparent; background: var(--heading-background-color) !important; text-shadow: 0 1px 2px 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 img { border-radius: 8px; }
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=Nunito&family=Shadows+Into+Light&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).

RESOURCES

icon font by Google
images from freepik by freepik, tawatchai07, svstudioart

Flat | Top-Level Comments Only

From:

impala_chick

I love these bright color schemes! The first one makes me think of summer, so I might snag it.

vex_verlain

This is SO gorgeous! Thank you for sharing your coding skills and making such beautiful layouts. ❤

rosecarmine

Thank you!

skargasm

Gorgeous and so timely with the arrival of summer!

haebin

Those are the perfect colors for summer! ♥

morrow

oooo all your layouts are wonderful but this one is particularly lovely, great work!

svgurl

These are both beautiful! :D

intothisshadow

Beautiful work again! Thank you for making so many wonderful themes and sharing them with us :D

Thank you! 😘

villagewitch7

These are beautiful! Thank you for sharing!

lofivibe

Lovely! Especially a fan of the darker one!

adore

Ooooh, beautiful!

poorunfortunatesoul

Love this one, figured it out how to do it. But it it doesn't align like in the live preview and the photos? Am I doing some wrong? Could you help in any way?

Hey there! I'm not the designer, but it looks like you need to redo steps 1 and 2 of the instructions above.

I believe you're using the wrong base theme (it looks like you're using "Patsy"). So first you'll need to select one of the themes for "Basic Boxes" on the Select Journal Style page. (This link should pull up all of the Basic Boxes themes. Just apply any one of them.) Also on that page, at the bottom under "Choose a Page Setup," you need to select either "2 Column (sidebar on the left)" or "2 Columns (sidebar on the right)" in order for the custom CSS to work properly.

Hope that helps!