Highlight

[rosecarmine]

LIVE PREVIEW

FEATURES

• header image (pattern)
• 5 colour schemes
• comment pages
• icon pages

INSTRUCTIONS

1. Go to the "Select style" page, search for "Paletteable" and apply any theme.
2. Choose the "1 Column (modules at bottom; no sidebar)" page setup.
3. Go to the "Customize your theme" page and click on the "Presentation" tab. In the "Additional options" section select "icons" for:
   • Select whether entry management links are printed as text or using the available icons
   • Select whether comment management links are printed as text or using the available icons.
4. Click on the "Custom CSS" tab. Choose one of the color schemes and paste the code into the "Use embeded CSS" field. Press enter and paste the layout code into the field as well. Uncheck "Use layout's stylesheet(s)".
   
   Orange:/*------------------------------------- - layout - orange highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - lukasdedi - https://www.freepik.com/author/lukasdedi -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #e7d9be; --text-color: #33302b; --link-color: #d67014; --link-hover-color: #5e3f2b; --header-height: 350px; --header-background-color: #33302b; --header-text-color: #dac2ad; --header-link-color: #efac63; --header-link-hover-color: #e7d9be; --header-image: url("https://rosecarmine.dreamwidth.org/file/145046.jpg"); --entry-width: 1000px; --entry-background-color: #f2eadb; --entry-border-color: #dac2ad; --heading-background-color: #efac63; --heading-color: #5e3f2b; --sidebar-width: 300px; --icon-color: #f2eadb; --icon-hover-color: #5e3f2b; }
   Blue:/*------------------------------------- - layout - blue highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - lukasdedi - https://www.freepik.com/author/lukasdedi -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #cde1ed; --text-color: #013451; --link-color: #1e7dcc; --link-hover-color: #293e5f; --header-height: 350px; --header-background-color: #013451; --header-text-color: #abcbdc; --header-link-color: #6cbbe6; --header-link-hover-color: #abcbdc; --header-image: url("https://rosecarmine.dreamwidth.org/file/147065.jpg"); --entry-width: 1000px; --entry-background-color: #ecf4f9; --entry-border-color: #accbdb; --heading-background-color: #6cbbe6; --heading-color: #293e5f; --sidebar-width: 300px; --icon-color: #ecf4f9; --icon-hover-color: #293e5f; }
   Green:/*------------------------------------- - layout - green highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - mariadetarosarinda - https://www.freepik.com/author/mariadetarosarinda -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #cceee3; --text-color: #3d5048; --link-color: #35997b; --link-hover-color: #94983d; --header-height: 350px; --header-background-color: #e5f9f8; --header-text-color: #3d5048; --header-link-color: #35997b; --header-link-hover-color: #3d5048; --header-image: url("https://rosecarmine.dreamwidth.org/file/148031.jpg"); --entry-width: 1000px; --entry-background-color: #f3fcfc; --entry-border-color: #b5ddd7; --heading-background-color: #75c1ac; --heading-color: #f3fcfc; --sidebar-width: 300px; --icon-color: #f2f7d2; --icon-hover-color: #f3fcfc; }
   Red:/*------------------------------------- - layout - red highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - mariadetarosarinda - https://www.freepik.com/author/mariadetarosarinda -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #e1e1e1; --text-color: #333; --link-color: #da3a73; --link-hover-color: #333; --header-height: 350px; --header-background-color: #200d0f; --header-text-color: #f5d9d5; --header-link-color: #ec689a; --header-link-hover-color: #f5d9d5; --header-image: url("https://rosecarmine.dreamwidth.org/file/150720.jpg"); --entry-width: 1000px; --entry-background-color: #f7f7f7; --entry-border-color: #ccc; --heading-background-color: #dc457a; --heading-color: #faeae7; --sidebar-width: 300px; --icon-color: #f5d9d5; --icon-hover-color: #200d0f; }
   Purple:/*------------------------------------- - layout - purple highlight (paletteable) - https://myrtillenne.dreamwidth.org - icon font - material icons - https://fonts.google.com/icons - header image - upklyak - https://www.freepik.com/author/upklyak -------------------------------------*/ /*--------------- options ---------------*/ :root { --text-size: 16px; --line-height: 1.5; --main-font: Literata, serif; --title-font: Literata, serif; --background-color: #2d2732; --text-color: #c4b4d6; --link-color: #b686f0; --link-hover-color: #ded6e9; --header-height: 350px; --header-background-color: #6840aa; --header-text-color: #c4b4d6; --header-link-color: #c49df2; --header-link-hover-color: #c4b4d6; --header-image: url("https://rosecarmine.dreamwidth.org/file/153204.jpg"); --entry-width: 1000px; --entry-background-color: #403748; --entry-border-color: #77559f; --heading-background-color: #7d55bf; --heading-color: #ded6e9; --sidebar-width: 300px; --icon-color: #1f1528; --icon-hover-color: #ded6e9; }
   Layout:/*--------------- general ---------------*/ H1, H2, H3 { margin: 0.25em 0; padding: 0.25em 0; } img { border: none; } hr { display: none; } body { padding: 0; margin: 0; background-color: var(--background-color); font-family: var(--main-font); line-height: var(--line-height); font-size: var(--text-size); color: var(--text-color); } a { color: var(--link-color); } a:hover { color: var(--link-hover-color); } a, a:link, a:visited { text-decoration: none; transition: all 0.4s ease; } q { font-style: italic; } blockquote { margin: 1em 0; padding-left: 1.5em; position: relative; font-style: italic; } blockquote:first-letter { font-family: var(--title-font); font-weight: bold; line-height: 1; margin-left: -1em; font-size: 1.5em; } blockquote:after { content: ""; position: absolute; top: 2em; left: 0; width: 1px; height: calc(100% - 2em); background: var(--entry-border-color); } #content-footer { height: 0; font-size: 0; clear: both; } /*--------------- header ---------------*/ #header { background: var(--header-background-color); color: var(--header-text-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } #header > .inner:first-child { padding: 0.5em 2em; display: flex; flex-wrap: wrap; align-items: center; } @media (min-width: 800px) { #header > .inner:first-child { max-width: calc(var(--entry-width) + var(--sidebar-width) + 150px); margin: 0 auto; padding: 0.5em; padding-left: 134px; border-left: 50px solid transparent; border-right: 50px solid transparent; box-sizing: border-box; min-height: 50px; } #header:before { content: ""; display: block; width: 100%; height: var(--header-height); background: var(--header-image); background-position: top center; } } h1#title { font-family: var(--title-font); font-size: 1.5em; font-style: italic; margin: 0 0.5em 0 0; padding: 0; line-height: 1.2; } h1#title a { color: var(--header-link-color); } h1#title a:hover { color: var(--header-link-hover-color); } h2#subtitle { margin: 0; padding: 0; font-size: 1em; line-height: 1.2; } h2#subtitle::before { content: "[ "; } h2#subtitle::after { content: " ]"; } h2#pagetitle { display: none; } /*--------------- content ---------------*/ #canvas { margin-bottom: 50px; } #content > .inner:first-child { position: relative; padding-top: 50px; } @media (min-width: 800px) { #content { margin: 0 auto; padding: 0 50px; } } @media (min-width: 1024px) { #content { max-width: calc(var(--entry-width) + var(--sidebar-width) + 50px); } #content > .inner:first-child { border-right: var(--sidebar-width) solid transparent; } #primary { width: 100%; margin-right: -100%; margin-left: 0; float: left; clear: both; } #secondary { float: right; width: var(--sidebar-width); margin-right: calc(-1 * var(--sidebar-width)); } #primary > .inner:first-child { padding-right: 50px; } } /*--------------- entries ---------------*/ .entry, .full .comment { margin-bottom: 50px; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .entry .entry-title, .full .comment-title { margin: 0; padding: 0.5em calc(2 * var(--text-size)); line-height: 1.2; font-family: var(--title-font); font-weight: normal; font-style: italic; font-size: 1.2em; box-sizing: border-box; } .sticky-entry-icon, .admin-post-icon { display: none; } @media (min-width: 800px) { .has-userpic .entry-title, .has-userpic .comment-title { padding-left: 144px; min-height: 40px; } } .no-subject .entry .entry-title, .no-subject .comment .comment-title { background: none; border: none; padding: 0; } .header .datetime { display: block; color: var(--heading-color); background: var(--heading-background-color); line-height: 34px; padding: 0 2em; } .header .datetime a { color: var(--heading-color); } @media (min-width: 800px) { .has-userpic .header .datetime { padding-left: 144px; } } .restrictions img, .access-filter img { display: none; } .restrictions-NSFW .entry .datetime:before { content: "[NSFW] "; } .restrictions-18 .entry .datetime:before { content: "[18+] "; } .access-filter:before { float: right; font-family: "Material Icons"; font-size: 24px; line-height: 24px; padding: 10px; background: var(--heading-background-color); border-radius: 10px; margin-right: 10px; margin-top: -5px; color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .security-protected .access-filter:before { content: "lock"; } .security-private .access-filter:before { content: "visibility_off"; } .has-userpic .userpic { float: left; margin: 10px 20px 0 10px; } .has-userpic .userpic img { display: block; max-width: 50px; max-height: 50px; width: auto; height: auto; border: 5px solid var(--heading-background-color); background: var(--heading-background-color); border-radius: 5px; display: block; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } @media (min-width: 800px) { .has-userpic .userpic { width: 114px; height: 114px; text-align: center; margin: -74px 20px 0 10px; display: flex; align-items: center; justify-content: center; } .has-userpic .userpic img { border: 7px solid var(--heading-background-color); max-width: 100px; max-height: 100px; border-radius: 10px; } } .entry .poster, .full .poster { display: block; padding: 0.5em 2em 0; } .poster .ljuser img { display: none; } .poster .ljuser b { font-weight: normal; } .poster.empty { padding-top: 1px; } .entry-content { margin: 2em; } @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 li, .comment-content li { list-style-position: inside; } .entry-content img, .comment-content img { max-width: 100%; height: auto; } .cuttag-action { display: flex; align-items: center; line-height: 1; } .cuttag-action img { display: none; } .cuttag-action:before { content: "content_cut"; font-family: Material Icons; font-size: 22px; vertical-align: middle; margin-right: 5px; } .cuttag-action:after { content: ""; height: 0; width: 100%; border-bottom: 1px dashed var(--entry-border-color); } .cut-open, .cut-close { display:none; } .cut-text{ font-weight: normal; margin-left: 27px; display: block; } .metadata { padding: 0 2em; } .metadata ul { display: inline; list-style: none; margin: 0; padding: 0; } .metadata li { margin-bottom: 0.25em; } .entry div.tag { padding: 0 2em; } .tag ul { padding: 0; margin: 0; display: inline; } .tag li { display: inline; } ul.entry-management-links { background: var(--heading-background-color); padding: 0.5em 2em; margin: 1em 0; line-height: 1; } ul.entry-management-links.icon-links { height: 20px; margin: 20px 0; padding: 0 10px; display: flex; justify-content: flex-end; list-style: none; } ul.entry-management-links.icon-links li { margin-left: 5px; } ul.entry-management-links.icon-links li a { color: var(--icon-color); } ul.entry-management-links.icon-links li a:hover { color: var(--icon-hover-color); } ul.entry-management-links.text-links li { margin-right: 0.5em; display: inline; } .entry-management-links.text-links li a { color: var(--heading-color); } .entry-management-links li a img { display: none; } .entry-management-links li a:before { display: block; font-family: "Material Icons"; font-size: 22px; line-height: 22px; padding: 8px; background: var(--heading-background-color); border-radius: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); margin-top: -9px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .icon-links .link_prev a:before { content: "arrow_back"; } .icon-links .edit_entry a:before { content: "edit"; } .icon-links .edit_tags a:before { content: "local_offer"; } .icon-links .mem_add a:before { content: "favorite"; } .icon-links .tell_friend a:before { content: "share"; } .icon-links .watch_comments a:before { content: "notifications"; } .icon-links .link_next a:before { content: "arrow_forward"; } ul.entry-interaction-links { margin: 0; padding: 0 2em 1em; } ul.entry-interaction-links li { display: inline; padding-right: 0.25em; } /*------------ comments ------------*/ .comment-pages { background: var(--header-background-color); text-align: center; margin: 50px 0; padding: 7px; color: var(--header-text-color); border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .comment-pages a { color: var(--header-link-color); } .comment-pages a:hover { color: var(--header-link-hover-color); } .comment-posted { font-weight: bold; } .comment-wrapper { min-width: 15em; position: relative; z-index: 9; } .partial { padding: 1em; margin: 50px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } .comment .comment-title { margin: 0; } .comment-date-text, .comment-from-text { display: none; } .comment-content { padding: 2em; } .multiform-checkbox { padding: 0 2em; } ul.comment-management-links { background: var(--heading-background-color); padding: 0.5em 2em; margin: 1em 0; line-height: 1; } ul.comment-management-links.icon-links { height: 20px; margin: 20px 0; padding: 0 10px; display: flex; justify-content: flex-end; list-style: none; } ul.comment-management-links.icon-links li { margin-left: 5px; } ul.comment-management-links.icon-links li a { color: var(--icon-color); } ul.comment-management-links.icon-links li a:hover { color: var(--icon-hover-color); } ul.comment-management-links.text-links li { margin-right: 0.5em; display: inline; } ul.comment-management-links.text-links li a { color: var(--heading-color); } ul.comment-management-links li a img { display: none; } ul.comment-management-links li a:before { display: block; font-family: "Material Icons"; font-size: 22px; line-height: 22px; padding: 8px; background: var(--heading-background-color); border-radius: 8px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); display: block; margin-top: -9px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } .icon-links .edit_comment a:before { content: "edit"; } .icon-links .delete_comment a:before { content: "delete_forever"; } .icon-links .screen_comment a:before { content: "visibility_off"; } .icon-links .unscreen_comment a:before { content: "visibility"; } .icon-links .freeze_thread a:before { content: "ac_unit"; } .icon-links .unfreeze_thread a:before { content: "wb_sunny"; } ul.comment-interaction-links { margin: 0; padding: 0 2em 1em; } ul.comment-interaction-links li { display: inline; padding-right: 0.25em; } .bottomcomment ul.entry-management-links.icon-links { margin: 10px 0; } .bottomcomment ul.entry-management-links.text-links { margin: 0 0 1em; text-align: left; } .bottomcomment ul.entry-interaction-links { text-align: left; } .bottomcomment { background: var(--entry-background-color); text-align: center; margin: 50px 0; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } #multiform_mode { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); padding: 5px; font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #multiform_submit { border: 0; font-size: var(--text-size); font-family: var(--main-font); padding: 6px 10px; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); } #qrformdiv { right: 0 !important; min-width: 100% !important; padding: 0; } #qrform { padding: 0 10px; } #qrdiv input, #qrdiv select, #qrdiv textarea { background: var(--entry-background-color); border: 1px solid var(--entry-border-color); color: var(--text-color-alt); font-size: var(--text-size); font-family: var(--main-font); border-radius: 8px; } #qrdiv input[type="button"], #qrdiv input[type="submit"] { padding: 5px 10px; border: 0; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); } .qr-meta .block-icon img { border-radius: 5px; } #postform { margin-bottom: 50px; padding: 2em; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); background: var(--entry-background-color); } /*------------ archive, tags, icons containers ------------*/ .month-wrapper, .tags-container, .icons-container { background: var(--entry-background-color); margin-bottom: 50px; padding: 10px 0; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month .header, .tags-container .header, .icons-container .header { background: var(--heading-background-color); line-height: 34px; padding: 0 10px; } .month-wrapper h3, .tags-container h2, .icons-container h2 { font-size: 1em; position: relative; z-index: 1; padding: 0 20px; font-weight: normal; color: var(--heading-color); } .month .header:before, .tags-container .header:before, .icons-container .header:before { float: left; font-family: Material Icons; font-size: 24px; line-height: 24px; padding: 10px; background: var(--heading-background-color); border-radius: 10px; margin-top: -5px; margin-right: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); color: var(--icon-color); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .month .header:before { content: "calendar_month"; } .tags-container .header:before { content: "style"; } .icons-container .header:before { content: "photo_library"; } .tags-container .contents { padding: 2em; } .month .footer, #primary .manage-link { background: var(--heading-background-color); line-height: 34px; text-align: center; } .month .footer a, .tags-container .footer a, .icons-container .footer a { color: var(--heading-color); } /*------------ archive------------*/ .day-date { display: none; } .month caption { display: none; } .month table { width: 100%; border: none; text-align: center; border-collapse: collapse; } table.month { margin: 0 auto; } table.month td { padding: 0.5em 0; border-top: 1px solid var(--entry-border-color); } table.month th { padding: 0.5em 0; } 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; } .page-month .month { background: var(--entry-background-color); padding: 10px 0; margin-bottom: 50px; border-radius: 2px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .month dl dt { background: var(--heading-background-color); height: 20px; margin-top: 2em; } .month dl dt a { margin: -12px 10px 0; background: var(--heading-background-color); width: 44px; text-align: center; border-radius: 10px; line-height: 44px; float: left; color: var(--icon-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } .month dl dt:first-child { margin-top: 0; } .month dl br { display: block; } .month dl h3 { display: inline; font-size: 1em; } .month dd { margin: 2em 2em 0; } .month dd > span { padding-right: 0.25em; } #archive-month .navigation { background: var(--header-background-color); } #archive-month .navigation select { background: var(--entry-background-color); border: 0; border-radius: 8px; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color); } #archive-month .navigation input { background: transparent; border-radius: 8px; color: var(--header-link-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); text-transform: uppercase; } /*------------ tags ------------*/ ul.ljtaglist { padding: 0; margin-left: 1em; list-style: disc inside; } ul.ljtaglist:first-child, .tags_cloud ul { padding: 0; margin: 0; } /*------------ icons ------------*/ .page-icons .toppages { display: none; } .page-icons .bottompages { border-top: 1px solid var(--entry-border-color); text-align: center; padding: 1em; } .icon { border-top: 1px solid var(--entry-border-color); padding: 1em; display: flex; } .icon-image { padding-right: 1em; } .icon-image img { display: block; } .sorting-options ul { margin: 0; padding: 1em; text-align: center; } .sorting-options ul li { display: inline; } .icon-keywords ul { display: inline; margin: 0; padding: 0; } .icon-keywords ul li { display: inline; } .icon-pages p { margin: 0; } /*------------ modules ------------*/ .module { background: var(--entry-background-color); padding-top: 10px; margin-bottom: 50px; border-radius: 5px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } .module h2 { font-size: 1em; position: relative; padding: 0 10px; background: var(--heading-background-color); line-height: 34px; font-weight: normal; } .module h2:before { float: left; font-family: Material Icons; font-size: 24px; line-height: 24px; padding: 10px; background: var(--heading-background-color); border-radius: 10px; margin-top: -5px; margin-right: 10px; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); color: var(--icon-color); } .module-navlinks h2:before { content: "map"; } .module-typelist h2:before { content: "explore"; } .module-tags_list h2:before, .module-tags_multilevel h2:before, .module-tags_cloud h2:before { content: "loyalty"; } .module-calendar h2:before { content: "calendar_month"; } .module-customtext h2:before { content: "comment"; } .module-pagesummary h2:before { content: "article"; } .module-active h2:before { content: "local_fire_department"; } .module-search h2:before { content: "search"; } .module-cuttagcontrols h2:before { content: "content_cut"; } .module-syndicate h2:before { content: "rss_feed"; } .module-subscriptionfilters h2:before { content: "filter_alt"; } .module-credit h2:before { content: "code_off"; } .module-credit ul { display: none; } .module-credit .module-content:before { content: 'Theme "Highlight" by myrtillenne'; } .module h2, .module h2 a, .module .manage-link a { color: var(--heading-color); } .module-content { padding: 1.5em; } .module-content ul { list-style: none; margin: -1.5em; padding: 0; clear: both; } .module-content li { border-bottom: 1px solid var(--entry-border-color); padding: 0.5em 1em; } .module-content li:last-child { border-bottom: 0; } .module-calendar .module-content { text-align: center; padding: 0; } .module-calendar table { margin: 0 auto; width: 100%; border-collapse: collapse; } .module-calendar table td { border-top: 1px solid var(--entry-border-color); padding: 0.5em 0; } .module-calendar table th { padding: 0.5em 0; } .module-calendar .entry-day { font-style: italic; } .tags_cloud li, .module-tags_cloud li { display: inline; } .module .manage-link, .module-userprofile h2, .journal-website-name, .journal-name, ul.userlite-interaction-links, .module-time, .module-powered { display: none !important; } .module .userpic img { display: block; border: 7px solid var(--header-background-color); background: var(--header-background-color); border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); margin: 0 auto; } .module-userprofile, .module-userprofile .module-content { padding: 0; background: transparent; box-shadow: none; } @media (min-width: 800px) { .module-userprofile, .module-userprofile .module-content { margin: 0; } .module .userpic { width: 114px; height: 114px; text-align: center; position: absolute; top: -82px; left: 0; display: flex; align-items: center; } } .module-search .module-content { text-align: center; } .search-form .search-box-item, .search-form .search-button-item { display: block; } input.search-box { margin: 0 auto; background: var(--entry-background-color); border: 1px solid var(--entry-border-color); border-radius: 8px; padding: 5px; font-family: var(--main-font); font-size: var(--text-size); color: var(--text-color-alt); } input.search-button { padding: 5px 10px; background: var(--heading-background-color); border-radius: 8px; color: var(--heading-color); border: 0; font-family: var(--main-font); font-size: var(--text-size); } /*--------------- navigation ---------------*/ .navigation .page-separator, .topnav, .noentries, .navigation.empty { display: none; } .navigation { background: var(--header-background-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); border-radius: 5px; margin-bottom: 50px; color: var(--header-text-color); } .navigation ul { margin: 0; padding: 0; padding: 0.5em; } .navigation li { display: inline; padding: 0 0.25em; } .navigation a { color: var(--header-link-color); } .navigation a:hover { color: var(--header-link-hover-color); } #entries .navigation { height: 20px; } #entries .navigation ul { float: left; margin-top: -12px; padding: 0 10px; list-style: none; display: flex; flex-wrap: wrap; } @media (min-width: 1024px) { #entries .navigation { background: transparent; box-shadow: none; border-radius: 0; position: absolute; left: 49px; bottom: -32px; z-index: 9; height: auto; margin: 0; } } li.page-back, li.page-forward { margin-right: 5px; padding: 0; } li.page-back a, li.page-forward a { font-size: 0; display: block; } #entries .navigation li a:before { display: block; font-family: "Material Icons"; font-size: 24px; line-height: 24px; padding: 10px; background: var(--header-background-color); border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } li.page-back a:before { content: "arrow_back"; } li.page-forward a:before { content: "arrow_forward"; } /*------------ footer ------------*/ #footer { clear: both; } #footer .inner { background: var(--header-background-color); height: 20px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); border-radius: 5px; } @media (min-width: 800px) { #footer { padding: 0 50px; } } @media (min-width: 1024px) { #footer { margin: 0 auto; max-width: calc(var(--entry-width) + var(--sidebar-width) + 50px); padding: 0 50px; } #footer .inner { margin-right: calc(var(--sidebar-width) + 50px); } } .page-top { float: left; margin-top: -12px; margin-left: 10px; } .page-top a { font-size: 0; display: block; color: var(--header-link-color); } .page-top a:hover { color: var(--header-link-hover-color); } .page-top a:before { display: block; content: "arrow_upward"; font-family: "Material Icons"; font-size: 24px; line-height: 24px; padding: 10px; background: var(--header-background-color); border-radius: 10px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.3); } /*------------ contextual pop-up ------------*/ div.ContextualPopup { background: var(--entry-background-color); border: 0; padding: 10px 0 0; border-radius: 5px; font-family: var(--main-font); font-size: 1em; color: var(--text-color); width: 220px; text-align: center; } div.ContextualPopup .Relation { font-weight: normal; font-size: 1em; padding: 0.5em; margin: 0; } div.ContextualPopup .Userpic { margin: 0; border: 0; float: none; position: relative; } div.ContextualPopup .Userpic:before { content: ""; position: absolute; width: 100%; height: 20px; top: 50%; left: 0; margin-top: -10px; background: var(--heading-background-color); z-index: -1; } div.ContextualPopup .Userpic img { border-radius: 8px; border: 6px solid var(--heading-background-color); background: var(--heading-background-color); box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } div.ContextualPopup .Actions ul { list-style: none; margin: 0; padding: 0; } div.ContextualPopup li { padding: 0.5em; border-top: 1px solid var(--entry-border-color); line-height: 1; list-style: none; } .ContextualPopup a { color: var(--link-color); } .ContextualPopup a:hover { color: var(--link-hover-color); } /*------------ control strip ------------*/ #lj_controlstrip { background: var(--header-background-color); justify-content: center; padding: 0.75em 0; color: var(--header-text-color); } #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(--header-link-color); } #lj_controlstrip a:hover { text-decoration: none; color: var(--header-link-hover-color); } #lj_controlstrip_actionlinks { text-align: center; } #lj_controlstrip_statustext { font-weight: normal; font-size: 1em; color: var(--header-text-color); } #lj_controlstrip_search { text-align: right; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid transparent; font-size: 1em !important; font-family: var(--main-font) !important; background: var(--entry-background-color) !important; color: var(--text-color) !important; border-radius: 8px; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } #lj_controlstrip input[type="submit"] { padding: 0.5em; color: var(--header-link-color) !important; font-family: var(--title-font) !important; background: transparent !important; text-transform: uppercase; box-shadow: none; } #lj_controlstrip .ljuser b { font-weight: normal; } #lj_controlstrip .ljuser img { display: none; } #lj_controlstrip_userpic img { border-radius: 8px; max-width: 50px; max-height: 50px; width: auto; height: auto; } #lj_controlstrip_user, #lj_controlstrip_login, #lj_controlstrip_actionlinks { border: 0; }
   Into the "Custom stylesheet URL" field paste the following.
   https://fonts.googleapis.com/css2?family=Material+Icons&family=Literata&family=Literata:ital@1&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
• images from freepik by lukasdedi, mariadetarosarinda, upklyak

Comments

[blueshiftofdeath]

I love it!! Thank you for sharing :D