baisemain | LAYOUT: Singularities (Reply)

[ PREVIEW ] [ Sidebar Right ]

Featuring: Compatible with all DW modules and page setups, display names on reading page, customized comment pages, can be edited using DW's customize style interface, optional matching moodboard.

LAST UPDATE 08/16/2024: Descriptive text over header navlinks.
08/15/2024: Control strip is toggleable on mobile view.
08/06/2024: Entry background fill even when entry is short.
08/02/2024: Moodboard background blur effect now applies on iOS.

INSTALLING THE THEME

Go to Your Layers. Under "Create a style-specific layer", select Type: Theme and Style: Snakes & Boxes. Click "Create."

Your new blank theme is under your layers list. Click "Edit" under Actions. Make sure you're clicking the right item (the Type should be "theme" and the Name is "(none)").

Delete everything in the main window (i.e. it has layerinfo "type" = "theme"; in it). Paste in the text below. Click "Save & Compile" on top.

layerinfo type = "theme"; layerinfo name = "Singularities"; layerinfo redist_uniq = "snakesandboxes/singularities"; layerinfo "author_name" = "baisemain"; set theme_authors = [ { "name" => "baisemain", "type" => "user" } ]; ##=============================== ## Page Colors ##=============================== set color_calendar_border = "#41424d"; set color_elements_background = "#15161a"; set color_elements_border = "#41424d"; set color_elements_text = "#ffffff"; set color_footer_background = "#15161a"; set color_footer_link = "#ef233c"; set color_footer_link_hover = "#d90429"; set color_footer_link_visited = "#ef233c"; set color_header_background = "#15161a"; set color_page_background = "#090a0b"; set color_page_border = "#41424d"; set color_page_link = "#ef233c"; set color_page_link_hover = "#d90429"; set color_page_link_visited = "#ef233c"; set color_page_text = "#ffffff"; set color_page_title = "#ffffff"; ##=============================== ## Entry Colors ##=============================== set color_comment_title = "#ffffff"; set color_entry_accent = "#41424d"; set color_entry_background = "#15161a"; set color_entry_border = "#41424d"; set color_entry_link = "#ef233c"; set color_entry_link_hover = "#d90429"; set color_entry_link_visited = "#ef233c"; set color_entry_text = "#ffffff"; set color_entry_userpic_border = "#15161a"; ##=============================== ## Module Colors ##=============================== set color_module_background = "#15161a"; set color_module_border = "#41424d"; set color_module_calendar_border = "#41424d"; set color_module_calendar_link = "#ef233c"; set color_module_calendar_link_background = "#090a0b"; set color_module_link = "#ef233c"; set color_module_link_hover = "#d90429"; set color_module_link_visited = "#ef233c"; set color_module_text = "#ffffff"; set color_module_title = "#ffffff"; ##=============================== ## Control Strip Colors ##=============================== set control_strip_bgcolor = "#090a0b"; set control_strip_bordercolor = "#41424d"; set control_strip_fgcolor = "#ffffff"; set control_strip_linkcolor = "#d90429"; set custom_control_strip_colors = "on_no_gradient"; ##=============================== ## Other Options ##=============================== set all_entrysubjects = true; set entry_date_format = "med_day"; set entry_userpic_style = "small"; set font_base = "'Noto Sans'"; set font_base_size = "0.9"; set font_base_units = "em"; set font_comment_title = "'Josefin Sans'"; set font_comment_title_size = "1.3"; set font_entry_title = "'Josefin Sans'"; set font_entry_title_size = "1.3"; set font_journal_title = "'Josefin Sans'"; set font_journal_title_size = "1.3"; set font_journal_subtitle_size = "0.8"; set font_module_heading = "'Josefin Sans'"; set font_module_heading_size = "1.3"; set font_module_text_size = "0.9"; set font_module_text_units = "em"; set font_sources = "https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Noto+Sans"; set image_background_page_position = "top left"; set image_background_page_repeat = "repeat"; set image_background_page_url = "https://i.imgur.com/EerXZXB.png"; set layout_type = "two-columns-left"; set margins_size = ""; set module_active_show = false; set module_calendar_order = 5; set module_calendar_show = true; set module_credit_show = true; set module_customtext_order = 0; set module_customtext_show = true; set module_cuttagcontrols_order = 0; set module_cuttagcontrols_section = "two"; set module_cuttagcontrols_show = false; set module_links_order = 2; set module_links_show = true; set module_navlinks_order = 3; set module_navlinks_section_override = "one"; set module_navlinks_show = true; set module_pagesummary_opts_comments_tooltip = true; set module_pagesummary_show = true; set module_poweredby_show = false; set module_search_show = true; set module_syndicate_order = 6; set module_syndicate_show = false; set module_tags_opts_limit = 0; set module_tags_opts_type = "multi"; set module_tags_order = 4; set module_tags_show = true; set module_time_show = false; set module_userprofile_opts_name = true; set module_userprofile_opts_userpic = true; set module_userprofile_opts_website = true; set module_userprofile_show = false; set sidebar_width = "20em"; set sidebar_width_doubled = "40em"; set userpics_position = "right"; ##=============================== ## Text Options ##=============================== set text_comment_from = ""; set text_posting_in = ""; set text_stickyentry_subject = ""; ##=============================== ## Customized Elements ##=============================== # Fix breakpoints so they don't overlap. function generate_media_query(string user_breakpoint, int sidebar_width_multiplier, string default_break_width, string min_or_max): string { # use the user-provided breakpoint width var string break_width = $user_breakpoint; # no user-provided breakpoint width, base our break_width as a multiplier on the sidebar width if ($break_width == "" and $*sidebar_width != "") { # set the min width in ems $break_width = $*sidebar_width->css_multiply_length($sidebar_width_multiplier); } # $*sidebar_width wasn't in a format we expected, fall back to a default if ($break_width == "") { $break_width = $default_break_width; } if ($min_or_max == "max") { $break_width = "calc($break_width - 0.01em)"; } return "only screen and ($min_or_max-width: $break_width)"; } # Prints header. Add navlinks to header. function Page::print_header() { """<div class="header-container">\n"""; """<div class="header-title">\n"""; ## """<div class="header-image"></div>\n"""; """<div class="header-text">\n"""; $this->print_global_title(); $this->print_global_subtitle(); $this->print_title(); """</div>\n"""; """</div>\n"""; """<div class="nav-links">\n"""; print_module_navlinks(); """</div>\n"""; ## """<div class="header-links">\n"""; ## $this->print_linklist(); ## """</div>\n"""; """</div>\n"""; } function Page::print_linklist() { if (size $.linklist <= 0) { return; } elseif (not $*linklist_support) { return; } "<ul class='linklist'>"; foreach var UserLink l ($.linklist) { if ($l.title) { if ($l.is_heading) { "<li class='heading'>$l.title</li>"; } else { "<li class='link'><a href='$l.url'><span>$l.title</span></a></li>"; } } } "</ul>"; } # Prints entry. Put userpic and poster in their own block, move it over header. Puts rest of entry in its own block. function Page::print_entry(Entry e) { $e->print_wrapper_start(); """<div class="userpic-block">\n"""; $e->print_userpic(); $e->print_poster(); """</div>\n"""; """<div class="main-body">\n"""; """<div class="header">\n"""; """<div class="inner">\n"""; $e->print_subject(); $e->print_metatypes(); $e->print_time(); """</div>\n"""; """</div>\n"""; """<div>\n"""; """<div class="contents">\n"""; """<div class="inner">\n"""; if ($*entry_metadata_position == "top") { $e->print_metadata(); } $e->print_text(); if ($*entry_metadata_position == "bottom") { $e->print_metadata(); } """</div>\n"""; """</div>\n"""; """</div>\n"""; """<div class="footer">\n"""; """<div class="inner">\n"""; $e->print_tags(); """<div class="entry-links">\n"""; $this->print_entry_footer($e); "</div>\n</div>\n</div>\n</div>\n"; $e->print_wrapper_end(); } # Prints the name of the account which posted the entry function Entry::print_poster { var Page p = get_page(); var string emptyclass = ((($p isa RecentPage and not $p isa FriendsPage) or $p isa MonthPage or $p isa DayPage) and $p.journal.journal_type != "C") ? "empty" : ""; print safe "<span class=\"poster entry-poster $emptyclass\">"; print safe "<span class=\"username\">"; if ($p isa FriendsPage or $p isa EntryPage or $p isa ReplyPage) { $this.poster->print(); if (not $this.poster->equals($this.journal)) { print $*text_posting_in; $this.journal->print(); } print safe "</span>"; if ($this.poster.username != $this.poster.name) { print safe "<span class='display-name'>" + $this.poster.name + "</span>"; } } else { if (not $this.poster->equals($this.journal)) { $this.poster->print(); print safe "</span>"; if ($this.poster.username != $this.poster.name) { print safe "<span class='display-name'>" + $this.poster.name + "</span>"; } } } print safe "</span>"; } # For any given comment, print the commentor's name (local, anonymous, or openid) function Comment::print_poster() { var string poster = defined $this.poster ? $this.poster->as_string() : "<span class=\"anonymous\">$*text_poster_anonymous</span>"; if ($this.metadata{"imported_from"}) { $poster = "<span class=\"imported-from\">$poster ($*text_openid_from " + $this.metadata{"imported_from"} + ")</span>"; } print safe "<span class=\"poster comment-poster\"><span class=\"comment-from-text\">$*text_comment_from</span> $poster"; if ( $this.admin_post ) { """ <span class="admin-poster">("""; $this->print_admin_post_icon(); print $*text_admin_post_note; """)</span>"""; } if ($this.poster.username != $this.poster.name) { print safe "<span class='display-name'>" + $this.poster.name + "</span>"; } """</span>\n"""; } function ReplyPage::print_comment (Comment c) { # ReplyPage and EntryPage work nicest if they output the same structure for printing comments and entries. # Note that there is no multiform check on the ReplyPage. $c->print_wrapper_start(); """<div class="header">\n"""; """<div class="inner">\n"""; $c->print_userpic(); """<div class="comment-info">\n"""; $c->print_subject(); """<div class="poster-information">\n"""; $c->print_poster(); $c->print_metadata(); """</div>\n"""; $c->print_metatypes(); $c->print_time(); """</div>\n"""; """</div>\n"""; """</div>\n"""; """<div class="contents">\n"""; """<div class="inner">\n"""; $c->print_text(); """</div>\n"""; """</div>\n"""; """<div class="footer">\n"""; """<div class="inner">\n"""; $c->print_management_links(); $c->print_interaction_links(); $c->print_reply_container(); "</div>\n</div>\n"; $c->print_wrapper_end(); } function EntryPage::print_comment_section(Entry e) { "<div id='comments'><div class='inner'>"; $.comment_pages->print({ "anchor" => "comments", "class" => "comment-pages toppages" }); if ( $e.comments.comments_disabled_maintainer ) { """<div class='comments-message'>$*text_comments_disabled_maintainer</div>"""; } if ($.comment_pages.total_subitems > 0) { $.comment_nav->print({ "class" => "comment-pages toppages" }); $this->print_multiform_start(); } $this->print_comments($.comments); if ($.comment_pages.total_subitems > 0) { "<div class='bottomcomment'>"; $e->print_management_links(); $e->print_interaction_links("bottomcomment"); "<div class='replycontainer'>"; $this->print_reply_container({ "target" => "bottomcomment" }); $this->print_multiform_actionline(); $this->print_multiform_end(); "</div>"; "</div>"; } $.comment_pages->print({ "anchor" => "comments", "class" => "comment-pages bottompages" }); if ($.comment_pages.total_subitems > 0) { $.comment_nav->print({ "class" => "comment-pages bottompages" }); } "</div></div>"; } function EntryPage::print_comment (Comment c) { # ReplyPage and EntryPage work nicest if they output the same structure for printing comments and entries. $c->print_wrapper_start(); """<div class="header">\n"""; """<div class="inner">\n"""; $c->print_userpic(); """<div class="comment-info">\n"""; $c->print_depth_indicator(); $c->print_subject(); $c->print_poster(); $c->print_metadata(); $c->print_metatypes(); $c->print_time(); if ($this.multiform_on) { """<div class="multiform-checkbox">"""; print safe " <label for='ljcomsel_$c.talkid'>$*text_multiform_check</label> "; $c->print_multiform_check(); "</div>"; } if ( $c.comment_posted ) { print safe "<div class='comment-posted'>$*text_comment_posted</div>"; } """</div>\n"""; """</div>\n"""; """</div>\n"""; """<div class="contents">\n"""; """<div class="inner">\n"""; $c->print_text(); """</div>\n"""; """</div>\n"""; """<div class="footer">\n"""; """<div class="inner">\n"""; $c->print_management_links(); $c->print_interaction_links(); "<div class='replycontainer'>"; $c->print_reply_container(); "</div>\n</div>\n</div>\n"; $c->print_wrapper_end(); } ##=============================== ## Stylesheet ##=============================== function print_stylesheet () { var string small_media_query = generate_small_media_query(); var string medium_media_query = generate_medium_media_query(); var string large_media_query = generate_large_media_query(); var string entry_background = generate_background_css ($*image_background_entry_url, $*image_background_entry_repeat, $*image_background_entry_position, $*color_entry_background); var string entry_colors = generate_color_css($*color_entry_text, $*color_entry_background, $*color_entry_border); var string entry_title_font = generate_font_css($*font_entry_title, $*font_base, $*font_fallback, $*font_entry_title_size, $*font_entry_title_units); var string module_title_font = generate_font_css($*font_module_heading, $*font_base, $*font_fallback, $*font_module_heading_size, $*font_module_heading_units); var string elements_colors = generate_color_css($*color_elements_text, $*color_elements_background, $*color_elements_border); var string entry_margin = ""; if ( $*entry_userpic_style == "" ) { $entry_margin = "155px"; } elseif ( $*entry_userpic_style == "small" ) { $entry_margin = "130px"; } elseif ( $*entry_userpic_style == "smaller" ) { $entry_margin = "105px"; } var string comment_margin = ""; if ( $*comment_userpic_style == "" ) { $comment_margin = "155px"; } elseif ( $*comment_userpic_style == "small" ) { $comment_margin = "130px"; } elseif ( $*comment_userpic_style == "smaller" ) { $comment_margin = "105px"; } var string userpic_css = ""; if($*poster_position == "left") { $userpic_css = """ @media $medium_media_query { .userpic-block { width: $entry_margin; flex: 0 0 $entry_margin; } .entry-content, .top-metadata, .page-reply .comment-content { clear: right; } } """; } elseif($*poster_position == "right") { $userpic_css = """ @media $medium_media_query { .entry > .inner { flex-direction: row-reverse; } .userpic-block { width: $entry_margin; flex: 0 0 $entry_margin; } .entry-content, .top-metadata, .page-reply .comment-content { clear: left; } } """; } """ /* Snakes & Boxes by pari /* Singularity by baisemain ******************************/ /* Fonts ******************************/ /* fallback */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 400; src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v153/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOej.woff2) format('woff2'); } /* latin-ext */ @font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400; font-stretch: 100%; src: url(https://fonts.gstatic.com/s/inconsolata/v32/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WRP2l2eY.woff2) format('woff2'); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Inconsolata'; font-style: normal; font-weight: 400; font-stretch: 100%; src: url(https://fonts.gstatic.com/s/inconsolata/v32/QldgNThLqRwH-OJ1UHjlKENVzkWGVkL3GZQmAwLYxYWI2qfdm7Lpp4U8WR32lw.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* Columns ******************************/ .multiple-columns #primary, .multiple-columns #secondary, .multiple-columns #tertiary { margin-left: 0; margin-right: 0; } #invisible-separator { display: none; } @media $medium_media_query { .multiple-columns #content { border-left: 0; border-right: 0; } .multiple-columns #content > .inner { display: grid; grid-template-rows: [content-start] auto [content-end footer-start] auto [footer-end]; } .two-columns-left #content > .inner { grid-template-columns: [sidebar1-start] $*sidebar_width [sidebar1-end content-start] auto [content-end]; } .two-columns-right #content > .inner { grid-template-columns: [content-start] auto [content-end sidebar1-start] $*sidebar_width [sidebar1-end]; } .three-columns-sides #content > .inner { grid-template-columns: [sidebar1-start] $*sidebar_width [sidebar1-end content-start] auto [content-end sidebar2-start] $*sidebar_width [sidebar2-end]; } .three-columns-left #content > .inner { grid-template-columns: [sidebar1-start] $*sidebar_width [sidebar1-end sidebar2-start] $*sidebar_width [sidebar2-end content-start] auto [content-end]; } .three-columns-right #content > .inner { grid-template-columns: [content-start] auto [content-end sidebar1-start] $*sidebar_width [sidebar1-end sidebar2-start] $*sidebar_width [sidebar2-end]; } #content > .inner > #primary { grid-row: content-start / content-end; grid-column: content-start / content-end; } #content > .inner > #secondary { grid-row: content-start / content-end; grid-column: sidebar1-start / sidebar1-end; } .two-columns-left #content > .inner > #tertiary, .two-columns-right #content > .inner > #tertiary { grid-row: footer-start / footer-end; grid-column: 1/-1; } .three-columns-sides #content > .inner > #tertiary, .three-columns-left #content > .inner > #tertiary, .three-columns-right #content > .inner > #tertiary { grid-row: content-start / content-end; grid-column: sidebar2-start / sidebar2-end; } } /* Main ******************************/ :root { --border-width: 1px; --entry-width: 600px; --entry-gap: 2.5em; --icon-font: 'Material Symbols Outlined'; } body { margin: 0; border: 0; } hr { border: .1em solid; height: .1em; } a { text-decoration: none; transition: all 0.5s; } h1, h2, h3, h4 { font-weight: normal; } p { margin: 0; margin-bottom: 1.25rem; } .entry > .inner { border: 0; } @media $medium_media_query { .entry > .inner { display: flex; justify-content: center; } .entry .main-body { flex: 0 1 var(--entry-width); } } /* Make sure content isn't bigger than container */ pre { white-space: pre-line; word-wrap: break-word; } blockquote { border: 1px dotted $*color_elements_border; margin: 1.25em; padding: 0.5rem 1.25rem; } input, select, textarea { $elements_colors padding: .5em; border-radius: 10px; } input, select { padding: .1em .5em; } ul, ol, dl { padding: 0; margin-bottom: 1.25rem; } ul, ol { margin-left: 3rem; } dl dt { margin-bottom: 0.3rem; font-weight: bold; } dl dd { margin-left: 1.5em; margin-bottom: 0.75rem; } .entry-content ul li, .comment-content ul li { list-style-type: circle; } .entry-content li, .comment-content li { list-style-position: outside; } /* Control Strip ******************************/ #lj_controlstrip { justify-content: center; } #lj_controlstrip > div { flex-grow: 0; } #lj_controlstrip_userpic a img { border-radius: 50%; margin: 5px 0 5px 5px; } #lj_controlstrip_search { border-right: 0; } #lj_controlstrip input { border-radius: 10px; padding: 0 8px; border: 1px solid $*color_entry_border; background-color: $*color_entry_background !important; color: $*color_entry_text; } #lj_controlstrip select { border-radius: 10px; padding: 1.5px 4px; border: 1px solid $*color_entry_border; background-color: $*color_entry_background !important; color: $*color_entry_text; } @media $small_media_query { #lj_controlstrip { position: absolute; transform: translateY(-100%); transition: transform 0.7s; z-index: 10; gap: 10px 0; } #lj_controlstrip:before { content: ''; position: absolute; bottom: -41px; height: 40px; width: 40px; right: 0; } #lj_controlstrip:after { content: 'settings'; position: absolute; bottom: -41px; height: 40px; width: 40px; right: 0; cursor: pointer; font-family: var(--icon-font); font-size: 22px; line-height: 40px; text-align: center; color: $*color_entry_link; background: $*color_entry_background; background-clip: padding-box; border-radius: 0 0 50% 50%; } #lj_controlstrip:hover { transform: translateY(0); } #lj_controlstrip > div { border: 0; } } /* Header ******************************/ #header { margin: 0 0 1em; padding: 0.5em 1em; border-bottom: var(--border-width) solid $*color_page_border; text-align: center; } @media $medium_media_query { #header { position: sticky; top: -1px; z-index: 1000; } #header .header-container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } } h1#title, h2#pagetitle, h2#subtitle { display: inline-block; margin: 0.25rem; } h2#pagetitle, h2#subtitle { color: $*color_page_title; } h1#title a { color: $*color_page_title; } #header .nav-links .module { width: auto; } #header .nav-links .module-navlinks, #header .nav-links .module-navlinks .module-content { background-color: transparent; border: 0; margin: 0; padding: 0; } #header .nav-links .module-navlinks ul { line-height: 1; } #header .nav-links .module-navlinks li { display: inline-block; position: relative; margin: 0; padding: 5px; width: 22px; height: 22px; # overflow: hidden; # border-radius: 50%; font-size: 0; } #header .nav-links .module-navlinks li a:before { # float: left; font-family: var(--icon-font); font-size: 22px; # vertical-align: middle; height: 22px; width: 22px; line-height: 22px; # margin-right: 0.25em; # padding-bottom: 1em; # color: $*color_module_link; transition: color 0.4s ease; } #header li.list-item-recent a:before { content: "home"; } #header li.list-item-archive a:before { content: "date_range"; } #header li.list-item-read a:before { content: "local_library"; } #header li.list-item-tags a:before { content: "sell"; } #header li.list-item-network a:before { content: "globe"; } #header li.list-item-memories a:before { content: "favorite"; } #header li.list-item-userinfo a:before { content: "account_circle"; } #header .nav-links .module-navlinks li a:after { padding: 0 1em; position: absolute; right: 0; bottom: -22px; background-color: $*color_module_background; border: 1px solid $*color_module_border; color: $*color_module_link; $module_title_font; font-size: 12px; line-height: 22px; white-space: nowrap; z-index: 100; display: none; } #header .nav-links .module-navlinks li:hover a:after { display: block; animation: appear 0.5s forwards; } #header li.list-item-recent a:after { content: "Recent Entries"; } #header li.list-item-archive a:after { content: "Archive"; } #header li.list-item-read a:after { content: "Reading"; } #header li.list-item-tags a:after { content: "Tags"; } #header li.list-item-network a:after { content: "Network"; } #header li.list-item-memories a:after { content: "Memories"; } #header li.list-item-userinfo a:after { content: "Profile"; } @keyframes appear { from { opacity: 0; } to { opacity: 1; transform: translateX(-16px); } } /* Containers ******************************/ #canvas { margin: 0; } #primary > .inner:first-child { padding: 0 1em; } #secondary > .inner:first-child, #tertiary > .inner:first-child { padding: 0; } .two-columns-left #secondary, .three-columns-sides #secondary { float: none; margin-left: 0; } /* Navigation ******************************/ .navigation { $entry_colors padding: 1em; margin: 0; } .navigation.bottomnav { margin-bottom: 70px; } .page-archive .navigation, .page-month .navigation { margin: 0 0 1em; } .page-archive .bottomnav, .page-month .bottomnav { margin-top: 1em; } .navigation a { color: $*color_entry_link; } .navigation a:visited { color: $*color_entry_link_visited; } .navigation a:hover { color: $*color_entry_link_hover; } .navigation a:active { color: $*color_entry_link_active; } .navigation ul { list-style: none; margin: 0; padding: 0; display: flex; justify-content: space-between; } .page-archive .navigation ul, .page-month .navigation ul { text-align: center; justify-content: center; gap: 1em; } .navigation li { padding: 0; } .navigation .page-back a:before, .navigation .page-forward a:after { padding: .2em; } .navigation.empty, li.page-separator { display: none; } .noentries { margin: 0; padding: 0.5em; text-align: center; } /* Entries & Reply to Comment ******************************/ .entry-wrapper { margin: 1em 0; } .entry { background: none; border: 0; margin: 0 auto var(--entry-gap); max-width: var(--entry-width); } @media $medium_media_query { .entry { max-width: none; } } .entry .header, .entry-content, .metadata, .entry .footer { $entry_background $entry_colors border: 0; } .entry .header, .page-reply .comment .header { border-bottom: var(--border-width) solid $*color_entry_border; background-color: $*color_entry_title_background; color: $*color_entry_title; } .entry .header a, .page-reply .comment .header a { color: $*color_entry_title; } @media $medium_media_query { .entry .header, .page-reply .comment .header { border: 0; border-bottom: var(--border-width) solid $*color_entry_border; } } .entry .header .inner, .page-reply .comment .header .inner { padding: 1em; } .entry .entry-title { margin: 0; padding: 0; } .entry .datetime { font-size: 0.75em; letter-spacing: 1px; color: $*color_entry_accent; } .entry .datetime a { color: $*color_entry_accent; } .entry .time, .entry .date { display: inline-block; padding: .2em 0; } .userpic a { display: block; line-height: 0; } @media $small_media_query { .entry .userpic-block { display: grid; grid-template-columns: calc($entry_margin - 35px + 2px) 1fr; margin-top: var(--entry-gap); } .entry .userpic-block .userpic { background-color: $*color_entry_background; border: var(--border-width) solid $*color_entry_border; border-bottom: 0; } .entry .userpic-block .userpic:empty { display: none; } .entry .userpic-block .userpic img { padding: 10px 10px; } .entry .userpic-block .entry-poster { display: grid; align-content: end; } .entry .userpic-block .entry-poster .username > span { border-bottom: var(--border-width) solid $*color_entry_border; } .entry .userpic-block .entry-poster .username > span, .entry .userpic-block .entry-poster .display-name { display: inline-block; padding: 10px; padding-right: 15px; width: fit-content; font-size: 0.8em; background-color: $*color_entry_background; border: var(--border-width) solid $*color_entry_border; margin-bottom: calc(var(--border-width) * -1); margin-left: calc(var(--border-width) * -1); } .entry .userpic-block .entry-poster .username > span:before, .entry .userpic-block .entry-poster .display-name:before { font-family: var(--icon-font); font-size: 22px; vertical-align: middle; height: 22px; width: 22px; line-height: 22px; margin-right: 0.25em; color: $*color_entry_accent; } .entry .userpic-block .entry-poster .username > span:first-child:before { content: "person"; } .entry .userpic-block .entry-poster .username > span:nth-child(2):before { content: "communities"; } .entry .userpic-block .entry-poster .display-name:before { content: "signature"; } } @media $medium_media_query { .has-userpic .entry .userpic, .page-reply .has-userpic .comment .userpic { text-align: center; } .entry .userpic img, .page-reply .comment .userpic img { border: var(--border-width) solid $*color_entry_border; background-color: $*color_entry_userpic_border; padding: 10px; margin-bottom: 2px; } .entry .poster, .page-reply .comment .poster { color: $*color_page_text; display: block; margin-top: 0.5em; text-align: center; font-size: 0.8em; } .entry .poster span, .page-reply .comment .poster span { display: block; margin: 0.5em; } } /* Force username to break */ .entry .poster a + a, .page-reply .comment .poster a + a { color: $*color_page_link; white-space: pre-line; word-wrap: break-word; } .entry .poster a:visited, .page-reply .comment .poster a:visited { color: $*color_page_link_visited; } .entry .poster a:hover, .page-reply .comment .poster a:hover { color: $*color_page_link_hover; } .entry .poster a:active, .page-reply .comment .poster a:active { color: $*color_page_link_active; } .entry .poster-empty { display: none; } $userpic_css .entry .main-body { background-color: $*color_entry_background; border: var(--border-width) solid $*color_entry_border; box-sizing: border-box; } .entry-content { padding: 1em; line-height: 1.5; overflow: auto; } .entry-content * { max-width: 100%; } .metadata { margin: 0; padding: 0; font-size: 0.8em; } .metadata ul { margin: 0; padding: 0; display: flex; flex-wrap: wrap; border: 0 !important; } .metadata.top-metadata { margin-bottom: 0; } .metadata li { flex: 1 1 100px; } .metadata.top-metadata li { border-bottom: var(--border-width) solid $*color_entry_border; } .metadata.bottom-metadata li { border-top: var(--border-width) solid $*color_entry_border; } .metadata li { margin-bottom: 0; padding: 0.5em 1em; display: flex; align-items: center; gap: 0.5em; } .metadata li span.metadata-item a { overflow-wrap: anywhere; } .metadata li span.metadata-label { display: inline-block; position: relative; width: 22px; height: 22px; font-size: 0; } .metadata li span.metadata-label:before { font-family: var(--icon-font); font-size: 22px; vertical-align: middle; height: 22px; width: 22px; line-height: 22px; margin-right: 0.25em; padding-bottom: 1em; color: $*color_entry_accent; } .metadata li span.metadata-label-groups:before { content: "group"; } .metadata li span.metadata-label-mood:before { content: "sentiment_content"; } .metadata li span.metadata-label-location:before { content: "location_on"; } .metadata li span.metadata-label-music:before { content: "volume_up"; } .metadata li span.metadata-label-xpost:before { content: "local_post_office"; } .entry .footer, .page-reply .comment .footer { border-top: var(--border-width) solid $*color_entry_border; padding: 0; font-size: 0.8em; } .entry .footer .entry-links { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding: 1em 1em; } @media $medium_media_query { .entry .footer, .page-reply .comment .footer { border: 0; border-top: var(--border-width) solid $*color_entry_border; } } .tag { margin: 0; padding: 0.5em 1em; border-bottom: var(--border-width) solid $*color_entry_border; display: flex; align-items: center; gap: 0.5em; } .tag .tag-text { display: block; width: 22px; height: 22px; padding-right: 0.5em; font-size: 0; } .tag .tag-text:before { font-family: var(--icon-font); font-size: 22px; vertical-align: middle; height: 22px; width: 22px; line-height: 22px; margin-right: 0.25em; padding-bottom: 1em; color: $*color_entry_accent; content: "label"; } .tag ul { margin: 0; padding: 0; } .tag li { padding: 0; } ul.entry-management-links, ul.entry-interaction-links { display: inline; margin: 0; padding: 0; flex: 50%; } .entry .footer a { white-space: nowrap; } hr.above-entry-interaction-links, hr.below-reply-container { display: none; } /* Comments ******************************/ #comments { max-width: 72em; margin: 0 auto; } .comment-wrapper { margin: 1em 0; padding: 0; } .comment { background: none; margin-top: 0; min-width: 28em; } @media $small_media_query { #comments .comment { min-width: 75vw; } } .comment .header, .comment .contents, .partial { $entry_background $entry_colors } .comment .comment-info { padding: 0.5em; display: flex; flex-wrap: wrap; align-content: center; align-items: flex-end; gap: 0 1em; } .comment-info .datetime, .comment-info .poster-ip, .comment-info .commentpermalink, .comment-info .multiform-checkbox { font-size: 0.8em; color: $*color_entry_accent; } .comment .comment-info .comment-title { min-height: 1.4em; width: 100%; } .comment .comment-info .comment-poster { width: 100%; } .comment .comment-info .comment-poster .display-name { margin: 0 1em; padding: 0 8px; border: 1px solid $*color_entry_accent; border-radius: 10px; font-size: 0.8em; -webkit-box-decoration-break: clone; box-decoration-break: clone; } .comment .contents { border-top: 0; } .comment .comment-content { border: 0; } .comment .comment-content:not(:empty) { padding: 1em; } .partial { margin: 0.5em 0; padding: 0.5em; display: inline-block; } .comment a, .partial a { color: $*color_entry_link; } .comment a:visited, .partial a:visited { color: $*color_entry_link_visited; } .comment a:hover, .partial a:hover { color: $*color_entry_link_hover; } .comment a:active, .partial a:active { color: $*color_entry_link_active; } .comment .header, .comment .poster, .comment .comment-title > a, .comment .comment-title > a:visited { color: $*color_comment_title; } .page-entry .comment .header > .inner { display: flex; } .comment .datetime { display: inline; margin: 4px 0 0; } .partial .comment-title, .partial .comment-poster, .partial .datetime { border: none; display: inline; margin: 0; padding: 0; font-size: 1em; } .partial .comment-poster::before { content: " - "; } .partial .comment-poster .display-name { display: none; } .poster-ip { display: block; } .edittime { padding-top: 1em; color: $*color_entry_accent; } .comment .footer { padding: 0.5em; } ul.comment-management-links, ul.comment-interaction-links { display: inline; margin: 0; padding: 0; text-shadow: 1px 1px 1px rgba(0 0 0/0.5); } .bottomcomment { $entry_background $entry_colors padding: 1em; margin-top: 1em; display: flex; flex-wrap: wrap; justify-content: space-between; } .bottomcomment a { color: $*color_entry_link; } .bottomcomment a:visited { color: $*color_entry_link_visited; } .bottomcomment a:hover { color: $*color_entry_link_hover; } .bottomcomment a:active { color: $*color_entry_link_active; } .comment-pages.toppages, .comment-pages.bottompages { margin: 1em 0; text-align: center; text-shadow: 1px 1px 1px rgba(0 0 0/0.5); } .comment-pages.toppages > b, .comment-pages.bottompages > b { display: block; } /* Reply Forms ******************************/ #qrform { padding: .5em 0 0; } #qrform table { margin: 0 1.5em 0; padding: .5em 1em 1em; } #qrform td:first-child { padding: 0; } #qrform textarea.textbox { margin: .2em 0; width: 95% !important; /* !important needed */ } #qrform #subject { width: 97.2%; } #qrformdiv input, #qrformdiv button, #qrformdiv textarea { padding: 4px 8px; } #qrformdiv select { padding: 3px 6px; } #postform { $entry_background $entry_colors padding: 1em 2em; } .postform a { color: $*color_entry_link; } .postform a:visited { color: $*color_entry_link_visited; } .postform a:hover { color: $*color_entry_link_hover; } .postform a:active { color: $*color_entry_link_active; } #postform div#userpics { padding: .7em 0 .3em; } #postform textarea.textbox { margin-bottom: .7em; width: 95%; } #postform #subject { width: 96.5%; } /* Other Pages ******************************/ .month-wrapper { margin: 0 0 1em; } .month { $entry_background $entry_colors margin: 0 auto; padding: 1.5em 2em; width: var(--entry-width); max-width: 100%; box-sizing: border-box; } .month a { color: $*color_entry_link; } .month a:visited { color: $*color_entry_link_visited; } .month a:hover { color: $*color_entry_link_hover; } .month a:active { color: $*color_entry_link_active; } .month-wrapper h3 { $entry_title_font padding: .5em 0 .7em; text-align: center; } table.month { border: .1em solid $*color_calendar_border; margin: 0 auto; min-width: 70%; } .month caption { display: none; } table.month th, table.month td { border: .1em solid $*color_calendar_border; padding: .5em; } table.month th { font-weight: normal; text-align: center; } table.month td { height: auto; width: 14.285%; } table.month td p { display: inline; padding: 0 0 0 .5em; margin: 0; } .month .footer { $entry_title_font margin: .7em 0 0; text-align: center; } .page-month .month dl { margin: 1em 0; padding: 0; } .page-month .month dt { $entry_title_font } .page-month .month dt, .page-month .month dd { font-weight: normal; } .page-month .month h3 { font-weight: bold; } .page-month .month span { display: inline; } .page-month .month .time { padding: 0; font-size: 0.8em; } .page-month .month .entry-poster { margin: 0 0.5em; } .page-month .month .display-name { margin-left: 0.5em; padding: 2px 6px; font-size: 0.8em; border: 1px solid $*color_entry_border; display: none; } .page-month .month .entry-title { display: inline; margin: 0; padding: 0; } .page-month .month .tag { font-size: 0.8em; } .month .day-has-entries a { font-weight: 600 } h3.day-date { $entry_background $entry_colors $entry_title_font padding: 1em; } .tags-container { $entry_background $entry_colors margin: 0 auto 1em; padding: 1.5em 2em; width: var(--entry-width); max-width: 100%; box-sizing: border-box; } .tags-container a { color: $*color_entry_link; } .tags-container a:visited { color: $*color_entry_link_visited; } .tags-container a:hover { color: $*color_entry_link_hover; } .tags-container a:active { color: $*color_entry_link_active; } .tags-container h2 { $entry_title_font margin: 0 0 1em; padding: 0; } .tags-container ul { list-style: none; margin: 0 0 1em 2em; } .tags-container ul:first-child { padding: 0; } .tags-container .manage-link { margin-top: 1em; } .icons-container { $entry_background $entry_colors margin-bottom: 1em; padding: 1.5em 2em; } .icons-container a { color: $*color_entry_link; } .icons-container a:visited { color: $*color_entry_link_visited; } .icons-container a:hover { color: $*color_entry_link_hover; } .icons-container a:active { color: $*color_entry_link_active; } .icons-container .contents > .inner { display: flex; flex-wrap: wrap; } .icons-container h2 { $entry_title_font margin: 0 0 1em; padding: 0; } .sorting-options { flex-basis: 100%; } .sorting-options ul { padding-left: 0; } .icons-container .icon { margin: 1em 0; flex: 1 1 400px; } .icon-image { float: left; clear: left; margin-bottom: .25em; padding-right: 1em; min-width: 100px; } .icon-info { min-height: 100px; } .icon-info span { font-weight: bold; } .icon-info .default { text-decoration: underline; } .icons-container .manage-link { margin-top: 1em; } /* Footer ******************************/ #footer { width: 20px; height: 20px; margin: 20px auto; border: var(--border-width) solid $*color_page_border; } @media $medium_media_query { #footer { position: fixed; bottom: 0; right: 20px; } .column-right #footer { left: 20px; right: auto; } } #footer .page-top a { display: block; width: 20px; height: 20px; overflow: hidden; } #footer .page-top a:before { content: "arrow_upward"; display: block; font-family: var(--icon-font); font-size: 20px; vertical-align: middle; height: 20px; width: 20px; line-height: 20px; text-align: center; } /* Modules ******************************/ .module-wrapper { margin: 0 1em; } .module { margin: 0 auto 1em; width: var(--entry-width); max-width: 100%; box-sizing: border-box; } .module * { max-width: 100%; } .module .module-content { padding: 1em; } @media $medium_media_query { .two-columns #tertiary .module { margin-right: 1em; } } .module ul { list-style: none; padding: 0; } .module li { margin: 0; padding: 0; } .module ul:first-child { margin: 0; } h2.module-header { margin: 0; padding: 1em 0.5em 0; text-align: center; } .module .manage-link { margin-top: 1em; text-align: center; } .module-userprofile { text-align: center; } .module-userprofile ul { margin: .5em 0 0; } .journal-name { padding: .5em 0 0; } .module-navlinks { $module_title_font } .module-calendar table, .any-column .module-calendar table { margin: 0 auto; padding: 0; text-align: center; } .module-calendar th { border: .1em solid $*color_module_calendar_border; font-weight: normal; padding: .1em; } .module-calendar td { padding: .1em; } .module-calendar td.empty-day { border: .1em solid $*color_module_calendar_border; } .module-calendar td.entry-day { background-color: $*color_module_calendar_link_background; border: .1em solid transparent; } .module-calendar td.entry-day a { color: $*color_module_calendar_link; } .module-tags_multilevel .module-list-item span { /* hide detail-tagcount */ display: none; } .module-tags_multilevel .module-list-item .non-link-tag, .tags_multilevel span.non-link-tag { display: block; margin-bottom: 0.5em; } .module-tags_multilevel .module-list-item ul { margin-bottom: 0.5em; } .module-customtext .sidebar-image { background-position: center; background-size: cover; max-width: none; margin: -1em -1em; } .module-customtext .sidebar-text { margin-top: 2em; padding: 10px; border: 1px solid $*color_module_border; } .module-pagesummary li { margin-bottom: 0.5em; } .module-typelist ul.module-list { display: flex; flex-wrap: wrap; gap: 0.5em; } .module-typelist li.module-list-item { border: 1px solid $*color_module_border; text-align: center; align-content: center; flex: 1 1 40%; } .module-typelist li.module-list-item a { display: block; padding: .5em; font-weight: 600; transition: all 1s; } .module-typelist li.module-list-item a:hover { /*background-color: $*color_module_link; color: $*color_module_background;*/ letter-spacing: 1px; } /* Contextual Popups ******************************/ .ContextualPopup { background: $*color_entry_background; border: var(--border-width) solid $*color_entry_text; color: $*color_entry_text; font-size: 1em; } .ContextualPopup .Userpic { border: none; } .ContextualPopup .Relation { font-weight: normal; } .ContextualPopup a { color: $*color_entry_link_hover; } .ContextualPopup a:visited { color: $*color_entry_link_visited; } .ContextualPopup a:hover { color: $*color_entry_link_active; } .ContextualPopup a:active { color: $*color_entry_link_active; } /* Splash Page ******************************/ .singularity-mood .mood-panel { z-index: 1; } .singularity-mood .mood-panel:hover { z-index: 100; } .singularity-mood .mood-panel .links a { transition: all 1s; } .singularity-mood * { scrollbar-width: thin; scrollbar-color: #FFFFFF transparent; } .singularity-mood *::-webkit-scrollbar { width: 4px; } .singularity-mood *::-webkit-scrollbar-track { background: transparent; } .singularity-mood *::-webkit-scrollbar-thumb { background-color: #FFFFFF; border-radius: 10px; border: 1px solid transparent; } """; } ##=============================== ## Custom CSS ##=============================== set custom_css = "/* BACKGROUND IMAGE */ body { /* don't scroll background image */ /* background-attachment: fixed; */ /* stretch to fit background image to window */ /* background-size: cover; */ } /* MODULES */ .module-customtext h2.module-header { display: none; /* hide customtext title */ } .module-typelist h2.module-header { display: none; /* hide link list title */ } /* HIDDEN ELEMENTS */ #lj_controlstrip .ljuser img, .entry-poster img, .pagesummary-poster img, .pagesummary-community img, .comment-poster img, .module-credit img { display: none; /* hide username icons */ } h2#pagetitle { display: none; /* hide page titles */ } #entries .navigation.topnav { display: none; /* hide top navigation bar */ } .page-recent .entry-links .entry-management-links, .page-read .entry-links .entry-management-links { display: none; /* hide entry management links */ } .page-recent .userpic-block { /* uncomment below to hide icons on recent page */ /* display: none; */ } /* STICKY ENTRY -- HIDDEN HEADER/FOOTER */ .entry-wrapper > .sticky-entry .header, .entry-wrapper > .sticky-entry .footer { display: none; } /* MOODBOARD */ .singularity-mood .mood-panel .links a:hover { color: #000 !important; /* link hover color */ background-color: #FFF !important; /* link hover bgcolor */ } ";

