Bloom

[rosecarmine]

LIVE PREVIEW

FEATURES

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

INSTRUCTIONS

1. Go to the "Select style" page, search for "Basic boxes" 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 - 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
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 freepik, tawatchai07, svstudioart

Comments

[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?

[vex_verlain]

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!

[freddykrueger]

Hi, thank you. That helped. I also forgot to put the layout and the light or dark part together.