App

[rosecarmine]

LIVE PREVIEW

FEATURES

• container
• sidebar image (300x300px)
• default icon, 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. Choose the "1 Column (modules at bottom; no sidebar)" page setup.
3. Go to the "Customize your theme" page and click on the "Modules" tab. Set "Profile" to number 1, "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. Uncheck the other modules.
4. Click on the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)"./*------------------------------------- - layout - app (basic boxes) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://material.io - image - https://www.freepik.com/author/vectorom -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --text-color: #594840; --background-color: #d7e2e3; --link-color: #58a3ab; --link-hover-color: #e0a061; --content-width: 1200px; --content-background-color: #ecf0f0; --entry-border-color: #b9c6c5; --icon-color: #ecf0f0; --icon-border-color: #fff; --gradient1-color: #61b9c0; --gradient2-color: #e0a061; --main-font: Archivo, sans-serif; --title-font: Keania One, sans-serif; --sidebar-image: url("https://rosecarmine.dreamwidth.org/file/135512.jpg"); --sidebar-image-width: 300px; --sidebar-image-height: 300px; } /*--------------- 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 { 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; padding: 0; } html, body { overflow: auto; } 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 linear; } q { font-style: italic; } blockquote { padding: 0; margin: 1em; } blockquote:first-letter { float: left; font-size: 2.5em; padding: 7px 9px; line-height: 0.75; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); margin-right: 5px; color: var(--icon-color); font-family: var(--title-font); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } blockquote:after { content:""; display:block; clear:both; } /*--------------- content layout ---------------*/ #canvas { padding-bottom: 52px; background: var(--content-background-color); } #canvas > .inner:first-child { height: 100%; } @media screen and (min-width: 800px) { #canvas { position: fixed; height: 90%; top: 5%; max-width: var(--content-width); margin: auto; left: 5%; right: 5%; padding-top: 52px; padding-bottom: 52px; box-sizing: border-box; border: 1px solid var(--entry-border-color); } #content { height: 100%; overflow: auto; } #primary { padding: 0 2em; } } @media screen and (min-width: 1024px) { #content > .inner:first-child { display: flex; height: 100%; overflow: hidden; } #primary { flex: 1; overflow: auto; order: 2; } } #primary::-webkit-scrollbar { width: 10px; height: 10px; } #primary::-webkit-scrollbar-track { background: var(--content-background-color); } #primary::-webkit-scrollbar-thumb { background: var(--entry-border-color); border: 2px solid var(--content-background-color); } #primary::-webkit-scrollbar-corner { background: var(--content-background-color); } /*--------------- header ---------------*/ #header { font-family: var(--title-font); } #journaltitles-container { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); display: flex; align-items: center; justify-content: space-between; min-height: 50px; } h1#title { font-size: 1em; margin: 0; padding: 0 1em; color: var(--icon-color); font-weight: normal; } h1#title a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } h1#title a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } h2#subtitle { font-size: 1em; margin: 0; padding: 0 1em; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-weight: normal; text-align: right; } h2#pagetitle { display: none; } @media screen and (min-width: 800px) { #journaltitles-container { height: 52px; position: absolute; top: 0; left: 0; overflow: hidden; width: 100%; box-sizing: border-box; } } .module-navlinks { line-height: 50px; text-align: center; height: 52px; overflow: hidden; width: 100%; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); box-sizing: border-box; position: fixed; bottom: 0; left: 0; border: 1px solid var(--icon-border-color); z-index: 9; } .module-navlinks ul { display: flex; margin: 0; padding: 0; list-style: none; } .module-navlinks li { flex: 1; border-right: 1px solid var(--icon-border-color); position: relative; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); overflow: hidden; transition: all 0.4s linear; } .module-navlinks li:last-child { border-right: 0; } .module-navlinks li:before { display: block; font-family: Material Icons; font-size: 28px; line-height: 50px; text-align: center; transition: all 0.4s linear; position: absolute; width: 100%; height: 100%; color: var(--icon-color); } .module-navlinks li:hover:before { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } .list-item-recent:before { content: "home"; } .list-item-archive:before { content: "date_range"; } .list-item-read:before { content: "library_books"; } .list-item-network:before { content: "public"; } .list-item-tags:before { content: "style"; } .list-item-memories:before { content: "collections_bookmark"; } .list-item-userinfo:before { content: "account_box"; } .module-navlinks li a { display: block; color: var(--icon-color); position: relative; z-index: 1; opacity: 0; } @media screen and (min-width: 800px) { .module-navlinks { position: absolute; } .module-navlinks ul { margin: 0 50px; border-left: 1px solid var(--icon-border-color); border-right: 1px solid var(--icon-border-color); } } @media screen and (min-width: 1024px) { .module-navlinks li:hover:before { opacity: 0; text-shadow: none; } .module-navlinks li a:hover { opacity: 1; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } } /*--------------- entries ---------------*/ .entry, .comment { margin: 2em 0; border: 1px solid var(--entry-border-color); } .entry .header, .comment .header { float: left; } .has-userpic .entry .header, .has-userpic .comment .header { width: calc(100% - 52px); } @media screen and (min-width: 800px) { .has-userpic .entry .header, .has-userpic .comment .header { width: calc(100% - 102px); } } .entry .header .inner { padding: 2em 2em 0; } .entry .entry-title, .comment .comment-title { padding: 0; margin: 0 0 0.25em; font-size: 1.2em; line-height: 1.2; font-family: var(--title-font); font-weight: normal; } .no-subject .entry .entry-title, .no-subject .comment .comment-title { margin: 0; padding: 0; } .sticky-entry-icon, .admin-post-icon { display: none; } .restrictions img, .access-filter img { display: none; } .security-protected .access-filter:before { content: "lock"; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .security-private .access-filter:before { content: "visibility_off"; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .restrictions-NSFW .restrictions:before { content: "warning"; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .restrictions-18 .restrictions:before { content: "18+"; font-size: 16px; font-family: arial, sans-serif; font-weight: bold; display: inline-block; vertical-align: middle; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .entry .contents { padding: 2em 2em 0; } .entry .userpic { float: right; margin: -2em -2em 0 0; } #primary .userpic img { height: auto; width: auto; max-width: 50px; max-height: 50px; border-left: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); } @media screen and (min-width: 1024px) { #primary .userpic img { max-width: 100px; max-height: 100px; } } .entry .poster { font-size: 0; display: block; clear: left; } .entry .poster .ljuser { font-size: var(--text-size); } .entry .poster .ljuser:before { content: "["; } .entry .poster .ljuser:after { content: "]"; } .poster .ljuser b { font-weight: normal; } .poster.empty, .poster .ljuser img { display: none; } .entry-content { padding: 2em 0; clear: left; } @media screen and (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 img { display: none; } .cuttag-action { display: inline-block; font-size: 26px; width: 34px; height: 34px; line-height: 34px; vertical-align: bottom; font-family: arial; text-align: center; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); } .cuttag-action:before { content: "+"; display: inline-block; } .cuttag-action-after:before { transform: rotate(45deg); } .cuttag-action:hover { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } .cut-open, .cut-close { display: none; } .cut-text { font-size: var(--text-size); font-weight: normal; display: inline; margin-left: 0.5em; } .metadata ul { margin: 0; padding: 0 0 2em; list-style: none; } .metadata li, .entry .tag { margin-bottom: 2px; } .metadata-label, .entry .tag-text { display: none; } .metadata li:before, .entry div.tag:before { display: inline-block; vertical-align: middle; content: ""; width: 34px; height: 34px; margin-right: 2px; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); font-family: Material Icons; font-size: 22px; text-align: center; line-height: 34px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .metadata img { vertical-align: middle; } #metadata-music:before { content: "speaker"; } #metadata-mood:before { content: "sentiment_satisfied_alt"; } #metadata-location:before { content: "location_on"; } #metadata-xpost:before { content: "add_location"; } .entry div.tag { padding: 0 2em; margin-bottom: 2em; } .entry div.tag:before { content: "loyalty"; } .tag ul { margin: 0; padding: 0; display: inline; } .tag ul li { display: inline; } .tag-nav-trigger { vertical-align: middle; } ul.entry-management-links { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); order: 9; border: 1px solid var(--icon-border-color); margin: 0; padding: 0.5em; text-align: center; font-family: var(--title-font); clear: both; } ul.entry-management-links li { display: inline; padding: 0 0.25em; } ul.entry-management-links.icon-links { display: flex; padding: 0; } ul.entry-management-links.icon-links li { flex: 1; list-style: none; border-right: 1px solid var(--icon-border-color); } ul.entry-management-links.icon-links li:last-child { border-right: 0; } ul.entry-management-links li a img { display: none; } ul.entry-management-links li a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } ul.entry-management-links li a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } ul.entry-management-links.icon-links li a { padding: 0.5em 0; display: block; } ul.entry-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; display: block; } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "add_alert"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links { text-transform: uppercase; margin: 0 0 1em; padding: 0; text-align: center; } ul.entry-interaction-links li { display: inline; padding: 0 0.25em; } .entry .footer .inner { display: flex; flex-direction: column; } /*--------------- comments ---------------*/ #comments { margin-bottom: 2em; } .comment-pages { text-align: center; } .comment-pages.bottompages { display: none; } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; } .comment .header .inner { padding: 2em 2em 0; } .thread-depth { display: inline-block; background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; margin-bottom: 1em; line-height: 1; border: 1px solid var(--icon-border-color); } .comment .userpic { float: right; } .comment .header .datetime, .full .comment .poster, .poster-ip { display: block; } .header .comment-date-text, .full .comment-from-text, .comment-ip-text { display: none; } .full .comment .poster, .poster-ip { display: block; clear: left; padding: 0 2em; } .full .comment .poster .ljuser:before { content: "["; } .full .comment .poster .ljuser:after { content: "]"; } .comment-content { text-align: justify; clear: left; padding: 2em; } .comment .footer .inner { display: flex; flex-direction: column; } .multiform-checkbox { text-align: center; text-transform: uppercase; } ul.comment-management-links { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); order: 9; border: 1px solid var(--icon-border-color); margin: 0; padding: 0.5em; text-align: center; font-family: var(--title-font); clear: both; } ul.comment-management-links li { display: inline; padding: 0 0.25em; } ul.comment-management-links.icon-links { display: flex; padding: 0; } ul.comment-management-links.icon-links li { flex: 1; list-style: none; border-right: 1px solid var(--icon-border-color); } ul.comment-management-links.icon-links li:last-child { border-right: 0; } ul.comment-management-links li a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } ul.comment-management-links li a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } ul.comment-management-links li a img { display: none; } ul.comment-management-links.icon-links li a { padding: 0.5em 0; display: block; } ul.comment-management-links.icon-links li a:before { font-family: Material Icons; font-size: 22px; line-height: 22px; display: block; } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links { text-transform: uppercase; margin: 0 0 1em; padding: 0 2em; text-align: center; } ul.comment-interaction-links li { display: inline; padding: 0 0.25em; } .partial .comment { padding: 1em; } .bottomcomment ul.entry-management-links, .bottomcomment ul.entry-interaction-links, .comment-pages.bottompages { display: none; } .bottomcomment { text-align: center; } .bottomcomment select { border: 1px solid var(--entry-border-color); background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } .bottomcomment input { border: 1px solid var(--icon-border-color); background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); font-size: var(--text-size); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; line-height: 1; } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #postform { margin: 2em 0; padding: 1em; border: 1px solid var(--entry-border-color); } #qrform { padding: 1em; } #qrdiv input, #qrdiv select, #qrdiv textarea { border: 1px solid var(--entry-border-color); background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #qrdiv input[type="button"], #qrdiv input[type="submit"] { border: 1px solid var(--icon-border-color); background: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); font-size: var(--text-size); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; line-height: 1; } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, #archive-month, .tags-container, .icons-container { margin: 2em 0; border: 1px solid var(--entry-border-color); } .month .header, .tags-container .header, .icons-container .header { text-align: center; padding-top: 2em; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-family: var(--title-font); font-size: 1.2em; padding: 0; margin: 0; font-weight: normal; } .month .contents, .tags-container .contents { padding: 2em; } #primary .manage-link, .month-wrapper .footer { text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); padding: 0.5em; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); font-family: var(--title-font); } #primary .manage-link a, .month-wrapper .footer a { color: var(--icon-color); } #primary .manage-link a:hover, .month-wrapper .footer a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } /*------------ archive ------------*/ .month caption { display: none; } table.month { margin: 0 auto; border-collapse: separate; border-spacing: 1px; width: 100%; border: none; text-align: center; } table.month td { width: 2.5em; line-height: 2.5em; height: 2.5em; position: relative; } table.month td.day-has-entries .label { display: block; color: var(--icon-color); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); width: 2.5em; line-height: 2.5em; height: 2.5em; margin: 0 auto; border: 1px solid var(--icon-border-color); font-family: var(--title-font); transition: all 0.4s linear; } table.month td.day-has-entries:hover .label { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } table.month .day-has-entries p { left: 0; top: 0; position: absolute; z-index: 9; height: 100%; width: 100%; display: block; margin: 0; } table.month .day-has-entries p a { color: transparent; height: 100%; width: 100%; display: block; } .month dl { margin: 0; } .month dl dt { text-align: center; text-transform: uppercase; font-weight: normal; padding: 0.5em; border-top: 1px solid var(--entry-border-color); border-bottom: 1px solid var(--entry-border-color); font-family: var(--title-font); } .month dl dt:first-child { border-top: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 0; padding: 2em; } .month dd > span { padding-right: 0.25em; } .month dl .tag ul { margin: 0; } .day-date { display: none; } #archive-year .navigation { margin: 2em 0; } #archive-year .navigation li { display: inline; padding: 0 0.5em; } .page-month .navigation { text-align: center; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); color: var(--icon-color); } .page-month .navigation a { color: var(--icon-color); } .page-month .navigation a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } #archive-month .navigation ul form { display: flex; flex-wrap: wrap; } #archive-month .navigation li { border-right: 1px solid var(--icon-border-color); padding: 0.5em; flex-grow: 1; } #archive-month .navigation li:last-child { border-right: 0; } #archive-month .navigation input, #archive-month .navigation select { border: 1px solid var(--icon-border-color); background: var(--content-background-color); color: var(--text-color); font-size: var(--text-size); font-family: var(--main-font); } #archive-month .navigation input[type="submit"] { border: 0; background: transparent; color: var(--icon-color); font-family: var(--title-font); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } /*------------ tags ------------*/ ul.ljtaglist { list-style: square inside; 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: 2em; border-top: 1px solid var(--entry-border-color); } .sorting-options ul { margin: 0 0 2em; padding: 0; text-align: center; } .sorting-options ul li { display: inline; } .icons-container .icon { display: flex; flex-wrap: wrap; } .icon { border-top: 1px solid var(--entry-border-color); } .icon-image img { display: block; } .icon-info { padding: 1.5em; flex: 1; } .icon-keywords ul { margin: 0; padding: 0; display: inline; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .navigation.empty, .noentries { display: none; } .navigation { text-align: center; } .navigation ul { margin: 0; padding: 0; } .navigation li { padding: 0 0.5em; display: inline; } .separator-after { clear: both; } @media screen and (min-width: 800px) { #entries .navigation li a { width: 50px; height: 50px; display: block; overflow: hidden; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #entries .navigation li a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } #entries .navigation li a:before { display: block; font-family: Material Icons; font-size: 28px; 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"; } li.page-back, li.page-forward { position: absolute; width: 50px; height: 50px; bottom: 0; z-index: 10; padding: 0; } li.page-back { left: 0; } li.page-forward { right: 0; } } /*--------------- modules ---------------*/ #secondary { margin: 2em 0; } @media screen and (min-width: 800px) { #secondary { margin: 2em; } } #secondary > .inner:first-child { border: 1px solid var(--entry-border-color); } #secondary > .inner:first-child::-webkit-scrollbar { width: 10px; height: 10px; } #secondary > .inner:first-child::-webkit-scrollbar-track { background: var(--content-background-color); } #secondary > .inner:first-child::-webkit-scrollbar-thumb { background: var(--entry-border-color); border: 2px solid var(--content-background-color); } #secondary > .inner:first-child::-webkit-scrollbar-corner { background: var(--content-background-color); } @media screen and (min-width: 1024px) { #secondary { width: var(--sidebar-image-width); padding-top: var(--sidebar-image-height); position: relative; margin-right: 0; } #secondary::before { content: ""; position: absolute; top: 0; left: 0; width: var(--sidebar-image-width); height: var(--sidebar-image-height); background-image: var(--sidebar-image); background-size: cover; background-position: center center; } #secondary > .inner:first-child { max-height: 100%; overflow: auto; } .module .userpic { position: absolute; margin-top: -102px; width: 100%; height: 102px; display: flex; align-items: flex-end; justify-content: center; } } #secondary .module { border-top: 1px solid var(--entry-border-color); margin-top: -1px; } .module .userpic img { border: 1px solid var(--icon-border-color); background: var(--content-background-color); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); display: block; margin: 10px auto; } .module-section-one .module-content ul { list-style: none; margin: 0; padding: 0; } .module-section-one .module-content li { line-height: 1; } .module-section-one .module-content li a { display: block; border-top: 1px solid var(--entry-border-color); padding: 0.5em 1em; background-size: 0 100%; background-repeat: no-repeat; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); } .module-section-one .module-content li a:hover { background-size: 100% 100%; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .module-section-one .module-content li:first-child a { border: 0; } .module-customtext { padding: 1em; } .module-customtext .module-content:first-letter { float: left; font-size: 2.5em; padding: 7px 9px; line-height: 0.75; background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); margin-right: 5px; text-transform: uppercase; color: var(--icon-color); font-family: var(--title-font); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .module-customtext:after { content:""; display:block; clear:both; } .module h2, .journal-website-name, .journal-name, ul.userlite-interaction-links, .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 !important; } /*--------------- footer ---------------*/ #footer { background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); border-bottom: 0; text-align: center; padding: 0.5em; font-family: var(--title-font); } #footer a { color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } #footer a:hover { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 0 5px; } @media screen and (min-width: 800px) { #footer { display: none; } } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--content-background-color); font-family: var(--main-font); border: 0; } div.ContextualPopup .Relation { font-size: 1em; padding: 0.5em; font-weight: normal; font-family: var(--title-font); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); margin-right: 82px; color: var(--icon-color); border: 1px solid var(--icon-border-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } div.ContextualPopup .Userpic { border: none; padding: 0; } div.ContextualPopup .Userpic img { border: 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-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); color: var(--icon-color); padding: 0.75em 0; justify-content: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); z-index: 9; } #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(--icon-color); } #lj_controlstrip_statustext { color: var(--icon-color); font-weight: normal; font-size: 1em; } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_search { text-align: right; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid var(--icon-border-color); background: var(--content-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"] { background: transparent !important; border: 0; font-size: 1em; font-family: var(--title-font) !important; color: var(--icon-color) !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); padding: 0.5em; } @media (min-width: 800px) { #lj_controlstrip { transform: translateY(-100%); position: fixed; transition: transform 0.7s; border-bottom: 1px solid var(--icon-border-color); } #lj_controlstrip:before { content: ""; position: absolute; bottom: -46px; height: 46px; width: 36px; right: 10px; } #lj_controlstrip:after { font-family: "Material Icons"; content: "settings"; font-size: 24px; position: absolute; bottom: -48px; height: 36px; width: 36px; right: 10px; cursor: pointer; line-height: 36px; text-align: center; color: var(--icon-color); background-image: linear-gradient( 135deg, var(--gradient1-color), var(--gradient2-color) ); border: 1px solid var(--icon-border-color); } #lj_controlstrip:hover { transform: translateY(0); } } #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&family=Keania+One&display=swap
5. Go to the "Account settings" page and check "Show my journal's icons pages in my chosen style instead of the site layout" (optional).

RESOURCES

• icon font by Google
• image from freepik

Comments

[raynedanser]

Just loaded this one. I love it! Your layouts are incredible, thank you for sharing with us.