Go to Your Custom Layers under Select Style. Find the theme called "Singularities" and click "Apply Theme." (Select/Customize Style is also where you can set your Journal Title and Journal Subtitle, if you haven't done that yet.)

CUSTOMIZING YOUR LAYOUT

To add the custom sidebar header: go to Text under Customize Style. Find Text for the 'Custom Text' box, paste in one of the codes below, and click "Save Changes." Replace SIDEBAR_IMG_URL with the url of your image, and adjust 220px for the default height of the image.

IMAGE AND TEXT
<div class="sidebar-image" style="background-image:url(SIDEBAR_IMG_URL); height:220px;"></div><div class="sidebar-text">Himenaeos vivamus maecenas ex ultricies gravida quam donec. Tincidunt magnis ac eleifend quis nunc platea litora finibus.</div>

IMAGE ONLY
<div class="sidebar-image" style="background-image:url(SIDEBAR_IMG_URL); height:220px;"></div>

TEXT ONLY
<div class="sidebar-text" style="margin:0">Himenaeos vivamus maecenas ex ultricies gravida quam donec. Tincidunt magnis ac eleifend quis nunc platea litora finibus.</div>
To customize your layout:
- Change the page setup to 2 Columns (sidebar on the right) if you'd prefer the sidebar on the right side. Find Place of icons in entries and comments if you want to move the icons to the left of the entries.
- Add links for the sidebar.
- Edit the colours (and edit the navstrip colours).
- Add/change background image(s). If you don't like the background image texture, just delete the url in "Background image." The Custom CSS features optional code if you want to stretch your body background image to fit or fix it in place; just delete the /* and */ on those lines to use it. For other background textures, check out Transparent Textures.
- Show/hide sidebar modules and rearrange the order. You DON'T have to keep the "Style Credit" module. :)
- Change fonts. By default, this layout uses "Noto Sans" (header) and "Josefin Sans" (main) but you can swap those out in the embedded fonts stylesheet URL. You can change font sizes here too.
- A few things you might also want to do:
  - Disable customized comment pages: Go to Display Settings, scroll down to Entry Page Default: Your Journal and uncheck the box. Then go to Entry Pages: Shown to You and swap that over to "Site skin."
  - Disable the contextual hover over icons: Go to Display Settings, scroll down to Hover Menu and change the dropdown to "Nothing."
- There are a few other optional features in Custom CSS, which have been annotated. By default, the header and footer on sticky entries are hidden. If you hate this, find /* STICKY ENTRY -- HIDDEN HEADER/FOOTER */ in Custom CSS and remove the section below it.

OPTIONAL MOODBOARD NAV

Please note that the hover effects (the panels moving to the top, link buttons changing colour) will ONLY work when viewing this post in your layout. It'll still look really nice in the site skin, though!

Go to Post an Entry. Click Edit Date. Check Don't show on Reading Pages.

Paste the following code into the entry:
<lj-raw><div class="singularity-mood" style="width:500px;max-width:100%;min-height:300px;aspect-ratio:1/1;margin:20px auto;display:grid;grid-template-columns:5% repeat(6, 1fr);grid-template-rows:repeat(8,1fr);cursor:default;line-height:1;font-family:Inconsolata,monospace;font-size:clamp(9px, -0.25rem + 3vw, 11px);color:#FFF;">  <div class="mood-bg" style="grid-area:1/1/-1/-1;padding:3%;"><div style="height:100%;width:100%;background:linear-gradient(135deg, #c21431 0%, #250b37 100%);border-radius:40px;"></div></div>   <div class="mood-title" style="grid-area: -3/1/-1/-1;font-size:1.7em;display:flex;flex-direction:column;justify-content:center;font-style:italic;text-shadow:4px 4px 0 rgba(21,22,26,0.5);"> <span>TITLE_TEXT</span> <span>SUBTITLE_TEXT</span> </div>   <div class="mood-panel" style="grid-area:1/1/6/6;background:rgba(21,22,26,0.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #41424D;display:grid;grid-template-rows:24px 1fr 12px;"><div style="grid-row:1/2;border-bottom:1px solid #41424D;display:grid;align-content:center;text-align:center;overflow:hidden;"> IMAGE_1.PNG </div> <div style="grid-row:2/3;border-bottom:1px solid #41424D;background:url(IMAGE_1_URL) center/cover;"></div></div>   <div class="mood-panel" style="grid-area:5/5/9/8;background:rgba(21,22,26,0.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #41424D;display:grid;grid-template-rows:24px 1fr 12px;"><div style="grid-row:1/2;border-bottom:1px solid #41424D;display:grid;align-content:center;text-align:center;overflow:hidden;"> IMAGE_2.PNG </div> <div style="grid-row:2/3;border-bottom:1px solid #41424D;background:url(IMAGE_2_URL) center/cover;"></div></div>   <div class="mood-panel" style="grid-area:3/2/7/5;display:grid;grid-template-rows:24px 1fr 12px;"> <div style="grid-row:1/2;background:rgba(21,22,26,0.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #41424D;display:grid;align-content:center;text-align:center;overflow:hidden;"> NAVIGATION </div> <div class="links" style="grid-row:2/3;background:rgba(21,22,26,0.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #41424D;border-top:0;padding:10px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;letter-spacing:.25em;">  <a href="#" style="padding:10px;text-decoration:none;border:1px solid #41424D;color:#FFF;"> LINK 1 </a>   <a href="#" style="padding:10px;text-decoration:none;border:1px solid #41424D;color:#FFF;"> LINK 2 </a>   <a href="#" style="padding:10px;text-decoration:none;border:1px solid #41424D;color:#FFF;"> LINK 3 </a>   <a href="#" style="padding:10px;text-decoration:none;border:1px solid #41424D;color:#FFF;"> LINK 4 </a>   <a href="#" style="padding:10px;text-decoration:none;border:1px solid #41424D;color:#FFF;"> LINK 5 </a>  </div> <div style="grid-row:3/4;background:rgba(21,22,26,0.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #41424D;border-top:0;"></div> </div>   <div class="mood-panel" style="grid-area:2/4/8/7;background:rgba(21,22,26,0.5);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);border:1px solid #41424D;display:grid;grid-template-rows:24px 2fr 3fr 12px;"> <div style="grid-row:1/2;border-bottom:1px solid #41424D;display:grid;align-content:center;text-align:center;overflow:hidden;"> ABOUT_ME.MP4 </div> <div style="grid-row:2/3;border-bottom:1px solid #41424D;display:grid;align-content:center;justify-content:center;background:url(BLURB_IMAGE_URL) center/cover;"></div> <div style="grid-row:3/4;border-bottom:1px solid #41424D;padding:10px;overflow:auto;line-height:1.5;"> </lj-raw>Vivamus iaculis sed augue vitae elementum. Nam lacinia ultricies lobortis. Quisque congue suscipit nunc, eu sollicitudin elit ultricies nec. Fusce vel orci vel metus euismod condimentum. Vivamus lobortis consequat rutrum. Aenean rhoncus justo, vel lectus luctus in.</lj-raw> </div> </div>  </div>  <div style="width:500px;max-width:100%;margin:0 auto;font-size:10px;text-align:right;"><a title="code by" href="https://baisemain.dreamwidth.org/" style="text-decoration:none;color:#ccc;">♡</a></div> </lj-raw>
Replace IMAGE_1_URL (top left), IMAGE_2_URL (bottom right) and BLURB_IMAGE_URL with your images. Change the gradient background colour by replacing #c21431 and #250b37. For nav links: you can put as many or as few links as you want, but it looks best if you do five or less.

Post the entry and copy the URL of the entry. Go Display Settings and find IDs or URLs of Sticky Entries. Paste your entry URL into "Sticky 1" and click the "Save" button.

If you want to change the link hover colours, go to Custom CSS and find .singularity-mood .mood-panel .links a:hover.

Please comment below if you have any questions!

LAYOUT: Singularities

Post a comment in response: