myrtillenne | Browser

LIVE PREVIEW

FEATURES

navigation links, links list, custom text
comment pages
icon pages

INSTRUCTIONS

Go to the "Select style" page, search for "Basic boxes" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" 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 "Modules" tab. Set "Navigation" to number 2, "Custom text" to number 3, "Links list" to number 4. Uncheck the other modules.
Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - browser (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - background image - https://unsplash.com/photos/qfT4RFbk4Eg -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #6a3e44; --line-height: 1.5; --body-background-color: #cfdee2; --body-background-image: url(https://rosecarmine.dreamwidth.org/file/92274.jpg); --link-color: #ff435f; --link-hover-color: #4da3bb; --main-font: Barlow, sans-serif; --title-font: Barlow, sans-serif; --content-width: 1000px; --entry-background-color: #fbf9f9; --entry-border-color: #e9ccbe; --entry-shadow-color: rgba(0, 0, 0, 0.2); --entry-title-color: #fbf9f9; --entry-title-background-color: rgba(255, 102, 106, 0.8); --entry-title-shadow-color: rgba(0, 0, 0, 0.4); --entry-icon-color: #f1a0a5; --entry-icon-hover-color: #a9d3e0; --customtext-height: 11em; } /*--------------- fonts ---------------*/ @font-face { font-family: "Material Icons"; font-style: normal; font-weight: 400; src: url("https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format("woff2"); } /*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { font-family: var(--main-font); font-size: var(--text-size); padding: 0; margin: 0; line-height: var(--line-height); background-color: var(--body-background-color); background-image: var(--body-background-image); background-size: cover; background-position: center center; background-attachment: fixed; color: var(--text-color); } html body { margin-left: 0; margin-right: 0; } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited, a:active { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { position: relative; padding: 1.5em 1em 1em; margin: 2em 0 1em; font-style: italic; border: 1px solid var(--entry-border-color); border-radius: 4px; } blockquote:before { content: "format_quote"; top: -17px; left: 50%; margin-left: -17px; position: absolute; width: 32px; height: 32px; display: block; font-family: Material Icons; font-size: 24px; line-height: 32px; text-align: center; color: var(--entry-icon-color); font-style: normal; border: 1px solid var(--entry-border-color); background: var(--entry-background-color); border-radius: 50%; } /*--------------- content ---------------*/ #canvas { margin: 20px auto; max-width: var(--content-width); } @media (min-width: 600px) { #canvas { padding: 0 20px; margin: 50px auto; } } @media (min-width: 1024px) { #canvas { border-left: 134px solid transparent; border-right: 134px solid transparent; margin: 100px auto; } } /*--------------- header ---------------*/ #header { float: left; width: 100%; } #header > .inner:first-child { padding: 10px 4px 0; } #journaltitles-container { padding: 2em 2em 0; background: var(--entry-background-color); border-radius: 4px 4px 0 0; text-align: center; } h1#title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; line-height: 1; margin: 0; } h2#subtitle { font-size: 1em; line-height: 1.5; padding: 0; margin: 0; font-weight: normal; text-transform: lowercase; } h2#pagetitle { display: none; } .module-section-header { padding-left: 16px; } .module-navlinks ul { display: flex; align-items: flex-end; } .module-navlinks li { text-transform: lowercase; line-height: 22px; width: 22px; height: 22px; line-height: 22px; padding: 5px; overflow: hidden; border-radius: 50%; margin: 0 6px 6px 0; position: relative; background: var(--entry-background-color); box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .module-navlinks li a:before { float: left; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 22px; width: 22px; line-height: 22px; margin-right: 0.25em; color: var(--entry-icon-color); transition: color 0.4s ease; } .module-navlinks li a:hover:before { color: var(--entry-icon-hover-color); } .page-recent .list-item-recent, .page-entry .list-item-recent, .page-archive .list-item-archive, .page-read .list-item-read, .page-network .list-item-network, .page-tags .list-item-tags, .page-reply .list-item-recent, .page-icons .list-item-recent, .page-month .list-item-archive, .page-year .list-item-archive, .page-day .list-item-archive { border-radius: 8px 8px 0 0; margin-right: 10px; padding: 9px 10px; line-height: 22px; position: relative; margin: 0 6px 0 0; box-shadow: none; overflow: visible; font-size: 0; } @media (min-width: 600px) { .page-recent .list-item-recent, .page-entry .list-item-recent, .page-archive .list-item-archive, .page-read .list-item-read, .page-network .list-item-network, .page-tags .list-item-tags, .page-reply .list-item-recent, .page-icons .list-item-recent, .page-month .list-item-archive, .page-year .list-item-archive, .page-day .list-item-archive { width: auto; font-size: 1em; box-shadow: none; } } .page-recent .list-item-recent:before, .page-archive .list-item-archive:before, .page-read .list-item-read:before, .page-network .list-item-network:before, .page-tags .list-item-tags:before, .page-entry .list-item-recent:before, .page-reply .list-item-recent:before, .page-icons .list-item-recent:before, .page-month .list-item-archive:before, .page-year .list-item-archive:before, .page-day .list-item-archive:before { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 8px 0; box-shadow: 5px 5px 0 5px var(--entry-background-color); } .page-recent .list-item-recent:after, .page-archive .list-item-archive:after, .page-read .list-item-read:after, .page-network .list-item-network:after, .page-tags .list-item-tags:after, .page-entry .list-item-recent:after, .page-reply .list-item-recent:after, .page-icons .list-item-recent:after, .page-month .list-item-archive:after, .page-year .list-item-archive:after, .page-day .list-item-archive:after { content: ""; position: absolute; bottom: 0; right: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 0 8px; box-shadow: -5px 5px 0 5px var(--entry-background-color); } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "date_range"; } .list-item-read a:before { content: "local_library"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "map"; } .list-item-memories a:before { content: "star"; } .list-item-userinfo a:before { content: "person"; } .module-navlinks li a { color: var(--sidebar-link-color); } /*--------------- entries ---------------*/ .entry, .comment { margin: 20px 0; background: var(--entry-title-background-color); padding: 4px; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); position: relative; clear: both; } @media (min-width: 600px) { .entry, .comment { margin: 50px 0; } } @media (min-width: 1024px) { .entry { margin: 100px 0; } } .header { overflow: hidden; } .entry .header .inner, .comment .header .inner { display: flex; align-items: flex-end; flex-wrap: wrap; justify-content: flex-end; } @media (min-width: 800px) { .entry .header .inner { flex-wrap: nowrap; } } .entry .entry-title { font-family: var(--title-font); font-size: 1.5em; font-weight: normal; padding: 0.5em; line-height: 1; flex-grow: 2; text-shadow: 0 1px 1px var(--entry-title-shadow-color); } .entry .entry-title, .entry .entry-title a { color: var(--entry-title-color); } .entry .entry-title a:hover { text-shadow: 0 1px 1px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } .no-subject .entry .entry-title { background: none; border: none; } .admin-post-icon, .sticky-entry-icon { display: none; } .header .datetime { background: var(--entry-background-color); white-space: nowrap; border-radius: 8px 8px 0 0; margin-top: 6px; margin-right: 16px; padding: 9px 10px; line-height: 22px; position: relative; } .header .datetime:before { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 8px 0; box-shadow: 5px 5px 0 5px var(--entry-background-color); } .header .datetime:after { content: ""; position: absolute; bottom: 0; right: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 0 8px; box-shadow: -5px 5px 0 5px var(--entry-background-color); } .header .date:before, .header .comment .datetime span:before { content: "today"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; line-height: 22px; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--text-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; display: inline-block; font-family: Material Icons; font-size: 22px; line-height: 22px; width: 22px; height: 22px; color: var(--entry-icon-color); padding: 5px; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .security-private .access-filter:before { content: "visibility_off"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; width: 22px; height: 22px; color: var(--entry-icon-color); padding: 5px; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .restrictions-NSFW .restrictions:before { content: "warning"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; width: 22px; height: 22px; color: var(--entry-icon-color); padding: 5px; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .restrictions-18 .restrictions:before { content: "18+"; display: block; font-family: arial, sans-serif; font-size: 14px; line-height: 22px; width: 32px; height: 22px; color: var(--entry-icon-color); padding: 5px 0; text-align:center; font-weight:bold; background: var(--entry-background-color); border-radius: 50%; margin: 0 6px 6px 0; box-shadow: 0 1px 2px var(--entry-title-shadow-color); } .has-userpic .userpic { float: right; margin: 1em; } .has-userpic .userpic img { max-width: 50px; max-height: 50px; width: auto; height: auto; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); padding: 5px; border-radius: 50%; } @media (min-width: 1024px) { .has-userpic .userpic { position: absolute; width: 114px; top: 0; left: -134px; text-align: right; margin: 0; } .has-userpic .userpic img { max-width: 100px; max-height: 100px; padding: 2px; border: 5px solid var(--entry-title-background-color); box-shadow: 0 0 0 2px var(--entry-shadow-color); background-clip: padding-box; } } .entry .poster:not(.empty), .full .poster { display: block; border-bottom: 1px solid var(--entry-border-color); line-height: 1; padding: 0.5em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster a { color: var(--text-color); } .poster .ljuser:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry .contents, .comment .contents { border-radius: 4px 4px 0 0; background: var(--entry-background-color); } .entry-content, .comment-content { padding: 2em; } @media (min-width: 800px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content li, .comment-content li { list-style-position: inside; } .entry-content 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 Icons; 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 { padding: 0 2em 2em; } .metadata ul { list-style: none; margin: 0; padding: 0; } .metadata li { display: inline; margin-right: 0.5em; } .metadata-label { display: none; } #metadata-music:before { content: "speaker"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } #metadata-location:before { content: "location_on"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; line-height: 0; color: var(--entry-icon-color); } .metadata img { vertical-align: middle; } .entry div.tag { border-top: 1px solid var(--entry-border-color); padding: 1.5em 2em; line-height: 1; position: relative; text-align: center; } .entry div.tag:before { content: "loyalty"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; padding: 5px; background: var(--entry-background-color); border-radius: 50%; border: 1px solid var(--entry-border-color); color: var(--entry-icon-color); position: absolute; top: -17px; left: 50%; margin-left: -17px; } .entry .tag-text { display: none; } .tag-nav-trigger { vertical-align: middle; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; color: transparent; } .tag ul li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em; } .tag ul li:last-child:after { display: none; } .tag li a { color: var(--text-color); } .tag li a:hover { color: var(--link-color); } ul.entry-management-links.icon-links { margin: 0; padding: 0 0 1em; list-style: none; display: flex; justify-content: center; position: relative; z-index: 1; } ul.entry-management-links.icon-links:before { content: ""; width: 100%; border-top: 1px solid var(--entry-border-color); top: 16px; position: absolute; z-index: -1; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a { display: block; width: 32px; height: 32px; color: var(--entry-icon-color); background: var(--entry-background-color); border-radius: 50%; border: 1px solid var(--entry-border-color); margin: 0 5px; } ul.entry-management-links.icon-links li a:before { display: block; font-family: Material Icons; padding: 5px; font-size: 22px; line-height: 22px; } .icon-links .link_prev a:before { content: "skip_previous"; } .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: "skip_next"; } ul.entry-management-links.icon-links li a:hover { color: var(--entry-icon-hover-color); } ul.entry-management-links.text-links, ul.entry-interaction-links { margin: 0; padding: 0 2em 1.5em; list-style: none; text-align: center; line-height: 1; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { display: inline; } ul.entry-management-links.text-links li:after, ul.entry-interaction-links li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.5em 0 0.75em; } ul.entry-management-links.text-links li:last-child:after, ul.entry-interaction-links li:last-child:after { display: none; } ul.entry-management-links.text-links li a, ul.entry-interaction-links li a { color: var(--text-color); } ul.entry-management-links.text-links li a:hover, ul.entry-interaction-links li a:hover { color: var(--link-color); } .footer { background: var(--entry-background-color); border-radius: 0 0 4px 4px; text-transform: lowercase; padding-bottom: 4px; } /*--------------- comments ---------------*/ .comment-posted { font-weight: bold; } .comment-pages { text-align: center; background: var(--entry-background-color); padding: 0.5em 1em; border-radius: 4px; position: relative; margin: 16px 4px; } .comment-pages:before { content: ""; position: absolute; width: 100%; height: 100%; padding: 4px; background: var(--entry-title-background-color); top: -4px; left: -4px; z-index: -1; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } .comment-wrapper { min-width: 15em; } .full .thread-depth { line-height: 22px; padding: 5px; background: var(--entry-background-color); border-radius: 8px; margin: 0 4px 4px 0; } .comment .comment-title { margin: 0; } .full .comment .comment-title { font-family: var(--title-font); font-weight: normal; font-size: 1em; line-height: 1; order: -1; flex: 2; text-shadow: 0 0 10px var(--entry-title-color); padding: 1em; } .full .comment .comment-title, .full .comment .comment-title a { color: var(--entry-title-color); } .full .comment .comment-title a:hover { color: var(--entry-title-hover-color); } .no-subject .comment .comment-title { background: none; border: none; margin: 0; padding: 0; } .comment .poster .ljuser:before { content: "account_circle"; } .poster-ip { padding: 0 2em; } .comment-from-text, .comment-date-text, .comment-ip-text { display: none; } .comment-pages.bottompages { display: none; } .multiform-checkbox { display: inline; margin: 0 2em; } ul.comment-management-links.icon-links { margin: 0; padding: 0 0 1em; list-style: none; display: flex; justify-content: center; position: relative; z-index: 1; } ul.comment-management-links.icon-links:before { content: ""; width: 100%; border-top: 1px solid var(--entry-border-color); top: 16px; position: absolute; z-index: -1; } ul.comment-management-links.text-links { margin: 0; padding: 0 2em 1em; text-align: center; line-height: 1; } ul.comment-management-links.text-links li { padding: 0.5em; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--entry-border-color); margin: 0 5px; overflow: hidden; } ul.comment-management-links.icon-links li a { display: block; width: 32px; height: 32px; color: var(--entry-icon-color); background: var(--entry-background-color); } ul.comment-management-links.icon-links li a:hover { color: var(--entry-icon-hover-color); } ul.comment-management-links.icon-links li a:before { display: block; font-family: Material Icons; padding: 5px; font-size: 22px; line-height: 22px; } .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 2em 1.5em; list-style: none; text-align: center; line-height: 1; } ul.comment-management-links.text-links li, ul.comment-interaction-links li { display: inline; } ul.comment-management-links.text-links li:before, ul.comment-interaction-links li:before { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; border-radius: 5px; background: var(--entry-border-color); margin: 0 0.75em 0 0.5em; } ul.comment-management-links.text-links li:first-child:before, ul.comment-interaction-links li:first-child:before { display: none; } ul.comment-management-links.text-links li a, ul.comment-interaction-links li a { color: var(--text-color); } ul.comment-management-links.text-links li a:hover, ul.comment-interaction-links li a:hover { color: var(--link-color); } .partial .comment { margin-top: 20px; padding: 4px; background: var(--entry-title-background-color); } .partial .comment .inner { padding: 1em; background: var(--entry-background-color); border-radius: 4px; } #comments ul.entry-interaction-links, #comments ul.entry-management-links { display: none; } .bottomcomment { background: var(--entry-title-background-color); color: var(--entry-title-color); padding: 0 1em; text-align: center; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding: 0 2em 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); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: var(--text-size); padding: 0.5em; color: var(--link-color); text-transform: uppercase; line-height: 1; } .page-reply #qrformdiv { background: var(--entry-title-background-color); padding: 4px; } #postform { padding: 2em; background: var(--entry-background-color); border-radius: 4px; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 20px 0; background: var(--entry-title-background-color); padding: 4px; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } @media (min-width: 600px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 50px 0; } } @media (min-width: 1024px) { .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 100px 0; } } .month .header, .tags-container .header, .icons-container .header { text-align: right; } .month .header .inner, .tags-container .header .inner, .icons-container .header .inner { background: var(--entry-background-color); display: inline-block; border-radius: 8px 8px 0 0; margin-top: 6px; margin-right: 16px; padding: 9px 10px; line-height: 22px; position: relative; } .month .header .inner:before, .tags-container .header .inner:before, .icons-container .header .inner:before { content: ""; position: absolute; bottom: 0; left: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 8px 0; box-shadow: 5px 5px 0 5px var(--entry-background-color); } .month .header .inner:after, .tags-container .header .inner:after, .icons-container .header .inner:after { content: ""; position: absolute; bottom: 0; right: -10px; width: 10px; height: 20px; background: transparent; border-radius: 0 0 0 8px; box-shadow: -5px 5px 0 5px var(--entry-background-color); } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; font-weight: normal; line-height: 1; text-transform: lowercase; margin: 0; padding: 0; } .month-wrapper h3:before, .tags-container h2:before, .icons-container h2:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; line-height: 22px; } .month-wrapper h3:before { content: "date_range"; } .tags-container h2:before { content: "style"; } .icons-container h2:before { content: "image"; } .month .contents, #archive-month > .inner:first-child, .tags-container .contents, .icons-container .contents { border-radius: 4px 4px 0 0; background: var(--entry-background-color); } .month .footer, #primary .manage-link { padding: 1em; text-transform: lowercase; text-align: center; border-top: 1px solid var(--entry-border-color); } /*------------ archive ------------*/ .month caption { display: none; } .month table { width: 100%; text-align: center; } table.month { margin: 0 auto; border-collapse: collapse; text-align: center; } table.month td, table.month th { max-width: 1em; height: 1em; padding: 1em 0.25em; } table.month td { max-width: 1em; height: 1em; padding: 1em 0.25em; border-top: 1px solid var(--entry-border-color); } table.month td p { margin: 0; display: inline; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } #archive-month > .inner:first-child { border-radius: 4px; background: var(--entry-background-color); } .month dl { margin: 0; } .month dt { line-height: 1; padding: 1em; border-bottom: 1px solid var(--entry-border-color); } .month dl dt a { color: var(--text-color); } .month dl dt a:before { content: "today"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; line-height: 22px; } .month dl .time { padding-right: 0.5em; } .month dl h3 { display: inline; font-size: 1em; } .page-month .month .entry-poster { margin-right: 0.5em; } .month dd { margin: 0; padding: 2em; border-bottom: 1px solid var(--entry-border-color); } .month dd br { display: block; } #archive-year .navigation ul, #archive-month .navigation ul { margin-bottom: 20px; } @media (min-width: 1024px) { #archive-year .navigation { margin: 100px 0; } } #archive-year .navigation li { display: inline-block; width: 45px; height: 45px; line-height: 45px; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; box-shadow: 0 0 0 1px var(--entry-shadow-color); margin: 0 5px; } #archive-year .navigation li a { color: var(--entry-title-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color); } #archive-year .navigation li a:hover { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #archive-year .navigation li.active { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #archive-month .navigation ul { margin: 0; padding: 1em; } #archive-month .navigation li { display: inline; } .day-date { display: none; } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; } ul.ljtaglist:first-child, .tags_cloud ul { list-style-position: inside; padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; padding: 1.5em; border-top: 1px solid var(--entry-border-color); } .icon { border-top: 1px solid var(--entry-border-color); display: flex; } .icon-image { border-right: 1px solid var(--entry-border-color); padding: 0.5em; } .icon-image img { display: block; } .icon-info { text-transform: lowercase; padding: 1.5em; } .icon-info div span { font-style: normal; } .default.label { font-size: 0; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; font-style: normal; vertical-align: top; line-height: 22px; color: var(--entry-icon-color); } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin-left: 0; padding-left: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ modules ------------*/ .module-section-one { background: var(--entry-title-background-color); padding: 4px; box-shadow: 0 2px 0 var(--entry-shadow-color), 0 -2px 0 var(--entry-shadow-color), -2px 0 0 var(--entry-shadow-color), 2px 0 0 var(--entry-shadow-color); } .module-section-one .inner { background: var(--entry-background-color); border-radius: 0 0 4px 4px; clear: left; padding-top: 2em; } .module-section-one .module { padding: 0 2em 2em; } .module-content ul { list-style: none; margin: 0; padding: 0; } .module-typelist { line-height: 1; text-transform: lowercase; border-top: 1px solid var(--entry-border-color); padding-top: 2em !important; position: relative; text-align: center; } .module-typelist:before { content: "near_me"; display: block; font-family: Material Icons; font-size: 22px; padding: 5px; background: var(--entry-background-color); border-radius: 50%; border: 1px solid var(--entry-border-color); color: var(--entry-icon-color); position: absolute; top: -17px; left: 50%; margin-left: -17px; } .module-typelist li { display: inline; } .module-typelist li:after { content: ""; display: inline-block; vertical-align: middle; width: 5px; height: 5px; background: var(--entry-border-color); border-radius: 5px; margin: 0 0.5em 0 0.75em; } .module-typelist li:last-child:after { display: none; } .module-typelist li a { color: var(--text-color); } .module-typelist li a:hover { color: var(--link-color); } .module-customtext .module-content { max-height: var(--customtext-height); overflow: auto; } @media (min-width: 800px) { .module-customtext .module-content { text-align: justify; } } .module-customtext .module-content::-webkit-scrollbar { width: 10px; height: 10px; } .module-customtext .module-content::-webkit-scrollbar-track { background: var(--entry-background-color); } .module-customtext .module-content::-webkit-scrollbar-thumb { background: var(--entry-border-color); border-left: 5px solid var(--entry-background-color); } .module-customtext .module-content::-webkit-scrollbar-corner { background: var(--entry-border-color); } .module h2, .module-userprofile, .module-calendar, .module-tags_list, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered, .module .manage-link { display: none; } /*--------------- navigation ---------------*/ .topnav { display: none; } .navigation { text-transform: lowercase; text-align: center; } .navigation ul { margin: 0; padding: 0; } #entries .navigation li { display: inline-block; margin: 0 10px; } #entries .navigation li a { display: block; width: 40px; height: 40px; overflow: hidden; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; box-shadow: 0 0 0 1px var(--entry-shadow-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color); } #entries .navigation li a:hover { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; text-align: center; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } li.page-separator { display: none !important; } .noentries { display: none; } /*--------------- footer ---------------*/ #footer { width: 40px; height: 40px; margin: 20px auto; } @media (min-width: 1024px) { #footer { position: fixed; bottom: 0; right: 20px; } } .page-top a { display: block; width: 40px; height: 40px; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; box-shadow: 0 0 0 1px var(--entry-shadow-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color); overflow: hidden; } .page-top a:hover { text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } .page-top a:before { content: "arrow_upward"; display: block; font-family: Material Icons; font-size: 22px; vertical-align: middle; height: 40px; width: 40px; line-height: 40px; text-align: center; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-title-background-color); border: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); padding: 4px; width: 200px; border-radius: 0; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; margin: 0; padding-bottom: 1em; background: var(--entry-background-color); } div.ContextualPopup .Userpic { border: 0; float: none; background: var(--entry-background-color); margin: 0; padding: 1em 0; border-radius: 4px 4px 0 0; } div.ContextualPopup .Userpic img { border: 1px solid var(--entry-border-color); padding: 5px; border-radius: 50%; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 1em; background: var(--entry-background-color); border-radius: 0 0 4px 4px; border-top: 1px solid var(--entry-border-color); } .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); border-bottom: 4px solid var(--entry-title-background-color); justify-content: center; padding: 0.75em 0; z-index: 9; box-shadow: 0 2px 0 var(--entry-shadow-color); } @media (min-width: 1024px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:before { content: ""; position: absolute; bottom: -60px; height: 60px; width: 60px; right: 20px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "more_horiz"; font-size: 24px; position: absolute; bottom: -60px; height: 40px; width: 40px; right: 20px; cursor: pointer; line-height: 40px; text-align: center; background: var(--entry-title-background-color); color: var(--entry-title-color); border-radius: 50%; background-clip: padding-box; box-shadow: 0 0 0 1px var(--entry-shadow-color); text-shadow: 0 1px 2px var(--entry-title-shadow-color), 0 0 5px var(--entry-title-color); } #lj_controlstrip:hover { transform: translateY(0); } } #lj_controlstrip > div { font-family: var(--main-font); font-size: var(--text-size); line-height: 1.5; padding: 0.25em 0.5em; 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_actionlinks { text-align: center; } #lj_controlstrip_statustext { color: var(--text-color); font-weight: normal; font-size: var(--text-size); } #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) !important; font-family: var(--main-font) !important; } #lj_controlstrip input[type="submit"] { border: 0; background: transparent; text-transform: uppercase; font-size: var(--text-size); color: var(--text-color); font-family: var(--main-font); padding: 0.25em; } #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: 1px solid var(--entry-border-color); padding: 5px; border-radius: 50%; } Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Barlow&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".