baisemain | LAYOUT: Shadowy

[ PREVIEW ]

Featuring: Collapsible sidebar compatible with DW's modules, display names, customized comment pages, can be edited using DW's customize style interface.

LAST UPDATE 11/12/2025: List item bullets are outside instead of inside now.
08/12/2024: Line breaks for display name.
05/10/2024: Correct sidebar width when no custom text is provided.
04/25/2023: Posted custom text html with "content" class instead of the "sidebar-text" class.

INSTALLING THE THEME

Go to Your Layers under Advanced Customization. Under "Create a style-specific layer", select Type: Theme and Style: Practicality. 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. (If it doesn't compile, go back and make sure you picked type "theme.")

layerinfo type = "theme"; layerinfo name = "Shadowed"; layerinfo redist_uniq = "practicality/shadowed"; layerinfo "author_name" = "baisemain"; set theme_authors = [ { "name" => "baisemain", "type" => "user" } ]; ##=============================== ## Page Colors ##=============================== set color_page_background = "#121212"; set color_page_link = "#d62828"; set color_page_link_active = "#d62828"; set color_page_link_hover = "#d62828"; set color_page_link_visited = "#d62828"; set color_page_text = "#999"; set color_page_title = "#D62828"; set color_header_background = ""; set color_header_link = "#D62828"; set color_footer_background = "#ffffff"; set color_comment_title = "#ffffff"; set color_comment_title_background = "#D62828"; set control_strip_bgcolor = "#000"; set control_strip_linkcolor = "#D62828"; set control_strip_fgcolor = "#ffffff"; set control_strip_bordercolor = "#333333"; ##=============================== ## Entry Colors ##=============================== set color_entry_background = "#fff"; set color_entry_border = "#cfcfcf"; set color_entry_interaction_links = "#D62828"; set color_entry_link = "#5EC2D0"; set color_entry_link_active = "#5EC2D0"; set color_entry_link_hover = "#C0EFF6"; set color_entry_link_visited = "#5EC2D0"; set color_entry_text = "#333"; set color_entry_title = "#D62828"; set color_entry_title_background = "#ac2225"; ##=============================== ## Module Colors ##=============================== set color_module_background = "#fff"; set color_module_border = "#d62828"; set color_module_link = "#5ec2d0"; set color_module_link_active = "#5ec2d0"; set color_module_link_hover = "#c0eff6"; set color_module_link_visited = "#5ec2d0"; set color_module_text = "#333333"; set color_module_title = "#ffffff"; set color_module_title_background = "#d62828"; ##=============================== ## Image Options ##=============================== set image_background_page_position = "top left"; set image_background_page_repeat = "repeat"; set image_background_page_url = "https://i.imgur.com/DDjcrs7.png"; ##=============================== ## Text Options ##=============================== set entry_date_format = "long_day"; set entry_management_links = "text"; set comment_management_links = "text"; set font_base = "'Noto Sans', Arial"; set font_entry_title = "'Playfair Display'"; set font_entry_title_size = "1.5"; set font_journal_subtitle = "'Playfair Display'"; set font_journal_subtitle_size = "0.9"; set font_journal_title = "'Smooch'"; set font_journal_title_size = "3"; set font_module_heading = "'Playfair Display'"; set font_module_heading_size = "1.5"; set font_module_text_size = "0.9"; set font_module_text_units = "em"; set font_sources = "https://fonts.googleapis.com/css2?family=BioRhyme&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Playfair+Display:wght@500&family=Smooch&display=swap"; set text_mem_add = "Memory"; set text_tell_friend = "Share"; set text_unwatch_comments = "Untrack"; set text_view_recent = "Recent"; set text_watch_comments = "Track"; set text_comment_from = ""; set text_posting_in = " in "; set text_stickyentry_subject = ""; ##=============================== ## Modules ##=============================== set layout_type = "two-columns-right"; set module_active_order = 9; set module_calendar_order = 4; set module_credit_show = false; set module_customtext_order = 1; set module_customtext_show = true; set module_links_order = 5; set module_links_show = false; set module_navlinks_order = 3; set module_navlinks_section_override = "one"; set module_pagesummary_order = 8; set module_poweredby_show = false; set module_subscriptionfilters_show = true; set module_syndicate_order = 6; set module_syndicate_show = false; set module_tags_order = 7; set module_tags_opts_limit = 0; set module_tags_opts_type = "multi"; set module_time_show = false; set module_userprofile_order = 2; set module_userprofile_show = false; set sidebar_width = "20em"; set sidebar_width_doubled = "40em"; ##=============================== ## Default Custom CSS ##=============================== set linked_stylesheet = "https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap"; set custom_css = "body { /* don't scroll background image */ /*background-attachment: fixed;*/ /* stretch to fit background image to window */ /*background-size: cover;*/ } #header .header-image { background-image: url('https://64.media.tumblr.com/681cd33ecca91a386234c150da996779/0ac41ee9601c92f7-f4/s250x400/ead9e398d12ef4e03d04eed323eb3edd17467832.gifv'); /* header image url */ height: 150px; width: 150px; border-radius: 50%; /* rounded corners */ border: 10px solid #000; /* border */ } #header .header-text { text-shadow: 2px 2px #000; /* header text dropshadow */ text-align: center; } #header .header-links li.link a { background: #000; /* header link bgcolor */ } .datetime, .edittime, .datetime a, .datetime a:active, .datetime a:hover, .datetime a:visited { color: #CCC; /* date color */ } /* CUSTOM TEXT MODULE */ .module-customtext h2.module-header { display: none; /* hide customtext title */ } .module-customtext .sidebar-image { background-image: url('https://baisemain004.dreamwidth.org/file/262.jpg'); /* sidebar image url SIDEBAR_IMAGE */ height: 300px; /* sidebar image height */ width: 100%; } /* OTHER SETTINGS */ .entry, .navigation, .module, .month, .linklist, .tags-container, .icons-container { max-width: 750px; /* entry width */ margin-left: auto; margin-right: auto; } .module-content .userpic img, .entry .userpic img, .comment .userpic img { border-radius: 50%; /* rounded user icons */ } #footer, .navigation { text-shadow: 1px 1px #000; /* nav links dropshadow */ } /* delete this whole thing if the header links look too blurry */ #header .header-links li.link a, #header .header-links li.link a>span { -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; outline: 1px solid transparent; } /* HIDDEN ELEMENTS */ .entry-poster img, .pagesummary-poster img, .pagesummary-community img, .comment-poster img { display: none; /* hide username icons */ } #pagetitle { display: none; /* hide page titles */ } .topnav { display: none; /* hide top navbar */ } /* ICON FONT */ @font-face { font-family: 'Material Symbols Outlined'; font-style: normal; font-weight: 600; src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v63/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzazHD_dY43zj-jCxv3fzvRNU22ZXGJpEpjC_1n-q_4MrImHCIJIZrDBxG-ej.woff2) format('woff2'); } "; ##=============================== ## Customized Elements ##=============================== function Page::print_header() { """<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="header-links">\n"""; $this->print_linklist(); """</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>"; } ## For most styles, this will be overridden by FriendsPage::print_entry and such. function Page::print_entry(Entry e) { $e->print_wrapper_start(); """<div class="header">\n"""; """<div class="inner">\n"""; """<div class="userinfo">\n"""; $e->print_userpic(); """</div>\n"""; $e->print_poster(); $e->print_subject(); $e->print_metatypes(); $e->print_time(); """</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 class="footer">\n"""; """<div class="inner">\n"""; $e->print_tags(); $this->print_entry_footer($e); "</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\">"; if ($p isa FriendsPage or $p isa EntryPage or $p isa ReplyPage) { $this.poster->print(); print safe " <span class='display-name'>" + $this.poster.name + "</span>"; if (not $this.poster->equals($this.journal)) { print $*text_posting_in; # print safe "<br/>"; $this.journal->print(); } } else { if (not $this.poster->equals($this.journal)) { $this.poster->print(); 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>"""; } print safe " <span class='display-name'>" + $this.poster.name + "</span>"; """</span>\n"""; } # ReplyPage and EntryPage work nicest if they output the same structure for printing comments and entries, but this requires to manually change both ReplyPage::print_comment and EntryPage::print_comment. Layout authors can also choose to override separately for different structures. # Note that there is no multiform check on the ReplyPage. function ReplyPage::print_comment (Comment c) { $c->print_wrapper_start(); """<div class="header">\n"""; """<div class="inner">\n"""; $c->print_subject(); """<div class="poster-information">\n"""; $c->print_poster(); $c->print_metatypes(); $c->print_time(); $c->print_metadata(); """</div>\n"""; """</div>\n"""; """</div>\n"""; """<div class="contents">\n"""; """<div class="inner">\n"""; """<div class="userinfo">\n"""; $c->print_userpic(); """</div>\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(); } # ReplyPage and EntryPage work nicest if they output the same structure for printing comments and entries, but this requires to manually change both ReplyPage::print_comment and EntryPage::print_entry. Layout authors can also choose to override separately for different structures. function EntryPage::print_comment (Comment c) { $c->print_wrapper_start(); """<div class="header">\n"""; """<div class="inner">\n"""; $c->print_depth_indicator(); $c->print_subject(); if ( $c.comment_posted ) { print safe "<div class='comment-posted'>$*text_comment_posted</div>"; } $c->print_poster(); $c->print_metatypes(); $c->print_time(); $c->print_metadata(); """</div>\n"""; """</div>\n"""; """<div class="contents">\n"""; """<div class="inner">\n"""; """<div class="userinfo">\n"""; $c->print_userpic(); """</div>\n"""; $c->print_text(); """</div>\n"""; """</div>\n"""; """<div class="footer">\n"""; """<div class="inner">\n"""; if ($this.multiform_on) { """<span class="multiform-checkbox">"""; print safe " <label for='ljcomsel_$c.talkid'>$*text_multiform_check</label> "; $c->print_multiform_check(); "</span>"; } $c->print_management_links(); $c->print_interaction_links(); $c->print_reply_container(); "</div>\n</div>\n"; $c->print_wrapper_end(); } ##=============================== ## Stylesheet ##=============================== function print_stylesheet () { var string medium_media_query = generate_medium_media_query(); var string small_media_query = generate_small_media_query(); var string make_invisible = generate_invisible_css(); var string page_subtitle_font = generate_font_css($*font_journal_subtitle, $*font_base, $*font_fallback, $*font_journal_subtitle_size, $*font_journal_subtitle_units); 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 entry_header_margin = ""; if ( $*entry_userpic_style == "" ) { $entry_header_margin = "135px"; } elseif ( $*entry_userpic_style == "small" ) { $entry_header_margin = "110px"; } elseif ( $*entry_userpic_style == "smaller" ) { $entry_header_margin = "85px"; } var string comment_header_margin = ""; if ( $*comment_userpic_style == "" ) { $comment_header_margin = "135px"; } elseif ( $*comment_userpic_style == "small" ) { $comment_header_margin = "110px"; } elseif ( $*comment_userpic_style == "smaller" ) { $comment_header_margin = "85px"; } var string userpic_css = ""; if ($*userpics_position == "left") { $userpic_css = """ /* Float placeholder for userpic */ .has-userpic .entry .header > .inner::before, .has-userpic .comment .contents > .inner::before { content: ""; display: block; position: static; width: 130px; height: 120px; margin-top: -40px; float: left; } .has-userpic .entry .userinfo, .has-userpic .comment .userinfo { position: absolute; left: 0; top: -40px; } .has-userpic .comment .contents > .inner::before { margin-top: -105px; } .has-userpic .comment .userinfo { left: 0; top: -105px; } /*.has-userpic .entry .header, .has-userpic .comment .header { text-align: right; }*/ .has-userpic .entry .header .datetime { /*margin-left: $entry_header_margin;*/ } .has-userpic .comment .header { padding-left: calc(1em + $comment_header_margin); } .has-userpic .comment .header .datetime { display: inline-block; /*margin-left: $comment_header_margin;*/ } """; } elseif ($*userpics_position == "right") { $userpic_css = """ /* Float placeholder for userpic */ .has-userpic .entry .header > .inner::before, .has-userpic .comment .contents > .inner::before { content: ""; display: block; position: static; width: 130px; height: 120px; margin-top: -40px; float: right; } .has-userpic .entry .userinfo, .has-userpic .comment .userinfo { position: absolute; right: 0; top: -40px; } .has-userpic .comment .contents > .inner::before { margin-top: -105px; } .has-userpic .comment .userinfo { right: 0; top: -105px; } .has-userpic .entry .header .datetime { /*margin-right: $entry_header_margin;*/ } .has-userpic .comment .header { padding-right: calc(1em + $comment_header_margin); } .has-userpic .comment .header .datetime { display: inline-block; /*margin-right: $comment_header_margin;*/ } """; } var string responsive_indent_css = ""; if ($*comment_indent_style == "responsive") { $responsive_indent_css = """ /* Responsive comment thread indentation */ .comment-thread { margin-top: 7px; } @media $small_media_query { /* Mobile indents */ .comment-depth-indent-mobile { margin-left: 10px; } /* Establish an anchoring containing block for thread lines */ .comment-thread { position: relative; } /* Once the thread lines absolute themselves off the page, don't scroll for them. Content shouldn't be affected because it gets overflow-x:auto-ed well before becoming the section container's problem. Make sure to set comment_indent_limit_mobile low enough to work for 320px viewport widths, because if there's slop it'll get cut off. */ #comments { overflow-x: hidden; } /* Go-behind thread lines for non-indented threads */ .comment-thread::before { content: ""; width: 2px; /* Leave a gap between threads, so it's easier to see the /transition between two replies to the same parent */ height: 100%; display: block; position: absolute; background-color: ${*color_entry_border}; z-index: -1; /* Since the thread blocks stay at the same indent level from here on out, we need to manually indent each add'l line. */ left: calc( (var(--comment-depth) - var(--comment-indent-limit-mobile)) * 10px); top: 0; border-radius: 1px; } /* On-the-left thread lines for threads that still get indented */ .comment-thread.comment-depth-indent-mobile::before { left: -10px; /* Let the compounding margins handle the indent */ } /* Skip the first one */ .comment-thread.comment-depth-1::before { display:none; } /* Color every fifth one differently for easy counting */ .comment-thread.comment-depth-mod5-1::before { background-color: ${*color_entry_background}; } /* Hide numeric indicators if indent is working */ .thread-depth.indent-mobile { $make_invisible } } @media $medium_media_query { .comment-depth-indent-desktop { margin-left: 20px; } .thread-depth.indent-desktop { $make_invisible } } .comment-depth-1 { margin-left: 0; } """; } """ /*--------------------*/ /*--- Practicality ---*/ /*--------------------*/ /*--- Main ---*/ body { margin: 0; } a, a:link, a:visited { text-decoration: none; } p { margin: 1em 0; } input, textarea { background: $*color_entry_background; border: 1px solid $*color_page_text; color: $*color_entry_text; } blockquote { /*background: $*color_entry_background;*/ /*border-bottom: 3px solid $*color_entry_border;*/ border-left: 3px double $*color_entry_title; /*color: $*color_page_text;*/ margin: 1em 1em 1em 1em; padding: 1em; } ul { list-style: square outside; margin: .2em 0 0 .5em; } ol { list-style: decimal outside; margin: .2em 0 0 .5em; } /*--- Control Strip ---*/ #lj_controlstrip { justify-content: center; gap: 10px; } #lj_controlstrip > div { flex-grow: 0; border-right: 0; padding: 10px; } #lj_controlstrip a img { border-radius: 50%; margin-left: 4px; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid #CCC; padding: 1px 4px; border-radius: 0; background: #000 !important; color: #999 !important; } #lj_controlstrip .ljuser img { display: none; } /*--- Main Containers ---*/ #canvas { width: 90%; margin: 0 auto; } @media $small_media_query { #canvas { width: calc(100% - 10px); } } #primary > .inner:first-child { padding: 0; } #secondary > .inner:first-child, #tertiary > .inner:first-child { padding: 0; } @media $medium_media_query { .column-left #primary > .inner:first-child { padding-left: 1em; } .column-right #primary > .inner:first-child { padding-right: 1em; } .three-columns-left #secondary > .inner:first-child, .three-columns-right #secondary > .inner:first-child { padding-right: .5em; } .three-columns-left #tertiary > .inner:first-child, .three-columns-right #tertiary > .inner:first-child { padding-left: .5em; } } /*--- Collapsed Sidebar ---*/ body { overflow-x: hidden; } #secondary { float: none !important; width: 15em; margin-left: 0 !important; margin-right: 0 !important; position: fixed; top: 0; right: 0; bottom: 0; transform: translateX(100%); transition: transform 0.7s; } #secondary:hover { transform: translateX(0); } #secondary:before { content: \"\"; position: absolute; left: -50px; top: 70px; height: 40px; width: 50px; } #secondary:after { font-family: \"Material Symbols Outlined\"; content: \"settings\"; font-size: 22px; position: absolute; left: -50px; top: 70px; height: 40px; width: 40px; line-height: 40px; text-align: center; background-clip: padding-box; background: $*color_module_background; color: $*color_module_title_background; box-shadow: -5px 0 10px rgb(0 0 0 / 10%); border-radius: 50%; cursor: pointer; } #secondary>.inner { overflow-y: auto; position: absolute; top: 0; bottom: 0; margin-left: 10px; background-color: $*color_module_background; border-left: 1px solid $*color_module_border; box-shadow: -5px 0 10px rgba(0 0 0 / 10%); } @media only screen and (min-width: 45em) { .two-columns-right #content, .three-columns-sides #content { border-right: 0 !important; } } /*--- Journal Header ---*/ #header { padding: .1em .5em; margin-bottom: 1em; } #header:after { content: "."; visibility: hidden; display: block; height: 0; clear: both; } #header .header-title { /*max-width: 750px;*/ margin: 2em auto; text-align: center; } #header .header-image { margin: 0 auto; height: 150px; width: 150px; max-width: 100%; background: $*color_header_background url() no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } #header .header-links { margin-top: -1em; margin-bottom: 75px; } #header .header-links ul { list-style: none; margin: 0 auto; padding: 0; text-align: center; } #header .header-links li { display: inline-block; margin: 1.5px 1.5px; } #header .header-links li.heading { padding: 0 10px; font-family: $*font_journal_title; font-size: 1.5em; } #header .header-links li.link a { display: inline-block; padding: 10px 14px; min-width: 50px; text-align: center; font-size: smaller; transform: skew(10deg, 5deg); } #header .header-links li.link a>span { display: inline-block; font-family: $*font_journal_subtitle; letter-spacing: 1px; transform: skew(-10deg, -5deg); } #header .header-links li.link a, #header .header-links li.link a>span { /* fix for transform jagged edges */ -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: transform; outline: 1px solid transparent; } #header .header-links li.link a { box-shadow: inset 0 0 0 0 $*color_page_link; color: $*color_page_link; transition: color .5s ease-in-out, box-shadow .5s ease-in-out; } #header .header-links li.link a:hover { box-shadow: inset 1000px 1em 0 0 $*color_page_link; color: $*color_page_background; } @media $medium_media_query { #header .header-title { display: flex; justify-content: center; align-items: center; text-align: left; } #header .header-image { flex-basis: auto; margin: 0; margin-right: 1em; } #header .header-text { flex-basis: auto; padding-right: 2em; } } h1#title, h1#title a { margin-bottom: 0; padding-bottom: 0; line-height: 1em; font-weight: normal; color: $*color_page_title; } h2#subtitle, h2#pagetitle { border: none; color: $*color_page_title; font-weight: bold; } h2#subtitle { margin: -1em 0 0; color: $*color_page_text; font-weight: normal; letter-spacing: 2px; cursor: default; } #header .module-navlinks { $page_subtitle_font background: transparent; border: none; color: $*color_header_link; text-transform: uppercase; font-weight: bold; letter-spacing: 0; margin: -1em 0 0; text-align: center; } #header .module-navlinks li { display: inline; padding: 0 1em; } #header .module-navlinks li a { color: $*color_header_link; } #header .module-navlinks li a:active { color: $*color_header_link_active; } #header .module-navlinks li a:hover { color: $*color_header_link_hover; } #header .module-navlinks li a:visited { color: $*color_header_link_visited; } /*--- Journal Footer ---*/ #footer { margin-bottom: 1em; background: transparent; text-align: right; text-transform: uppercase; } .page-top { width: 40px; height: 40px; margin: 0 auto; background: $*color_entry_background; border-radius: 50%; overflow: hidden; text-shadow: none; } .page-top a { color: $*color_entry_title; } .page-top a:hover { color: $*color_entry_title; } .page-top a:before { content: \"arrow_upward\"; display: block; font-family: \"Material Symbols Outlined\"; font-size: 22px; height: 40px; width: 40px; line-height: 40px; text-align: center; } @media $medium_media_query { .page-top { position: fixed; left: 0; bottom: 0; margin: 0 0 1em 1em; } } /*--- Journal Navigation ---*/ .navigation { $entry_title_font /*background: $*color_page_background;*/ color: $*color_page_text; font-size: 1.2em; margin: 0 0 15px 0; padding: 5px; text-align: center; } .topnav a, .bottomnav a { color: $*color_entry_title; } .navigation.empty { display: none; } .page-read .navigation.empty { /* display: block; */ /* padding: 10px; */ } .page-read .navigation.empty ul { margin: 0; padding: 0; } .page-read .navigation.empty ul li { margin: 0; padding: 0; } /*--- Sidebar ---*/ li.page-separator { display: none; } .module { border: none; margin-bottom: 2em; padding: 0 10px; } h2.module-header { /* border-bottom: 1px solid $*color_page_link; */ background-color: $*color_module_title_background; color: $*color_module_title; font-weight: normal; margin: 0 -10px 10px; padding: 0 20px; } h2.module-header a, h2.module-header a:active, h2.module-header a:hover, h2.module-header a:visited { color: $*color_module_title; } ul.module-list { list-style: none; } ul.module-list li, ul.module-list-item li { padding: 0 0 0 5px; } .module-content .userpic { text-align: center; } .module-content .userpic img { background: $*color_entry_link; border: none; padding: 10px; } .journal-name { margin-top: 5px; text-align: center; } .journal-website-name { text-transform: uppercase; text-align: center; } ul.userlite-interaction-links.icon-links { margin: 5px 0 0; text-align: center; } ul.userlite-interaction-links.icon-links li { margin: 0 auto; } ul.userlite-interaction-links.text-links { padding: 0 0 0 5px; list-style: none; } .module-navlinks { color: $*color_module_title; text-transform: uppercase; font-size: 1.25em; letter-spacing: 1px; list-style: none; text-align: center; padding-top: 1em; } .module-navlinks a { color: $*color_module_title; } .module-navlinks .module-list { margin: 0; } .manage-link { margin: 10px 0 0; text-align: right; } .module-calendar table { text-align: center; } .module-calendar th { background: $*color_module_title_background; color: $*color_module_title; border: 1px solid $*color_module_border; padding: 0; } .module-calendar td.empty-day { padding: 0 5px; border: 1px solid $*color_module_border; } .module-calendar td.entry-day { padding: 0 5px; font-weight: bold; background: $*color_module_background; border: 1px solid $*color_module_border; } .module-calendar td.entry-day a { color: $*color_module_link; } .module-calendar td.entry-day a:visited { color: $*color_module_link_visited; } .module-calendar td.entry-day a:hover { color: $*color_module_link_hover; } .module-calendar td.entry-day a:active { color: $*color_module_link_active; } .module-customtext { padding: 0; margin-bottom: 0; } .module-customtext h2.module-header { margin: 0; } .module-customtext .sidebar-image { margin: 0 auto; height: 240px; width: 100%; max-width: 100%; background: #CCC no-repeat center center; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; margin-top: -1px; border-top: 1px solid $*color_module_border; border-bottom: 1px solid $*color_module_border; } .module-customtext .sidebar-text { padding: 1em; margin-top: -1px; border: 1px solid $*color_module_title_background; background: $*color_module_title_background; color: $*color_module_title; } .module-customtext img { max-width: 100%; } .module-content a, .module-typelist a, .module-pagesummary a, div[class*='module-tags'] .module-content a { box-shadow: inset 0 0 0 0 $*color_module_link; color: $*color_module_link; margin: 0 -.25rem; padding: 0 .25rem; letter-spacing: 0; border-radius: 6px; transition: color .5s ease-in-out, box-shadow .5s ease-in-out; } .module-content a:hover, .module-typelist a:hover, .module-pagesummary a:hover, div[class*='module-tags'] .module-content a:hover { box-shadow: inset 1000px 2em 0 0 $*color_module_link; color: $*color_module_background !important; } /*--- Entries ---*/ .entry { border: none; padding: 25px; margin-bottom: 75px; } /* Provide an anchor for absolute positioning of descendents like userpic */ .entry .header, .entry .contents { position: relative; } /* Don't allow one overflowing flist entry to trash the whole page's layout */ .entry .contents > .inner { overflow-x: auto; } .entry-content { margin: 1em 0; min-height: 100px; line-height: 1.5; } .entry-content li, .comment-content li { list-style-position: outside; } .entry-content td, .entry-content th { /*border: 1px solid $*color_entry_border;*/ } .entry .header { font-size: 1em; padding: 0; min-height: 80px; /* prevent icon from flowing onto contents */ } .entry .header .datetime { display: block; margin: 0.5em 0; } h3.entry-title { $entry_title_font font-weight: normal; display: inline; line-height: 1.5; } h3.entry-title a, h3.entry-title a:active, h3.entry-title a:hover, h3.entry-title a:visited { color: $*color_entry_title; } h3.entry-title a img { margin-bottom: 0.25em; } .entry .entry-title, .entry .entry-title a { background-color: transparent; } .access-filter, .restrictions { margin: 0.25em; } h3.day-date { $entry_title_font text-align: center; } .text_noentries_day { text-align: center; } .datetime, .edittime { color: $*color_entry_text; font-size: 11px; text-transform: uppercase; letter-spacing: 1px; } .edittime { margin-top: 1em; } .datetime a, .datetime a:active, .datetime a:hover, .datetime a:visited { color: $*color_entry_text; } .has-userpic .entry .userinfo, .has-userpic .comment .userinfo { max-width: 120px; text-align: center; } @media $small_media_query { .has-userpic .entry .userinfo, .has-userpic .comment .userinfo { margin-right: -30px; } } .has-userpic .entry .userpic { border: none; } .entry .userpic img { background: $*color_entry_title; border: none; padding: 10px; } .entry-poster { color: $*color_entry_title; display: block; font-size: .75em; text-transform: uppercase; letter-spacing: 1px; margin: 5px 0 1em; cursor: default; } .entry-poster a, .entry-poster a:active, .entry-poster a:hover, .entry-poster a:visited { color: $*color_entry_background; } .entry .entry-poster { color: $*color_entry_background; background: $*color_entry_title; margin: -25px -25px 25px; padding: 1rem; } .display-name { padding: 2px 6px; margin: 0 2px; border-radius: 6px; text-shadow: none; text-transform: none; background: $*color_entry_title_background; color: $*color_entry_background; } .metadata { font-size: .85em; text-transform: uppercase; margin: 1em 0 0; text-align: right; } .metadata ul { padding: 0; margin: 0; } .metadata ul li { padding: 0; margin: 0; } .metadata-item-location, .metadata-item-music, .metadata-item-mood, .tag ul { color: $*color_entry_link; text-align: right; } .entry .entry-content a, .entry .tag a { box-shadow: inset 0 0 0 0 $*color_entry_link; color: $*color_entry_link; transition: color .5s ease-in-out, box-shadow .5s ease-in-out; } .entry .entry-content a:hover, .entry .tag a:hover { box-shadow: inset 1000px 2em 0 0 $*color_entry_link; color: $*color_entry_background !important; margin: 0 -.25rem; padding: 0 .25rem; border-radius: 6px; } .entry .footer { clear: both; text-align: right; margin-top: 1em; } .tag { margin: 2em 0 .5em 0; font-size: 11px; text-transform: uppercase; text-align: left; letter-spacing: 1px; } .tag ul li { margin: .5em 0 0; text-align: right; } ul.entry-management-links { display: inline; margin: .5em 0 0; padding: .5em 0 0; text-align: center; } ul.entry-management-links li { margin: 0 auto; text-align: center; } ul.entry-interaction-links { display: inline; margin: 0; padding: 0; text-align: center; } ul.entry-interaction-links li, ul.entry-management-links li { color: $*color_entry_interaction_links; text-transform: uppercase; font-size: .8em; margin: 0 .5em 0 0; padding: 0; display: inline-block; } ul.entry-interaction-links a, ul.entry-interaction-links a:active, ul.entry-interaction-links a:hover, ul.entry-interaction-links a:visited, ul.entry-management-links a, ul.entry-management-links a:active, ul.entry-management-links a:hover, ul.entry-management-links a:visited { color: $*color_entry_interaction_links; } /*--- Archive Page ---*/ .month { background: $*color_entry_background; color: $*color_entry_text; margin: 0 0 25px 0; padding: 50px; } .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; } table.month { border-bottom: none; } .month table { margin: auto; width: 100%; } table.month td, table.month th { border: 1px solid $*color_entry_border; } .month caption { display: none; } .month h3 { color: $*color_entry_title; font-size: 1.2em; font-weight: normal; } .month th { background: $*color_page_background; color: $*color_page_text; border: 1px solid $*color_entry_border; text-align: center; } .month td.day { border: 1px solid $*color_entry_border; color: $*color_entry_text; font-weight: normal; } td.day { padding: 1em; } .month td.day-has-entries { /* background: $*color_page_background; color: $*color_page_text; */ font-weight: normal; text-align: left; } .month td.day-has-entries p { font-size: 1.14em; font-weight: bold; text-align: right; } .month td.day-has-entries p a { color: $*color_page_link; } .month td.day-has-entries p a:visited { color: $*color_page_link_visited; } .month td.day-has-entries p a:hover { color: $*color_page_link_hover; } .month td.day-has-entries p a:active { color: $*color_page_link_active; } .month dl, .month dt, .month dd { margin: 0; padding: 0; } /*--- Tags Page ---*/ .page-tags .tags-container { background: $*color_entry_background; color: $*color_entry_text; padding: .5em; } .page-tags .tags-container a { color: $*color_entry_link; } .page-tags .tags-container a:visited { color: $*color_entry_link_visited; } .page-tags .tags-container a:hover { color: $*color_entry_link_hover; } .page-tags .tags-container a:active { color: $*color_entry_link_active; } .page-tags .tags-container h2 { $entry_title_font border-bottom: 1px solid $*color_entry_border; color: $*color_entry_title; text-transform: uppercase; font-weight: normal; margin: 0 0 .5em 0; } .page-tags .tags-container .ljtaglist { list-style: none; margin-left: 0; } .page-tags .non-link-tag { display: inline-block; margin-top: 1em; font-weight: bold; } /*--- Icons Page ---*/ .icons-container { background: $*color_entry_background; color: $*color_entry_text; padding: .5em; } .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 h2 { $entry_title_font border-bottom: 1px solid $*color_entry_border; color: $*color_entry_title; text-transform: uppercase; font-weight: normal; margin: 0 0 .5em 0; } .sorting-options ul { padding-left: 0; } .icons-container .icon { margin: 1em 0; } .icon-image { float: left; clear: left; margin-bottom: .25em; min-width: 100px; padding-right: 1em; } .icon-info { min-height: 100px; } .icon-info span { font-weight: bold; } .icon-info .default { text-decoration: underline; } /*--- Comments ---*/ hr.above-entry-interaction-links, hr.below-reply-container { display: none; } .comment-pages { margin: 1em auto; font-size: 14px; text-align: center; text-transform: uppercase; } .comment-wrapper { min-width: 14em; } $responsive_indent_css .comment { background: $*color_entry_background; color: $*color_entry_text; padding: 1em; } /* Provide an anchor for absolute positioning of descendents like userpic */ .comment .contents { position: relative; } /* Don't allow one overflowing comment to trash the whole page's layout */ .comment .contents > .inner { overflow-x: auto; } .comment a { color: $*color_entry_link; } .comment a:visited { color: $*color_entry_link_visited; } .comment a:hover { color: $*color_entry_link_hover; } .comment a:active { color: $*color_entry_link_active; } .comment .comment-title, .comment .comment-title a { background-color: transparent; /* override default stylesheet */ } .comment-title, .comment-title a { color: $*color_entry_title; } .no-subject .comment .comment-title { min-height: 1em; } .comment .header { color: $*color_comment_title; background-color: $*color_comment_title_background; margin: -1em -1em 0; padding: 1em; } .has-userpic .comment .header { min-height: 50px; } .comment .header a, .comment .header a:visited, .comment .header a:hover, .comment .header a:active, .comment .header .comment-poster, .comment .header .datetime { color: $*color_comment_title; } .comment .footer { margin-top: 1em; font-size: .7em; text-transform: uppercase; } .comment-content { /*border-bottom: 1px solid $*color_entry_border;*/ /*border-top: 1px solid $*color_page_link;*/ padding: 10px 0; } .comment-poster { color: $*color_entry_title; margin-right: .5em; margin-bottom: .5em; font-size: .8em; text-transform: uppercase; } .comment-poster a { color: $*color_entry_title; } .comment-poster img { width: 12px; height: 12px; margin-bottom: 2px; } .poster-ip { margin: 0 1em; font-size: .7em; text-transform: uppercase; letter-spacing: 1px; } textarea.textbox { background: $*color_entry_background; color: $*color_entry_text; width: 80% !important; } .has-userpic .comment .userpic { border: none; display: block; } .comment .userpic img { background: $*color_entry_title; border: none; padding: 10px; } ul.comment-management-links, ul.comment-interaction-links { display: inline-block; margin-right: .5em; text-align: left; } .comment-management-links ul, .comment-interaction-links ul { display: inline; font-size: 0.8em; text-transform: uppercase; text-align: center; } .comment-management-links li, .comment-interaction-links li { font-size: 1.1em; text-transform: uppercase; text-align: center; } .comment-interaction-links li a, .comment-management-links li a { color: $*color_entry_interaction_links; } #qrform table { border: none !important; } .bottomcomment { background: $*color_entry_background; color: $*color_entry_text; margin: .5em 0; padding: .7em; } .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; } .bottomcomment label { display: block; margin-top: 1em; } /*--- Contextual Pop-ups ---*/ .ContextualPopup { background: $*color_entry_background; border: 1px solid $*color_entry_border !important; border-radius: 0; color: $*color_entry_text; } .ContextualPopup div.Inner a, .ContextualPopup div.Inner a:visited, .ContextualPopup div.Inner a:active { text-decoration: none; } .ContextualPopup a { color: $*color_entry_link; } .ContextualPopup a:visited { color: $*color_entry_link_visited; } .ContextualPopup a:hover { color: $*color_entry_link_hover; } .ContextualPopup a:active { color: $*color_entry_link_active; } .ContextualPopup .Userpic { border: 5px solid $*color_header_background; margin: .5em; padding: 0; } $userpic_css """; }

Go to Your Custom Layers under Select Style. Find the theme called "Shadowy" 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 the text below, and click "Save Changes." Replace the text with your own content (or delete <div class="sidebar-text">...</div> if you don't want any text). You can edit the image by going to Custom CSS (see below).
<div class="sidebar-image"></div><div class="sidebar-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
To customize your layout:
- Add links. The link buttons below the header are defined here.
- Insert image URLs in Custom CSS. Find and replace HEADER_IMAGE_URL with your header image. The header image defaults to 150x150 but can be resized in the CSS just below the HEADER_IMAGE_URL line. Find and replace SIDEBAR_IMAGE_URL with your sidebar image. The image height can adjusted below that line.
- Edit the colours (and edit the navstrip colours). The background colour of display names (on reading pages) is "Entry title background color."
- 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.
- Show/hide sidebar modules and rearrange the order.
- Change display fonts. By default, this layout uses "Smooch" (title) and "Playfair Display" (subtitle) 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.

Please ask below if you have any questions!

LAYOUT: Shadowy

no subject