baisemain | LAYOUT: Egotist

[ PREVIEW ]

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

LAST UPDATE 12/12/2023: Fixed how entry poster names display in communities.
LAST UPDATE 8/17/2022: Fixed font of header in day view.

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 = "Egotist"; layerinfo redist_uniq = "practicality/egotist"; layerinfo "author_name" = "baisemain"; set theme_authors = [ { "name" => "baisemain", "type" => "user" } ]; ##=============================== ## Page Colors ##=============================== set color_page_background = "#efefef"; set color_page_link = "#98cddf"; set color_page_link_active = "#98cddf"; set color_page_link_hover = "#767676"; set color_page_link_visited = "#98cddf"; set color_page_text = "#333"; set color_page_title = "#69adc4"; set color_header_background = ""; set color_header_link = "#69adc4"; set color_footer_background = "#fff"; set color_comment_title = "#69adc4"; set color_comment_title_background = "#cdeaf4"; set control_strip_bgcolor = "#fff"; set control_strip_linkcolor = "#69adc4"; set control_strip_fgcolor = "#333"; set control_strip_bordercolor = "#fff"; ##=============================== ## Entry Colors ##=============================== set color_entry_background = "#fff"; set color_entry_border = "#cfcfcf"; set color_entry_interaction_links = "#69adc4"; set color_entry_link = "#98cddf"; set color_entry_link_active = "#98cddf"; set color_entry_link_hover = "#767676"; set color_entry_link_visited = "#98cddf"; set color_entry_text = "#333"; set color_entry_title = "#69adc4"; ##=============================== ## Module Colors ##=============================== set color_module_background = "#fff"; set color_module_border = "#cfcfcf"; set color_module_title = "#69adc4"; ##=============================== ## Text Options ##=============================== set entry_date_format = "long_day"; set entry_management_links = "text"; set comment_management_links = "text"; set font_base = "'Open Sans', Arial"; set font_entry_title = "'BioRhyme'"; set font_journal_subtitle = "'BioRhyme'"; set font_journal_title = "'Rock Salt'"; set font_journal_title_size = "3"; set font_module_heading = "'BioRhyme'"; set font_module_text_size = "0.9"; set font_module_text_units = "em"; set font_sources = "https://fonts.googleapis.com/css2?family=Rock+Salt&family=BioRhyme:wght@400;700"; 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 = ""; ##=============================== ## Modules ##=============================== set module_active_order = 9; set module_calendar_order = 4; set module_credit_show = false; set module_customtext_order = 2; set module_customtext_show = true; set module_links_order = 5; set module_navlinks_order = 3; set module_navlinks_section_override = "one"; set module_pagesummary_order = 8; set module_poweredby_show = false; set module_syndicate_order = 6; set module_syndicate_show = false; set module_tags_order = 7; set module_time_show = false; set module_userprofile_show = false; ##=============================== ## Default Custom CSS ##=============================== set custom_css = "body { /* don't scroll image */ /*background-attachment: fixed;*/ /* stretch to fit window */ /*background-size: cover;*/ } #header .header-image { background-image: url(HEADER_IMAGE_URL); /* header image url */ height: 150px; width: 150px; border-radius: 50%; /* rounded corners */ border: 10px solid #FFF; /* border */ } #header .header-text { text-shadow: 2px 2px #FFFFFF; /* header text dropshadow */ text-align: center; } h1#title, h1#title a { line-height: 1em; font-weight: normal; } h2#subtitle { color: #999; /* header subtitle */ } .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 .custom-image { background-image: url(SIDEBAR_IMAGE_URL); /* sidebar image url */ height: 300px; /* sidebar image height */ width: 100%; } .module-customtext { padding: 0; } .module-customtext .content { padding: 1em; text-align: justify; } /* OTHER SETTINGS */ .entry, .navigation, .module { 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 */ } .comment .header { text-shadow: 1px 1px #FFFFFF; /* comment header dropshadow */ } #footer, .navigation { text-shadow: 1px 1px #FFFFFF; /* nav links dropshadow */ } .module-content { font-size: .9em; /* module font size */ } /* HIDDEN ELEMENTS */ .entry-poster img { display: none; /* hide username icons */ } #pagetitle { display: none; /* hide page titles */ } .topnav { display: none; /* hide top navbar */ } /* BODY FONT */ @font-face{font-family:'Open Sans';font-style:normal;font-weight:400;src:local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v15/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}"; ##=============================== ## 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"""; } ## 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(); if ($this.poster.username != $this.poster.name) { 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(); 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>"""; } 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_page_background; /*border-bottom: 3px solid $*color_entry_border;*/ color: $*color_page_text; margin: 1em 1em 1em 3em; padding: 1em; max-width: 85%; } ul { list-style: square inside; margin: .2em 0 0 .5em; } ol { list-style: decimal inside; margin: .2em 0 0 .5em; } /*--- Control Strip ---*/ #lj_controlstrip { padding: 5px 0; justify-content: center; } #lj_controlstrip a img { border-radius: 50%; margin-left: 4px; } #lj_controlstrip > div { flex-grow: 0; } #lj_controlstrip input, #lj_controlstrip select { border: 1px solid #CCC; padding: 1px 4px; border-radius: 6px; color: #999; } /*--- 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; } } /*--- 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; } @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; } } h1#title, h1#title a { color: $*color_page_title; } h2#subtitle, h2#pagetitle { border: none; color: $*color_page_title; font-weight: bold; } h2#subtitle { margin: -1em 0 0; /*text-align: right;*/ } #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; } /*--- Journal Navigation ---*/ .navigation { $entry_title_font /*background: $*color_entry_background;*/ color: $*color_entry_text; /*border-bottom: 5px solid $*color_entry_border;*/ 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; /*border-bottom: 5px solid $*color_module_border;*/ margin-bottom: 1em; padding: 10px; } h2.module-header { border-bottom: 1px solid $*color_page_link; color: $*color_module_title; font-weight: normal; margin: 0 0 10px 0; padding-bottom: 0; } h2.module-header a { 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: right; } .module-navlinks a { color: $*color_module_title; } .manage-link { margin: 10px 0 0; text-align: right; } .module-calendar table { text-align: center; } .module-calendar th { background: $*color_page_background; color: $*color_page_text; border: 1px solid $*color_entry_border; padding: 0; } .module-calendar td.empty-day { border: 1px solid $*color_entry_border; } .module-calendar td.entry-day { background: $*color_page_background; border: 1px solid $*color_entry_border; } .module-calendar td.entry-day a { color: $*color_page_link; } .module-calendar td.entry-day a:visited { color: $*color_page_link_visited; } .module-calendar td.entry-day a:hover { color: $*color_page_link_hover; } .module-calendar td.entry-day a:active { color: $*color_page_link_active; } .module-customtext .custom-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; } .module-customtext img { max-width: 100%; } /*--- Entries ---*/ .entry { border: none; /*border-bottom: 5px solid $*color_entry_border;*/ padding: 1em; margin: 0 0 2em 0; } /* 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: 10px 0 0; min-height: 100px; line-height: 1.5; } .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; } .access-filter { 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; } .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; } .entry-poster a, .entry-poster a:active, .entry-poster a:hover, .entry-poster a:visited { color: $*color_entry_title; } .display-name { padding: 2px 6px; margin: 0 2px; border-radius: 6px; text-shadow: none; text-transform: none; background: $*color_entry_title; 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 .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; /*border-top: 1px solid $*color_entry_border;*/ 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 0 0 .5em; padding: 0; text-align: center; } ul.entry-interaction-links li, ul.entry-management-links li { color: $*color_entry_interaction_links; text-transform: uppercase; letter-spacing: 1px; font-size: .8em; margin: 0 .5em 0 0; padding: 0; } 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; border-bottom: 5px solid $*color_entry_border; margin: 0 0 1em 0; padding: 2em; } .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; border-bottom: 5px solid $*color_entry_border; 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; } /*--- Icons Page ---*/ .icons-container { background: $*color_entry_background; color: $*color_entry_text; border-bottom: 5px solid $*color_entry_border; 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; text-shadow: 1px 1px #FFF; } .comment-wrapper { min-width: 14em; } $responsive_indent_css .comment { background: $*color_entry_background; color: $*color_entry_text; /*border-bottom: 5px solid $*color_entry_border;*/ 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; } .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; letter-spacing: 1px; } .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; border-bottom: 5px solid $*color_entry_border; 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; } #comments .comment { min-width: 28em; } @media $small_media_query { #comments .comment { min-width: 75vw; } } /*--- 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 "Egotist" and click "Apply Theme." (Select/Customize Style is also where you can set your Journal Title and 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. You can edit the image by going to Custom CSS (see below).
<div class="custom-image"></div><div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
To customize your layout:
- 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)
- Add background image(s). 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 "Rock Salt" and "BioRhyme" 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! I'm always happy to help people customize this layout if they want something in particular.

Flat | Top-Level Comments Only

Hi, I'm not finding 'Egotist' here in the styles, what would be an alternative?

Hey! Are you not seeing it under Your Layers or are you not seeing it under Select a New Theme?

Hi, all I see is: Snakes & Boxes 1230789 wizard. I tried looking for it in select new theme.

Try going through the "INSTALLING THE THEME" instructions again. You'll want to start by creating a new style-specific layer, select a theme for Practicality, etc.

Edited 2024-12-13 17:07 (UTC)

Thank you!!! It worked. I'm not sure why, but for some reason I was not getting the layer step but finally figured it out when i took a break from trying to figure it out and you told me to relook at the instructions again. Think I got it on their correctly.

I'm glad it worked! Let me know if there's anything else you need second eyes on. I'm always happy to help.

Thank you! your awesome! Only thing I'm seeing is my Deadpool gif duplicating a little on the sides, not sure why that happened, but I'll try to figure it out. Thank you again!

What you want to do is go into Custom Text and change "sidebar-image" to "custom-image". (My layouts all have slightly different instructions, lol, it's a little confusing.)

I think I'm going to have to use this just cause its our Sunshine!

LAYOUT: Egotist

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject