Tiles

[rosecarmine]

LIVE PREVIEW

FEATURES

• header image (800x350px)
• default icon, navigation links, links list, custom text
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the "Select style" page, search for "Tabula Rasa" and apply any theme.
2. Choose the "1 Column (modules at bottom; no sidebar)" page setup.
3. Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "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 "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
5. Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
   /*------------------------------------- - layout - tiles (tabula rasa) - https://myrtillenne.dreamwidth.org - icon font - material symbols - https://fonts.google.com/icons - header image - tawatchai07 - https://www.freepik.com/tawatchai07 /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --content-width: 800px; /*also the width of the header image*/ --main-font: DM Sans, sans-serif; --title-font: DM Sans, sans-serif; --background-color: #c4c5ec; --text-color: #333342; --link-color: #9d67b8; --link-hover-color: #6363a0; --entry-background-color: #f4f4ff; --text-color-alt: #333342; --link-color-alt: #6363a0; --link-hover-color-alt: #9d67b8; --entry-background-color-alt: #e6e6f7; --gradient1-color: #9696de; --gradient2-color: #c4a2d4; --icon-color: #f4f4ff; --header-image: url(https://rosecarmine.dreamwidth.org/file/141415.jpg); --header-image-height: 350px; --sidebar-width: 350px; --link1-icon: "photo_camera"; --link2-icon: "photo"; --link3-icon: "movie"; --link4-icon: "business_center"; --link5-icon: "shopping_cart"; --link6-icon: "code_off"; --link7-icon: "headphones"; --link8-icon: "star"; --link9-icon: "computer"; --link10-icon: "folder_open"; --userpic-size: 100px; } /*--------------- 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); border: 0; font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); margin: 0; } /*--------------- links ---------------*/ 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 { background: var(--entry-background-color-alt); color: var(--text-color-alt); margin: 1em 0; padding: 1em; border-radius: 5px; } blockquote a { color: var(--link-color-alt); } blockquote a:hover { color: var(--link-hover-color-alt); } /*--------------- content ---------------*/ #canvas { margin-top: 50px; } @media (min-width: 1024px) { #canvas { margin-left: var(--sidebar-width); margin-bottom: 50px; } } #primary { max-width: var(--content-width); margin: 0 auto; } @media (min-width: 800px) { #primary { padding: 0 50px; } } /*--------------- header ---------------*/ #header { text-align: center; margin: 50px auto; max-width: var(--content-width); } @media (min-width: 800px) { #header { padding: 0 50px; } } #header > .inner { background: var(--entry-background-color); margin-top: 4px; padding: 2em; border-radius: 5px; } @media (min-width: 800px) { #header:before { content: ""; display: block; width: 100%; height: var(--header-image-height); background-image: var(--header-image); background-size: cover; background-position: center center; border-radius: 5px; } } h1#title { font-size: 1.5em; line-height: 1.2; margin: 0; padding: 0; font-weight: normal; } h2#subtitle { font-size: 1em; font-weight: normal; background: var(--entry-background-color-alt); color: var(--text-color-alt); border-radius: 5px; padding: 5px 10px; margin: 0.5em 0 0; } h2#pagetitle { display: none; } /*--------------- entries ---------------*/ .entry, .full .comment { margin: 50px 0; background: var(--entry-background-color); border-radius: 5px; padding: 2em; } .has-userpic .entry .header, .has-userpic .comment .header { float: left; } @media (min-width: 800px) { .has-userpic .entry .header { width: calc(100% - var(--userpic-size) - 1em - 10px); } } .entry .entry-title, .full .comment-title { font-size: 1.5em; line-height: 1.2; font-weight: normal; margin: 0 0 1em; padding: 0; } .no-subject .entry .entry-title { margin: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .header .datetime { float: left; display: flex; align-items: flex-start; line-height: 22px; margin-bottom: 4px; } .header .datetime span { color: var(--text-color-alt); background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-right: 4px; } .header .datetime:before { content: "today"; font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .header .datetime a { color: var(--link-color-alt); } .header .datetime a:hover { color: var(--link-hover-color-alt); } .restrictions img, .access-filter img { display: none; } .access-filter:before, .restrictions:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); float: left; line-height: 22px; margin-right: 4px; margin-bottom: 4px; } .security-protected .access-filter:before { content: "lock"; } .security-private .access-filter:before { content: "visibility_off"; } .restrictions-NSFW .restrictions:before { content: "warning"; } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; } .has-userpic .userpic { float: right; margin-left: 1em; shape-outside: circle(50%); } #primary .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 50%; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } @media (min-width: 800px) { #primary .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } .entry .poster { clear: left; display: block; color: var(--text-color-alt); } .entry .poster { font-size: 0; } .entry .poster .ljuser { font-size: var(--text-size); display: inline-flex; align-items: flex-start; line-height: 22px; margin-bottom: 4px; } .entry .poster .ljuser:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .entry .poster .ljuser b { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-right: 4px; font-weight: normal; display: block; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "person"; } .entry .poster .ljuser:nth-child(2):before { content: "group"; } .poster .ljuser img { display: none; } .entry .poster a, .full .poster a { color: var(--link-color-alt); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-hover-color-alt); } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .entry-content { margin: 2em 0; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol { padding-left: 1em; } .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .cuttag-action img { display: none; } .cut-wrapper{ display: inline-flex; align-items: flex-start; } .cuttag, .cuttag-action-after { font-size: 26px; min-width: 22px; line-height: 22px; padding: 5px; font-family: arial; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; } .cuttag-action:before { content: "+"; color: var(--icon-color); } .cuttag-action-after { display: inline-block; } .cuttag-action-after:before { display: inline-block; transform: rotate(45deg); } .cut-open, .cut-close { display: none; } .cut-text { font-weight: normal; line-height: 22px; padding: 5px; background: var(--entry-background-color-alt); border-radius: 5px; } .cut-text a { font-size: var(--text-size); color: var(--link-color-alt); } .cut-text a:hover { color: var(--link-hover-color-alt); } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata-label, .entry .tag-text { display: none; } .metadata li { margin: 4px 0; line-height: 22px; display: flex; align-items: flex-start; color: var(--text-color-alt); } .metadata li:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #metadata-music:before { content: "headphones"; } #metadata-mood:before { content: "face"; } #metadata-location:before { content: "location_on"; } #metadata-xpost:before { content: "add_location"; } .metadata img { margin-right: 4px; align-self: center; } .metadata-item { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; } .metadata a, .entry div.tag a { color: var(--link-color-alt); } .metadata a:hover, .entry div.tag a:hover { color: var(--link-hover-color-alt); } .entry div.tag:before { content: "tag"; font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); line-height: 22px; float: left; } .entry .tag ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; } .entry .tag ul li { color: transparent; margin-bottom: 4px; font-size: 0; } .entry .tag ul li a { font-size: var(--text-size); background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; display: inline-block; line-height: 22px; margin-right: 4px; } .tag-nav-trigger { float: right; } .entry-management-links, .entry-interaction-links { margin: 0; padding: 0; list-style: none; } .entry-management-links li, .entry-interaction-links li { margin-right: 4px; margin-bottom: 4px; float: left; } .entry-management-links li a, .entry-interaction-links li a { display: block; color: var(--link-color-alt); } .entry-management-links li a:hover, .entry-interaction-links li a:hover { color: var(--link-hover-color-alt); } .entry-management-links li a img { display: none; } .entry-management-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 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 li a { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } li.entry-readlink a { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } li.entry-permalink a { font-size: 0; } li.entry-replylink a { font-size: 0; } li.entry-permalink a:before, li.entry-replylink a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 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 ---------------*/ #comments { margin: 50px 0; } .comment-pages { font-family: var(--title-font); background: var(--entry-background-color); padding: 0.5em; text-align: center; border-radius: 5px; margin-top: 10px; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .no-subject .comment .comment-title { padding: 0; margin: 0; } .comment-date-text, .comment-from-text { display: none !important; } .full .poster { line-height: 22px; clear: left; float: left; color: var(--text-color-alt); display: flex; } .full .poster:before { font-family: "Material Symbols Outlined"; font-size: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .full .poster b, .full .anonymous { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-right: 4px; font-weight: normal; display: block; } .full .poster:before { content: "person"; } .comment .poster-ip { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; display: inline-block; margin-top: 4px; color: var(--text-color-alt); } .comment-content { padding: 2em 0; clear: left; } .comment .multiform-checkbox { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; float: left; margin-right: 4px; color: var(--text-color-alt); } .comment-management-links, .comment-interaction-links { margin: 0; padding: 0; list-style: none; } .comment-management-links li, .comment-interaction-links li { margin-right: 4px; margin-bottom: 4px; float: left; color: var(--text-color-alt); } .comment-management-links.icon-links li a { padding: 0 !important; } .comment-management-links li a img { display: none; } .comment-management-links li a:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); 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, .comment-interaction-links li { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; display: block; } .comment-management-links li a, .comment-interaction-links li a { color: var(--link-color-alt); } .comment-management-links li a:hover, .comment-interaction-links li a:hover { color: var(--link-hover-color-alt); } .bottomcomment { padding: 1em; background: var(--entry-background-color); border-radius: 5px; margin: 10px 0; overflow: hidden; } .bottomcomment .entry-interaction-links:after { content: ""; display: block; clear: left; } textarea#commenttext { width: 100%; } .partial .comment { background: var(--entry-background-color); margin-top: 10px; padding: 1em; border-radius: 5px; } .partial .comment-title { margin: 0; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding-top: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color-alt); border: 0; color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); border-radius: 5px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #postform { padding: 2em; margin-top: 5px; background: var(--entry-background-color); border-radius: 5px; margin: 50px 0; } #multiform_mode { background: var(--entry-background-color-alt); border: 0; padding: 5px; font-size: var(--text-size); color: var(--text-color-alt); font-family: var(--main-font); border-radius: 5px; } #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 5px 10px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .qr-meta .block-icon img { border-radius: 5px; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .page-month .month, .tags-container, .icons-container { margin: 50px 0; background: var(--entry-background-color); padding: 2em; border-radius: 5px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.5em; font-family: var(--title-font); font-weight: normal; margin: 0; padding: 0; line-height: 1.2; } .month-wrapper .contents, .tags-container .contents, .icons-container .contents { margin-top: 2em; } #archive-year .month .footer, #primary .manage-link { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; margin-top: 2em; } #archive-year .month .footer a, #primary .manage-link a { color: var(--link-color-alt); } #archive-year .month .footer a:hover, #primary .manage-link a:hover { color: var(--link-hover-color-alt); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } table.month { margin: 0 auto; border-collapse: separate; border-spacing: 4px; width: 100%; border: none; text-align: center; table-layout: fixed; } table.month td { position: relative; } table.month th { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-weight: normal; } .day .label { display: block; background: var(--entry-background-color-alt); color: var(--text-color-alt); border-radius: 5px; line-height: 22px; padding: 5px; } .day.day-has-entries .label { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl dt { background: var(--entry-background-color-alt); border-radius: 5px; line-height: 22px; padding: 5px 10px; margin-top: 2em; } .month dl dt:first-child { margin-top: 0; } .month dl dt a { color: var(--link-color-alt); } .month dl dt a:hover { color: var(--link-hover-color-alt); } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 2em 0 0; } .month dd > span { padding-right: 0.25em; } .month .tag ul { display: inline; margin: 0; padding: 0; } .month .tag li { display: inline; } #archive-month .navigation form { display: flex; flex-wrap: wrap; list-style: none; } #archive-month .navigation select { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; border: 0; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color-alt); } #archive-month .navigation input { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); border: 0; font-family: var(--main-font); font-size: var(--text-size); } li.month-back, li.month-forward { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } #archive-year .navigation li a { display: block; background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } #archive-year .navigation li.active { line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /*------------ tags ------------*/ ul.ljtaglist { margin: 0 0 0 1em; padding: 0; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0; padding: 0; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .page-icons .toppages { display: none; } .icons-container .icon { display: flex; flex-wrap: wrap; margin-top: 1em; padding: 1em; background: var(--entry-background-color-alt); color: var(--text-color-alt); border-radius: 5px; } .icons-container .icon:last-child { border-bottom: 0; } .icons-container .icon a { color: var(--link-color-alt); } .icons-container .icon a:hover { color: var(--link-hover-color-alt); } .icon-image { order: 2; min-width: auto; margin: 0; } .icon-image img { display: block; } .icon-info { flex: 1; } .icon-pages { margin-top: 2em; } .icon-pages p { margin: 0; padding: 0; } /*------------ sidebar ------------*/ #secondary { background: var(--entry-background-color); overflow: hidden; scrollbar-width: thin; scrollbar-color: var(--entry-background-color-alt) var(--entry-background-color); } .module-section-one { max-width: var(--content-width); margin: 2em auto; padding: 0 2em; } @media (min-width: 1024px) { #secondary { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100%; overflow: auto; display: flex; } .module-section-one { margin: 50px 0; } } #secondary > .inner:first-child { margin: auto; width: 100%; } .module-content ul { list-style: none; padding: 0; margin: 0; } .module-content li { display: flex; align-items: flex-start; margin: 4px 0; line-height: 22px; } .module-content li:before { font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .module-content li a { background: var(--entry-background-color-alt); color: var(--link-color-alt); border-radius: 5px; flex: 1; padding: 5px 10px; } .module-content li a:hover { color: var(--link-hover-color-alt); } .module-userprofile { text-align: center; margin-bottom: 2em; } .module .userpic img { border-radius: 50%; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } .journal-name { display: inline-block; padding: 5px 10px; border-radius: 5px; line-height: 22px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .list-item-recent:before { content: "home"; } .list-item-archive:before { content: "calendar_month"; } .list-item-read:before { content: "feed"; } .list-item-tags:before { content: "style"; } .list-item-network:before { content: "person_search"; } .list-item-memories:before { content: "bookmark"; } .list-item-userinfo:before { content: "account_circle"; } .module-typelist li:before { content: "near_me"; } .module-typelist li:nth-child(1):before { content: var(--link1-icon); } .module-typelist li:nth-child(2):before { content: var(--link2-icon); } .module-typelist li:nth-child(3):before { content: var(--link3-icon); } .module-typelist li:nth-child(4):before { content: var(--link4-icon); } .module-typelist li:nth-child(5):before { content: var(--link5-icon); } .module-typelist li:nth-child(6):before { content: var(--link6-icon); } .module-typelist li:nth-child(7):before { content: var(--link7-icon); } .module-typelist li:nth-child(8):before { content: var(--link8-icon); } .module-typelist li:nth-child(9):before { content: var(--link9-icon); } .module-typelist li:nth-child(10):before { content: var(--link10-icon); } .module-customtext { margin-top: 2em; } .module h2, .module .manage-link, ul.userlite-interaction-links, .journal-website-name, .module-calendar, .module-tags_list, .module-tags_cloud, .module-tags_multilevel, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } #secondary::-webkit-scrollbar { width: 12px; height: 12px; } #secondary::-webkit-scrollbar-track { background: var(--entry-background-color); } #secondary::-webkit-scrollbar-thumb { background: var(--entry-background-color-alt); border-radius: 5px; border: 3px solid var(--entry-background-color); } #secondary::-webkit-scrollbar-corner { background: var(--entry-background-color); } /*------------ navigation ------------*/ .navigation ul { background: var(--entry-background-color); border-radius: 5px; margin: 50px 0; padding: 4px 4px 0; color: var(--text-color-alt); display: flex; flex-wrap: wrap; list-style: none; } .navigation li { margin-right: 4px; margin-bottom: 4px; } @media (min-width: 1024px) { #entries .navigation ul { background: transparent; margin: 0; float: left; } } #entries .navigation li a { display: inline-block; background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; } #entries .navigation li:before { float: left; font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; margin-right: 4px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } li.page-back:before { content: "arrow_back"; } li.page-forward:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } .navigation a { color: var(--link-color-alt); } .navigation a:hover { color: var(--link-hover-color-alt); } /*------------ footer ------------*/ #footer .inner { text-align: center; background: var(--entry-background-color); padding-bottom: 2em; } @media (min-width: 1024px) { #footer { padding: 0 50px; max-width: var(--content-width); margin: 0 auto; } #footer .inner { text-align: right; border-radius: 5px; padding: 4px; } } .page-top { display: inline-block; } .page-top a { font-size: 0; } .page-top a:before { float: left; content: "arrow_upward"; font-family: "Material Symbols Outlined"; font-size: 22px; line-height: 22px; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border-radius: 5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { color: var(--text-color); background: var(--entry-background-color); color: var(--text-color); border: 0; padding: 1em; font-family: inherit; border-radius: 5px; width: 200px; text-align: center; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-weight: normal; margin: 1em 0 0; padding: 8px; border-radius: 5px; line-height: 1; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } div.ContextualPopup .Userpic { border: none; float: none; margin: 0; } div.ContextualPopup .Userpic img { border-radius: 50%; padding: 5px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; text-align: center; } .ContextualPopup .Actions li { background: var(--entry-background-color-alt); border-radius: 5px; padding: 5px 10px; line-height: 22px; margin-top: 4px; } .ContextualPopup .Actions li a { color: var(--link-color-alt); } .ContextualPopup .Actions li a:hover { color: var(--link-hover-color-alt); } /*------------ control strip ------------*/ #lj_controlstrip { justify-content: center; text-align: center; background: var(--entry-background-color); color: var(--text-color); padding: 0.75em 0; z-index: 9; position: relative; } @media (min-width: 1024px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -41px; height: 41px; width: 32px; right: 9px; } #lj_controlstrip:after { font-family: "Material Symbols Outlined"; content: "unfold_more"; font-size: 22px; position: absolute; bottom: -41px; right: 9px; cursor: pointer; line-height: 22px; text-align: center; color: var(--link-color); background: var(--entry-background-color); padding: 5px; border-radius: 5px; } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: var(--line-height); padding: 0.25em 0.5em !important; flex-grow: 0; } #lj_controlstrip a { font-family: var(--main-font); color: var(--link-color); } #lj_controlstrip a:hover { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #lj_controlstrip input, #lj_controlstrip select { border: 0; background: var(--entry-background-color-alt) !important; color: var(--text-color-alt) !important; font-size: var(--text-size) !important; font-family: var(--main-font); border-radius: 5px; } #lj_controlstrip input[type="submit"] { background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ) !important; color: var(--icon-color) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 5px 10px; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; } #lj_controlstrip_userpic a img { border-radius: 50%; padding: 3px; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); }
   Paste the following into the "Custom stylesheet URL" field.
   https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,400,0,0&family=DM+Sans&display=swap
6. Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

You can choose the icons for the sidebar links list from https://fonts.google.com/icons

RESOURCES

• icon font by Google
• image from freepik

Comments

[musyc]

This is dreamy and soft! You do such lovely layouts.

[lot]

This is beautiful :) I mean, all your layouts are, but this one is extra cute with the purple and all.

[intothisshadow]

Another beatiful theme :D I'm using right now!

[adore]

Hi! I love this theme. I'm facing an issue with the header. It's showing up as much bigger below the header image, and I'm facing the same issue when I do a live preview of this theme. It might be something to do with DW's newest code push. Here is a screenshot of how it looks on my journal: https://imgbox.com/4bSwKEyl
And a screenshot of how it looks when I live preview this theme: https://imgbox.com/bmZZhUSS

EDIT: Someone from dev told me that after the code push styles for #header .inner need to be tweaked to be #header > .inner and I did that and it worked!

[rosecarmine]

That's great! I will update the codes.