Wired

[rosecarmine]

LIVE PREVIEW

FEATURES

• sidebar image (400x400px)
• navigation links, links list, custom text
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the "Select style" page, search for "Basic Boxes" and apply any theme.
2. 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.
   In the same section, select "Responsive" for "Indentation for nested comment threads" (optional).
3. Click on the "Modules" tab. Set "Custom text" to number 1, "Navigation" to number 2 and "Links list" to number 4. Uncheck the other modules.
4. Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". /*------------------------------------- - layout - wired (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --text-color: #525372; --line-height: 1.5; --background-color: #f9f9ff; --border-color: #d9d9ff; --link-color: #7369e9; --link-hover-color: #58597a; --icon-color: #aaaaff; --icon-hover-color: #f9f9ff; --icon-background-hover-color: #d9d9ff; --entry-width: 1000px; --main-font: Archivo Narrow, sans-serif; --title-font: Archivo Narrow, sans-serif; --sidebar-width: 35vw; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/88274.jpg"); --sidebar-image-width: 400px; --sidebar-image-height: 400px; } /*--------------- 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 ---------------*/ @media (min-width: 800px) { html, body { height: 100%; } } H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { background: var(--background-color); border: 0; color: var(--text-color); line-height: var(--line-height); font-family: var(--main-font); font-size: var(--text-size); margin: 0; } html body { margin: 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(--border-color); border-radius: 4px; } blockquote:before { content: "format_quote"; top: -21px; left: 50%; margin-left: -21px; position: absolute; width: 40px; height: 40px; display: block; font-family: Material Icons; font-size: 30px; line-height: 40px; text-align: center; color: var(--icon-color); font-style: normal; border: 1px solid var(--border-color); background: var(--background-color); border-radius: 4px; } textarea { border: 1px solid var(--border-color); border-radius: 4px; } /*------------ content layout ------------*/ #canvas { max-width: var(--entry-width); background: var(--background-color); } @media (min-width: 800px) { #canvas { margin-left: 50px; border-left: 1px solid var(--border-color); min-height: 100%; } } @media (min-width: 1024px) { #canvas { padding-left: var(--sidebar-width); border-right: 1px solid var(--border-color); } } @media (min-width: 800px) { #content { padding-bottom: 10px; } #content > .inner:first-child { border-bottom: 1px solid var(--border-color); } } #primary > .inner:first-child, #secondary > .inner:first-child { padding: 0; } /*--------------- header ---------------*/ #journaltitles-container { padding: 2em; } h1#title { font-family: var(--title-font), serif; font-size: 2em; text-transform: uppercase; margin: 0; padding: 0; line-height: 1; } h1#title a, h1#title a:hover { color: inherit; } h2#subtitle { font-size: 1em; margin: 0; font-weight: normal; padding: 0; } h2#pagetitle { display: none; } @media (min-width: 1024px) { #header .module-wrapper { position: fixed; left: 0; top: 0; height: 100%; width: 51px; } } .module-navlinks { border-bottom: 1px solid var(--border-color); } .module-navlinks ul { display: flex; flex-wrap: wrap; } .module-navlinks li { list-style: none; border-right: 1px solid var(--border-color); } .module-navlinks li a { width: 50px; height: 50px; display: block; padding: 0; overflow: hidden; color: var(--icon-color); } .module-navlinks li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } .module-navlinks li a:before { width: 50px; height: 50px; display: block; font-family: Material Icons; font-size: 22px; line-height: 50px; text-align: center; vertical-align: middle; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "today"; } .list-item-read a:before { content: "library_books"; } .list-item-network a:before { content: "public"; } .list-item-tags a:before { content: "style"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } @media (min-width: 1024px) { .module-navlinks { padding-top: 50px; } .module-navlinks li { border-top: 1px solid var(--border-color); } } /*------------ entries ------------*/ .entry { border-top: 1px solid var(--border-color); } @media (min-width: 800px) { .entry, .full .comment { padding-right: 150px; } .entry > .inner:first-child, .full .comment > .inner:first-child { border-right: 1px solid var(--border-color); } } .entry .header { border-bottom: 1px solid var(--border-color); } .sticky-entry-icon, .admin-post-icon { display: none; } .has-subject .entry .entry-title { font-size: 1.5em; font-family: var(--title-font); padding: calc(var(--text-size) * 2); box-sizing: border-box; text-transform: uppercase; line-height: 1; margin: 0; border-bottom: 1px solid var(--border-color); font-weight: normal; } .no-subject .entry-title { padding: 0; margin: 0; border-bottom: 1px solid transparent; } @media (min-width: 800px) { .entry .header { border-bottom: 0; } .has-subject .entry .entry-title { float: left; width: 100%; border-bottom: 0; } } .entry .datetime a { color: var(--text-color); } .entry .datetime a:hover { color: var(--link-color); } .entry .restrictions, .entry .access-filter, .entry .date, .entry .time { border-right: 1px solid var(--border-color); padding: 0.5em; line-height: 1; display: inline-block; } .restrictions, .access-filter { text-transform: uppercase; } .entry .restrictions img, .entry .access-filter img { display: none; } .security-protected .access-filter:before { content: "LOCKED"; } .security-private .access-filter:before { content: "PRIVATE"; } .restrictions-NSFW .restrictions:before { content: "NSFW"; } .restrictions-18 .restrictions:before { content: "18+"; } @media (min-width: 800px) { .entry .restrictions, .entry .access-filter, .entry .date, .entry .time { float: right; width: 150px; margin-right: -151px; clear: right; border-right: 0; border-bottom: 1px solid var(--border-color); text-align: center; padding: 0.5em 0; } } .has-userpic .userpic { float: right; clear: right; padding: 5px; border-left: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); background: var(--background-color); } .userpic img { display: block; border-radius: 5px; margin: 0 auto; max-width: 50px; max-height: 50px; width: auto; height: auto; } @media (min-width: 600px) { .userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; } } .entry .poster { font-size: 0; display: block; border-bottom: 1px solid var(--border-color); text-align: right; } .entry .poster .ljuser { font-size: var(--text-size); padding: 0.5em; line-height: 1; border-left: 1px solid var(--border-color); display: inline-block; } @media (min-width: 800px) { .has-userpic .userpic { width: 100px; padding: 25px; margin-right: -151px; border-left: 0; text-align: center; } .entry .poster { float: right; clear: right; margin-right: -151px; width: 150px; text-align: center; border-bottom: 0; } .entry .poster .ljuser { display: block; padding: 0.5em 0.25em; border-left: 0; border-bottom: 1px solid var(--border-color); } } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster .ljuser { white-space: normal !important; } .poster { word-wrap: break-word; } .poster.empty { border: 1px solid transparent; } .entry-content { margin: 2em; clear: left; } @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 img { display: none; } .cut-wrapper{ display: inline-flex; align-items: center; border: 1px solid var(--border-color); border-radius: 4px; padding: 5px; } .cuttag-action:before { content: "content_cut"; display: block; font-family: Material Icons; font-size: 22px; line-height: 22px; margin-right: 5px; color: var(--icon-color); } .cuttag-action-after:before { display: inline-block; border: 1px solid var(--border-color); border-radius: 4px; padding: 5px; } .cut-open, .cut-close { display:none; } .cut-text { font-size: var(--text-size); text-transform: lowercase; font-weight: normal; } .metadata ul { list-style: none; margin: 0; padding: 0; line-height: 1.2; } .metadata li { display: flex; border-top: 1px solid var(--border-color); } #metadata-music .metadata-label:before { content: "library_music"; } #metadata-mood .metadata-label:before { content: "sentiment_satisfied_alt"; } #metadata-location .metadata-label:before { content: "location_on"; } #metadata-xpost .metadata-label:before { content: "add_location"; } .metadata-label { min-width: 40px; border-right: 1px solid var(--border-color); overflow: hidden; font-size: 0; text-align: center; } .metadata-label:before { font-family: Material Icons; font-size: 22px; line-height: 40px; display: block; width: 40px; height: 40px; color: var(--icon-color); } .metadata li img { margin-left: 0.5em; align-self: center; } .metadata-item { align-self: center; padding: 0.25em 0.5em; } .entry .tag { border-top: 1px solid var(--border-color); display: flex; line-height: 1.2; } .entry .tag-text { min-width: 40px; border-right: 1px solid var(--border-color); overflow: hidden; font-size: 0; } .entry .tag-text:before { content: "local_offer"; font-family: Material Icons; font-size: 22px; line-height: 40px; display: block; width: 40px; height: 40px; color: var(--icon-color); text-align: center; } .entry .tag ul { display: flex; flex-wrap: wrap; margin: 0; padding: 0.25em 0.5em; align-items: center; } .tag ul li { display: inline; margin-right: 0.25em; } .entry .tag a, .metadata a { color: var(--text-color); } .entry .tag a:hover, .metadata a:hover { color: var(--link-color); } .tag-nav-trigger, .tag-nav-actions input { align-self: center; } ul.entry-management-links, ul.entry-interaction-links { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; border-top: 1px solid var(--border-color); } ul.entry-management-links li { border-right: 1px solid var(--border-color); } ul.entry-management-links.text-links li { line-height: 1; padding: 0.5em; } ul.entry-management-links li a img { display: none; } ul.entry-management-links.icon-links li a { display: block; width: 40px; height: 40px; color: var(--icon-color); } ul.entry-management-links.icon-links li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } ul.entry-management-links li a:before { display: block; font-family: Material Icons; width: 40px; height: 40px; font-size: 22px; line-height: 40px; text-align: center; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "more"; } .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"; } ul.entry-interaction-links { margin: 0; padding: 0; list-style: none; justify-content: flex-end; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: -1px; line-height: 1; } .entry-interaction-links li { border-left: 1px solid var(--border-color); padding: 0.5em; } .entry-interaction-links a, .entry-management-links a { color: var(--title-color); } .entry-interaction-links a:hover, .entry-management-links a:hover { color: var(--link-color); } .entry > .inner:first-child:after { content: ""; display: block; clear: both; } /*------------ comments ------------*/ .comment-pages { padding: 1.5em 2em; border-top: 1px solid var(--border-color); } .comment-thread { border-top: 1px solid var(--border-color); } .page-reply .comment { border-top: 1px solid var(--border-color); } .comment-thread:not(.comment-depth-1) .full { border-left: 1px solid var(--border-color); margin-left: -1px; } .comment { min-width: 15em; } .dwexpcomment { margin-top: 0 !important; } .full .thread-depth { border-right: 1px solid var(--border-color); padding: 0.5em; } .comment .comment-title { margin: 0; } .no-subject .comment .comment-title { background: none; padding: 0; margin: 0; border: 0; } .full .comment-title { font-family: var(--title-font); font-size: 1em; font-weight: normal; line-height: 1; padding: 1em; order: -1; flex: 0 0 100%; margin: 0; border-bottom: 1px solid var(--border-color); box-sizing: border-box; } .comment-date-text, .comment-from-text, .comment-ip-text { display: none; } .comment .header { float: left; width: 100%; box-sizing: border-box; line-height: 1; border-bottom: 1px solid var(--border-color); } .comment .header .inner { display: flex; flex-wrap: wrap; align-items: center; } .comment .header .datetime { border-right: 1px solid var(--border-color); padding: 0.5em; } .full .poster { display: block; border-bottom: 1px solid var(--border-color); text-align: right; } .full .poster .ljuser, .poster .anonymous { padding: 0.5em; line-height: 1; border-left: 1px solid var(--border-color); display: inline-block; } .comment .poster-ip { display: block; border-bottom: 1px solid var(--border-color); line-height: 1; padding: 0.5em; } @media (min-width: 800px) { .full .poster { float: right; clear: right; margin-right: -151px; width: 150px; text-align: center; border-bottom: 0; } .full .poster .ljuser, .poster .anonymous { display: block; padding: 0.5em 0.25em; border-left: 0; border-bottom: 1px solid var(--border-color); } .comment .poster-ip { float: right; clear: right; margin-right: -151px; width: 150px; display: block; text-align: center; padding: 0.5em 0.25em; box-sizing: border-box; } } .comment-content { padding: 2em; clear: left; } .partial { padding: 2em; clear: both; } .partial .comment-title { display: inline-block; margin-right: 0.25em; } .partial .thread-depth { margin-right: 0.5em; } .comment .multiform-checkbox { display: block; border-top: 1px solid var(--border-color); line-height: 1; padding: 0.5em; } ul.comment-management-links { display: flex; margin: 0; padding: 0; border-top: 1px solid var(--border-color); list-style: none; flex-wrap: wrap; } ul.comment-management-links li { border-right: 1px solid var(--border-color); } ul.comment-management-links.text-links li { line-height: 1; padding: 0.5em; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a { display: block; width: 40px; height: 40px; color: var(--icon-color); } ul.comment-management-links.icon-links li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } ul.comment-management-links.icon-links li a:before { width: 40px; height: 40px; display: block; font-family: Material Icons; font-size: 22px; line-height: 40px; text-align: center; } .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 { display: flex; margin: 0; padding: 0; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); margin-bottom: -1px; list-style: none; line-height: 1; justify-content: flex-end; flex-wrap: wrap; } ul.comment-interaction-links li { padding: 0.5em; border-left: 1px solid var(--border-color); } .comment-interaction-links a, .comment-management-links a { color: var(--title-color); } .comment-interaction-links a:hover, .comment-management-links a:hover { color: var(--link-color); } .comment > .inner:first-child:after { content: ""; display: block; clear: both; } .bottomcomment ul.entry-management-links, .bottomcomment ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { border-top: 1px solid var(--border-color); padding: 0 2em; margin-bottom: -1px; } #postform { width: auto; padding: 2em; border-top: 1px solid var(--border-color); margin-top: -1px; } #qrformdiv { padding: 0; max-width: 100%; } #qrform { border-top: 1px solid var(--border-color); padding: 2em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--border-color); border-radius: 4px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; border: 0; font-size: 1em; padding: 0.5em; color: var(--link-color); line-height: 1; font-family: var(--main-font); border: 1px solid var(--border-color); border-radius: 4px; } #qrdiv .ljuser img, #talkform-from img { display: none; } #qrformdiv .qr-meta .ljuser { font-size: inherit; } #qrformdiv .qr-meta .ljuser b { font-weight: normal; color: var(--text-color); } #talkform-from label { font-weight: normal; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .page-month .month, .tags-container, .icons-container { border-top: 1px solid var(--border-color); } @media (min-width: 800px) { .month-wrapper, .page-month .month, .tags-container, .icons-container { padding-right: 150px; } .month-wrapper div.month, .page-month .month .inner, .tags-container > .inner:first-child, .icons-container > .inner:first-child { border-right: 1px solid var(--border-color); } .month-wrapper .header, .tags-container .header, .icons-container .header { float: right; margin-right: -151px; width: 150px; } } .month-wrapper .header, .tags-container .header, .icons-container .header { text-align: center; text-transform: uppercase; border-bottom: 1px solid var(--border-color); } .month-wrapper .contents, .tags-container .contents, .icons-container .contents { padding: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; line-height: 1; font-weight: normal; padding: 0.5em 0.25em; margin: 0; } #archive-year .month .footer .inner a, #primary .manage-link a { text-transform: uppercase; line-height: 1; text-align: center; border-top: 1px solid var(--border-color); padding: 0.5em 0.25em; display: block; color: var(--text-color); } #archive-year .month .footer .inner a:hover, #primary .manage-link a:hover { color: var(--link-color); } @media (min-width: 800px) { #archive-year .month .footer .inner, #primary .manage-link { float: right; clear: right; margin-right: -151px; width: 150px; display: block; margin-top: -2em; } } /*------------ archive ------------*/ .month caption { display: none; } .day-date { display: none; } .month table { border: none; text-align: center; border-spacing: 2px; width: 100%; line-height: 1; } table.month { margin: 0 auto; } table.month td, table.month th { width: 3.25em; height: 2em; padding: 0.25em; border: 1px solid var(--border-color); border-radius: 4px; } table.month td p { margin: 0; display: inline; } table.month td p:before { content: "[ "; } table.month td p:after { content: " ]"; } table.month td.day-has-entries .label { font-weight: bold; } .month dl { margin: 0; } .month dt { display: block; text-align: center; line-height: 1; border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); padding: 0.5em 0; } @media (min-width: 800px) { .month dt { float: right; margin-right: -151px; width: 150px; } } .month dt:first-child { border-top: 0; } .month dl h3 { font-size: 1em; } .month dd { margin: 0; padding: 2em; } .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 .tag ul { display: inline; margin: 0; padding: 0; } .month dl br { display: block; } #archive-year .navigation ul, #archive-month .navigation ul form { margin: 0; padding: 2em; display: flex; flex-wrap: wrap; list-style: none; } #archive-year .navigation li, #archive-month .navigation li { list-style: none; border: 1px solid var(--border-color); margin: 2px; border-radius: 4px; padding: 0.5em; line-height: 1; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 1.5em; padding: 0; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { margin-top: 1.5em; } .icon { border: 1px solid var(--border-color); margin-top: 1em; display: flex; border-radius: 4px; } .icon-image { border-right: 1px solid var(--border-color); padding: 1em; } .icon-image img { display: block; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } .icon-info { padding: 2em; display: flex; flex-wrap: wrap; align-items: center; } .default.label { width: 40px; height: 40px; border: 1px solid var(--border-color); border-radius: 4px; overflow: hidden; } .default.label:before { content: "star"; font-family: Material Icons; font-size: 22px; line-height: 22px; color: var(--entry-icon-color); padding: 9px; display: block; color: var(--icon-color); } .icon-info div { margin-right: 1em; } /*------------ modules ------------*/ #secondary::-webkit-scrollbar { width: 10px; height: 10px; } #secondary::-webkit-scrollbar-track { background: var(--background-color); } #secondary::-webkit-scrollbar-thumb { background: var(--border-color); border-left: 5px solid var(--background-color); } #secondary::-webkit-scrollbar-corner { background: var(--border-color); } #secondary { border-top: 1px solid var(--border-color); background: var(--background-color); } #secondary .module-wrapper { padding: 0.5em 2em; } @media (min-width: 1024px) { #secondary { position: fixed; bottom: 0; left: 51px; width: var(--sidebar-width); height: 100%; border-right: 1px solid var(--border-color); border-top: 0; overflow: auto; z-index: 3; margin: 0; } #secondary > .inner:first-child { height: 100%; box-sizing: border-box; position: relative; display: flex; } .module-section-one:before { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); margin: 1.5em 0; background-image: var(--sidebar-image); background-repeat: no-repeat; background-position: center center; border-radius: 7px; } #secondary .module-wrapper { margin: auto; max-width: var(--sidebar-image-width); width: 100%; } } .module-section-one .module { text-align: center; margin: 1.5em 0; } .module-content ul { list-style: none; margin: 0; padding: 0; } .module-section-one .module-content ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; } .module-section-one .module-content li { flex-grow: 1; text-align: center; line-height: 1; } @media (min-width: 1024px) { .module-section-one .module-content li { min-width: 50%; } } .module-section-one .module-content li a { display: block; margin: 1px; border: 1px solid var(--border-color); padding: 0.5em; border-radius: 4px; } .module-section-one .module-content li a:hover { color: var(--link-hover-color); } .module-section-one .module-customtext .module-content { font-style: italic; text-align: left; } @media (min-width: 800px) { .module-customtext .module-content { text-align: justify; } } .module h2, .module-userprofile, .module-calendar, .module-tags_list, .module-tags_multilevel, .module-tags_cloud, .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, #primary .page-separator { display: none; } .navigation ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--border-color); } #entries .navigation li { list-style: none; padding: 0; } #entries .navigation li a { width: 50px; height: 50px; display: block; overflow: hidden; border-right: 1px solid var(--border-color); color: var(--icon-color); } #entries .navigation li a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } #entries .navigation li a:before { width: 50px; height: 50px; display: block; font-family: Material Icons; font-size: 22px; line-height: 50px; text-align: center; vertical-align: middle; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .navigation.empty, .noentries { display: none; } @media (min-width: 800px) { #entries .navigation ul { position: fixed; left: 0; bottom: 51px; width: 50px; border-top: 0; } #entries .navigation li a { border-top: 1px solid var(--border-color); } } /*------------ footer ------------*/ #footer { border-top: 1px solid var(--border-color); } @media (min-width: 800px) { #footer { position: fixed; width: 50px; height: 50px; bottom: 0px; left: 0px; } } .page-top a { display: block; width: 50px; height: 50px; overflow: hidden; border-right: 1px solid var(--border-color); color: var(--icon-color); } .page-top a:hover { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } .page-top a:before { display: block; font-family: Material Icons; font-size: 22px; width: 50px; height: 50px; line-height: 50px; text-align: center; content: "arrow_upward"; } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--background-color); border: 1px solid var(--border-color); padding: 0; border-radius: 0; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 200px; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; border-top: 1px solid var(--border-color); margin: 0; } div.ContextualPopup .Userpic { border: 0; float: none; padding: 25px; } div.ContextualPopup .Userpic img { max-width: 100px; max-height: 100px; width: auto; height: auto; border-radius: 5px; display: block; margin: 0 auto; } .ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid var(--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(--background-color); color: var(--text-color); justify-content: center; padding: 0.75em 0; border-bottom: 1px solid var(--border-color); width: 100%; } @media (min-width: 800px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; z-index: 9; } #lj_controlstrip:after { font-family: "Material Icons"; content: "more_horiz"; font-size: 22px; position: absolute; bottom: -52px; height: 50px; width: 50px; left: 0; cursor: pointer; line-height: 50px; text-align: center; color: var(--icon-color); background: var(--background-color); border-top: 1px solid var(--border-color); border-bottom: 1px solid var(--border-color); transition: all 0.4s ease; } #lj_controlstrip:hover:after { color: var(--icon-hover-color); background: var(--icon-background-hover-color); } #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; 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(--border-color); border-radius: 4px; } #lj_controlstrip input[type="submit"] { background: transparent; border: 0; font-size: 1em; padding: 0.5em; color: var(--link-color); line-height: 1; font-family: var(--main-font); border: 1px solid var(--border-color); border-radius: 4px; } #lj_controlstrip_userpic a img { border-radius: 4px; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }Paste the following into the "Custom stylesheet URL" field.https://fonts.googleapis.com/css2?family=Archivo+Narrow&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".

