myrtillenne

LIVE PREVIEW

FEATURES

sidebar image (350x450px)
navigation links, links list, tags 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 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 "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)".
/*------------------------------------- - layout - jewels (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - image - https://www.freepik.com/author/aopsan -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --main-font: Work Sans, sans-serif; --title-font: Arima, sans-serif; --line-height: 1.5; --text-color: #503a3d; --background-color: #e8d6ef; --link-color: #9c4aa6; --link-hover-color: #e9a572; --icon-gradient1-color: #ebd1ba; --icon-gradient2-color: #ed9f54; --icon-background-gradient1-color: #af61b8; --icon-background-gradient2-color: #291f28; --icon-container-background-color: #af61b8; --icon-container-text-color: #f4e6d9; --entry-width: 800px; --entry-background-color: #fbf8fc; --entry-border-color: #dcc0e7; --entry-icon-color: #e9a572; --userpic-size: 100px; --sidebar-width: 350px; --sidebar-image-height: 450px; --sidebar-image: url(https://rosecarmine.dreamwidth.org/file/138884.jpg); } /*--------------- 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(--background-color); 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 { margin: 1em 0; padding-left: 1em; position: relative; font-style: italic; } blockquote:before { content: "format_quote"; font-family: Material Icons; font-size: 24px; line-height: 0; margin-left: -1rem; margin-right: 5px; color: var(--entry-icon-color); font-style: normal; vertical-align: middle; } blockquote:after { content: ""; position: absolute; top: 2em; left: 0; width: 1px; height: calc(100% - 2.5em); background: var(--entry-border-color); } /*------------ content ------------*/ #canvas { margin: 0 auto; max-width: var(--content-width); } @media (min-width: 800px) { #canvas { padding: 0 60px; } } @media (min-width: 1024px) { #canvas { border-left: var(--sidebar-width) solid transparent; max-width: calc(var(--entry-width) + 60px); } #primary { width: 100%; float: right; } #primary > .inner:first-child { margin: 60px 0; padding-left: 60px; } } /*--------------- header ---------------*/ #header { margin: 60px 0; } #header > .inner:first-child { text-align: center; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); display: flex; flex-direction: column; background: var(--icon-container-background-color); overflow: hidden; } #journaltitles-container { padding: 1em; background: var(--entry-background-color); border-radius: 0 0 8px 8px; } h1#title { font-size: 1.5em; font-weight: normal; font-family: var(--title-font); line-height: 1.2; padding: 0; margin: 0; } h2#subtitle { font-size: 1em; font-weight: normal; padding: 0; margin: 0.5em 0 0; line-height: 1; } h2#pagetitle { display: none; } @media (min-width: 1024px) { #header { float: left; width: var(--sidebar-width); margin-left: calc(-1 * var(--sidebar-width)); } #header:before { content: ""; display: block; width: 100%; height: var(--sidebar-image-height); background-image: var(--sidebar-image); background-size: cover; background-position: center center; margin-bottom: 10px; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } } #header .module-wrapper { order: 2; } /*------------ modules ------------*/ @media (min-width: 1024px) { #secondary { width: var(--sidebar-width); clear: left; margin: 60px 0; margin-left: calc(-1 * var(--sidebar-width)); } } #secondary .module { background: var(--icon-container-background-color); margin: 60px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; } #secondary .module-content { background: var(--entry-background-color); border-radius: 8px 8px 0 0; } .module h2 { color: var(--icon-container-text-color); font-size: 1.2em; font-family: var(--title-font); margin: 0; padding: 10px 10px 10px 15px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); font-weight: normal; display: flex; align-items: center; justify-content: space-between; position: relative; } .module h2 a { color: var(--icon-container-text-color); } .module h2:before { content: "explore"; display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; color: transparent; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; padding: 7px; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; order: 2; text-shadow: none; } .module h2:after { position: absolute; right: 10px; display: block; text-align: center; font-family: Material Icons; font-size: 24px; line-height: 24px; border: 9px solid transparent; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; } .module-typelist h2:after { content: "explore"; } .module-tags_list h2:after, .module-tags_multilevel h2:after, .module-tags_cloud h2:after { content: "loyalty"; } .module-customtext h2:after { content: "comment"; } .module-customtext .module-content { padding: 1em; } .module-content ul { margin: 0; padding: 0; list-style: none; } #secondary .module-content li { border-top: 1px solid var(--entry-border-color); padding: 0.5em 1em; } #secondary .module-content li:before { content: "chevron_right"; font-family: Material Icons; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); transition: all 0.2s linear; } #secondary .module-content li:hover:before { margin-right: 10px; } #secondary .module-content li:first-child { border: 0; } .module-navlinks ul { display: flex; justify-content: space-evenly; padding: 10px 0; flex-wrap: wrap; } .module-navlinks li { text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; } .module-navlinks li a { display: block; padding: 7px; font-size: 0; } .module-navlinks li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .list-item-recent a:before { content: "home"; } .list-item-archive a:before { content: "calendar_month"; } .list-item-read a:before { content: "feed"; } .list-item-tags a:before { content: "style"; } .list-item-network a:before { content: "travel_explore"; } .list-item-memories a:before { content: "collections_bookmark"; } .list-item-userinfo a:before { content: "account_box"; } .module .manage-link, .module-userprofile, .module-calendar, .module-cuttagcontrols, .module-pagesummary, .module-active, .module-credit, .module-syndicate, .module-subscriptionfilters, .module-search, .module-time, .module-powered { display: none; } /*--------------- entries ---------------*/ .entry, .comment { margin: 60px 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .entry .header, .comment .header { float: left; } .header .inner { padding: 2em 2em 0; } @media (min-width: 640px) { .has-userpic .entry .header { width: calc(100% - var(--userpic-size) - 2.5em); } .has-userpic .entry .header .inner { padding-right: 0; } } .entry .entry-title, .full .comment-title { font-size: 1.5em; font-family: var(--title-font); line-height: 1.2; font-weight: normal; padding: 0; margin: 0 0 1em; } .header .datetime:before { content: "today"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .datetime, .entry .datetime a, .comment .header .datetime { text-transform: lowercase; color: var(--text-color); } .entry .datetime a:hover { color: var(--link-color); } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); } .security-private .access-filter:before { content: "visibility_off"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); } .restrictions-NSFW .restrictions:before { content: "warning"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; vertical-align: middle; color: var(--entry-icon-color); } .contents { background: var(--entry-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; } .entry .contents, .comment .contents { padding: 2em; } .userpic { float: right; } .entry .userpic img, .comment .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); margin-left: 0.5em; } @media (min-width: 640px) { .entry .userpic img, .comment .userpic img { max-width: var(--userpic-size); max-height: var(--userpic-size); } } .entry .poster { font-size: 0; clear: left; display: block; } .entry .poster .ljuser { font-size: var(--text-size); padding-right: 0.25em; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { display: none; } .poster .ljuser:before, .full .poster:before { font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.25em; } .entry .poster .ljuser:nth-child(1):before, .full .poster:before { content: "account_circle"; } .entry .poster .ljuser:nth-child(2):before { content: "public"; } .entry .poster a, .full .poster a { color: var(--text-color); } .entry .poster a:hover, .full .poster a:hover { color: var(--link-color); } .entry-content { padding-top: 2em; clear: left; } @media (min-width: 1024px) { .entry-content { text-align: justify; } } .entry-content ol, .comment-content ol, .entry-content ul, .comment-content ul { padding-left: 1em; } .entry-content 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 { margin-top: 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata-label { display: none; } .metadata img { vertical-align: middle; } #metadata-music:before { content: "queue_music"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-mood:before { content: "face"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-location:before { content: "flag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } #metadata-xpost:before { content: "add_location"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .entry .footer { margin-top: 10px; background: var(--icon-container-background-color); border-radius: 8px; padding-bottom: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); overflow: hidden; } .entry .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .entry div.tag { background: var(--entry-background-color); border-radius: 0 0 8px 8px; padding: 1em 2em; flex: 0 0 100%; box-sizing: border-box; } .tag ul { display: inline; margin: 0; padding: 0; } .tag ul li { display: inline; } .tag-text { display: none; } .tag:before { content: "tag"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; color: var(--entry-icon-color); } .metadata a, .tag a { color: var(--text-color); } .metadata a:hover, .tag a:hover { color: var(--link-color); } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { margin: 10px 0 0; padding: 0 10px; list-style: none; } ul.entry-management-links.icon-links { display: flex; flex-wrap: wrap; } ul.entry-management-links.icon-links li { text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; margin-right: 5px; } ul.entry-management-links.icon-links li a { display: block; padding: 7px; } ul.entry-management-links li a img { display: none; } ul.entry-management-links li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-management-links.text-links, ul.entry-interaction-links { margin: 10px 0 0; padding: 0 10px; } ul.entry-management-links.text-links li, ul.entry-interaction-links li { display: inline; padding: 0 5px; } ul.entry-management-links.text-links li a, ul.entry-interaction-links li a { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } /*--------------- comments ---------------*/ .comment-pages { margin: 10px 0; padding: 1em 2em; background: var(--entry-background-color); line-height: 1; box-shadow: 1px 2px 2px var(--entry-shadow-color); text-align: center; border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .comment-wrapper { min-width: 15em; } .thread-depth::before { content: "subdirectory_arrow_right"; font-family: Material Icons; font-size: 22px; vertical-align: middle; color: var(--entry-icon-color); margin-right: 0.5em; } .no-subject .comment .comment-title, .no-subject .entry-title { padding: 0; margin: 0; } .partial .comment-title { margin: 0; } .comment .header .datetime { display: block; float: left; margin-right: 0.25em; } .comment-date-text, .comment-from-text, .comment-ip-text { display: none; } .full .poster { display: block; clear: left; } .comment .poster-ip { font-size: 1em; } .partial .comment { padding: 1em; background: var(--entry-background-color); border-radius: 10px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .comment-content { padding-top: 2em; } .comment .footer { margin-top: 10px; background: var(--icon-container-background-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); overflow: hidden; } .comment .footer .inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .multiform-checkbox { padding: 10px 10px 10px 15px; } .multiform-checkbox label { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } ul.comment-management-links { margin: 10px 0; padding: 0 10px; list-style: none; } ul.comment-management-links.icon-links { display: flex; } ul.comment-management-links.icon-links li { text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border-radius: 15px; margin-left: 5px; } ul.comment-management-links.icon-links li a { display: block; padding: 7px !important; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } #comments ul.entry-management-links, #comments ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .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-management-links.text-links li { display: inline; color: var(--icon-container-text-color); padding: 0 5px; font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } ul.comment-management-links.text-links li a { color: var(--icon-container-text-color); } ul.comment-interaction-links { order: -1; background: var(--entry-background-color); border-radius: 0 0 8px 8px; margin: 0; padding: 1em 2em; flex: 0 0 100%; box-sizing: border-box; } ul.comment-interaction-links li { display: inline; margin-right: 0.5em; } .bottomcomment { padding: 0 2em; background: var(--icon-container-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; } .bottomcomment label { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); padding-top: 10px; display: inline-block; } .bottomcomment input { background: transparent; color: var(--icon-container-text-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); border: 0; font-family: var(--title-font); font-size: var(--text-size); padding: 0; } .bottomcomment select, .bottomcomment input { margin-bottom: 10px; } .bottomcomment select { background: var(--entry-background-color); border: 0; color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrformdiv .de { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } #qrform { padding: 10px; } .entry #qrform { padding-bottom: 0; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color); border: 0; color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { background: transparent; color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } #postform { padding: 10px; border-radius: 8px; background: var(--icon-container-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } #talkform-from { background: var(--entry-background-color); border-radius: 8px; padding: 1em; margin: -10px -10px 10px; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { margin: 60px 0; } .month-wrapper .header, .tags-container .header, .icons-container .header { float: left; width: 100%; padding-bottom: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1.2em; font-family: var(--title-font); line-height: 1; font-weight: normal; padding: 0; margin: 0; } #archive-year .month .footer, #primary .manage-link { margin-top: 10px; padding: 10px 15px; background: var(--icon-container-background-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } #archive-year .month .footer a, #primary .manage-link a { color: var(--icon-container-text-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); } /*------------ archive ------------*/ .day-date { display: none; } .month caption { display: none; } .month table { text-align: center; width: 100%; border-collapse: collapse; } .month tr { border-top: 1px solid var(--entry-border-color); } .month td, .month th { padding: 1em 0; border: 0; font-weight: normal; width: 1em; } table.month th:first-letter { font-family: var(--title-font); font-weight: bold; color: var(--entry-icon-color); line-height: 1; } table.month td.day-has-entries .label, table.month td p { display: inline-block; margin: 0; } table.month td p:before { content: "( "; } table.month td p:after { content: " )"; } #archive-year .navigation li { color: var(--icon-container-text-color); font-family: var(--title-font); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7)); padding: 0 5px; } #archive-year .navigation li a { color: var(--icon-container-text-color); } .month dl { background: var(--entry-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; margin: 0 0 10px; } .month dl dt { font-family: var(--title-font); font-weight: normal; border-top: 1px solid var(--entry-border-color); padding: 0.5em 2em; } .month dl dt:first-child { border-top: 0; } .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 dl .tag ul { margin-top: 0; } .month dd { margin: 0; padding: 2em; border-top: 1px solid var(--entry-border-color); } .month dd br { display: block; } #archive-month .month-back, #archive-month .month-forward { color: var(--icon-container-text-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); padding: 0 5px; } #archive-month .month-back a, #archive-month .month-forward a { color: var(--icon-container-text-color); } #archive-month .navigation select { border: 0; background: var(--entry-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #archive-month .navigation input[type="submit"] { border: 0; color: var(--icon-container-text-color); background: transparent; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7); font-family: var(--title-font); font-size: var(--text-size); } /*------------ tags ------------*/ .tags-container .contents { padding: 2em; } ul.ljtaglist { padding: 0; margin-left: 1em; list-style-position: inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons page ------------*/ .sorting-options ul { margin: 0 0 2em; padding: 0 2em; } .sorting-options ul li { display: inline; } .page-icons .toppages { display: none; } .page-icons .bottompages { text-align: center; margin-top: 1em; } .icon { border-top: 1px solid var(--entry-border-color); padding: 1em; margin: 0; display: flex; } .icon-image { order: 2; padding-left: 1em; } .icon-image img { display: block; } .icon-info { flex-grow: 1; padding: 0 1em; } .icon-pages p { margin: 0; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } /*------------ navigation ------------*/ .navigation ul { margin: 0; padding: 0; list-style: none; } .navigation ul { background: var(--icon-container-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; overflow: hidden; padding: 10px; } .navigation li { display: inline; } li.page-back { float: left; font-size: 0; text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5); border-radius: 15px; margin-right: 5px; } li.page-forward { float: right; font-size: 0; text-align: center; background-image: linear-gradient( 135deg, var(--icon-background-gradient1-color), var(--icon-background-gradient2-color) ), linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-origin: border-box; background-clip: padding-box, border-box; border: 2px solid transparent; text-align: center; box-shadow: 0 2px 1px rgba(0, 0, 0, 0.5); border-radius: 15px; margin-left: 5px; } li.page-back a, li.page-forward a { display: block; padding: 7px; } li.page-back a:before, li.page-forward a:before { display: block; font-family: Material Icons; font-size: 24px; line-height: 24px; background-image: linear-gradient( 135deg, var(--icon-gradient1-color) 40%, var(--icon-gradient2-color) 70% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } .topnav, .navigation .page-separator, .navigation.empty, .noentries { display: none; } /*------------ footer ------------*/ #footer { margin: 60px; display: flex; justify-content: center; } @media (min-width: 1024px) { #footer { position: fixed; bottom: 12px; right: 12px; margin: 0; } } .page-top a { display: block; padding: 4px; font-size: 0; background: var(--entry-background-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .page-top a:before { display: block; font-family: Material Icons; font-size: 28px; line-height: 28px; text-align: center; content: "expand_less"; color: var(--entry-icon-color); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; border-radius: 8px; padding: 2em; font-family: inherit; color: var(--text-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } div.ContextualPopup .Relation { font-size: 1em; font-family: var(--title-font); font-weight: normal; margin: 0; } div.ContextualPopup .Userpic { border: none; } div.ContextualPopup .Userpic img { border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } div.ContextualPopup .Actions ul { padding: 1em 0 0; margin: 0; } /*------------ control strip ------------*/ #lj_controlstrip { color: var(--text-color); background: var(--entry-background-color); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); justify-content: center; padding: 0.75em 0; } @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: -48px; height: 48px; width: 36px; right: 12px; } #lj_controlstrip:after { font-family: Material Icons; content: "more_horiz"; font-size: 24px; position: absolute; bottom: -48px; height: 36px; width: 36px; right: 12px; cursor: pointer; line-height: 36px; text-align: center; background: var(--entry-background-color); color: var(--entry-icon-color); border-radius: 8px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); } #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 { color: var(--link-hover-color); text-decoration: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #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 { background: var(--entry-background-color) !important; border: 1px solid var(--entry-border-color); font-size: var(--text-size) !important; font-family: var(--main-font) !important; border-radius: 8px; } #lj_controlstrip input[type="submit"] { border: 0; border-radius: 0; text-transform: uppercase; color: var(--link-color); } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip img { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); border-radius: 8px; } #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=Material+Icons&family=Work+Sans&family=Arima&display=swap
Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

icon font by Google
image from freepik

Journal layouts

Jewels

Jewels

no subject

no subject

Links

Most Popular Tags

Custom text