RESOURCES

• icon font by Google
• image from unsplash.com

Comments

[skargasm]

Installed immediately - absolutely gorgeous!

[rosecarmine]

Thank you!

[seirdomly]

Ohhhhh my goodness, thank you for this, hooooly cow. Beautiful!

[kryn]

This is so stunning!!

I don't know if you're still available for any help, but somehow while adjusting fonts, the cut tag text seems to have disappeared on my page and the reading page, even when replacing the sections from '.cuttag-action img {' to '.cuttag + b a {' with this base coding again. What other coding would be potentially hiding this text?

[rosecarmine]

Thank you!

The text will be visible if you set the body font size in pixels.

[kryn]

yay that did it, thanks so much!

[rosecarmine]

You're welcome!

[yanyan]

Hi! I'm currently having trouble with the cut tag. Right now, it looks like this.



I haven't touched the CSS. Is there a fix for this?

[rosecarmine]

Hi! Dreamwidth recently made changes to the cut tags. I will try to fix it and get back to you.

[rosecarmine]

I found a solution. In the css field delete everything with cuttag and paste this:

.cuttag-action img {
display: none;
}

.cut-wrapper{
display: inline-flex;
align-items: center;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 5px;
}

.cuttag-action:before {
content: "content_cut";
display: block;
font-family: Material Icons;
font-size: 22px;
line-height: 22px;
margin-right: 5px;
color: var(--icon-color);
}

.cuttag-action-after:before {
display: inline-block;
border: 1px solid var(--border-color);
border-radius: 4px;
padding: 5px;
}

.cut-open, .cut-close {
display:none;
}

.cut-text {
font-size: var(--text-size);
text-transform: lowercase;
font-weight: normal;
}

Let me know if it works.

[yanyan]

It works like a charm! Thank you so much.

[mulhollands]

using this one :) will credit