LAYOUT: Personable

[baisemain]

[ PREVIEW ]

Featuring: Simple Generator-inspired layout, everyone's display names beside their journal entries, can be edited using DW's customize style interface.

LAST UPDATE 12/12/2023: Fixed how entry poster names display in communities.
INSTALLING THE THEME

• Go to Your Layers under Advanced Customization. Under "Create a style-specific layer", select Type: Theme and Style: For the Bold. 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" = "Personable"; layerinfo redist_uniq = "forthebold/personable"; layerinfo "author_name" = "baisemain"; ##=============================== ## Default Page Colors ##=============================== set color_page_background = "#EDEDED"; set color_page_link = "#3dac8e"; set color_page_link_hover = "#12332a"; set color_page_link_visited = "#3dac8e"; set color_page_text = "#707070"; set color_page_title = "#333"; set control_strip_bgcolor = "#fff"; set control_strip_linkcolor = "#3dac8e"; set control_strip_fgcolor = "#333"; set control_strip_bordercolor = "#fff"; ##=============================== ## Default Entry Colors ##=============================== set color_entry_background = "#fff"; set color_entry_date = "#ababab"; set color_entry_interaction_links = "#3dac8e"; set color_entry_link = "#3dac8e"; set color_entry_link_hover = "#12332a"; set color_entry_link_visited = "#3dac8e"; set color_entry_text = "#333"; set color_entry_title = "#3dac8e"; set color_entry_title_border = "#999"; set color_entry_userpic_border = "#fff"; set color_comment_title = "#333"; set color_comment_title_border = "#999"; set color_comment_userpic_border = "#333"; set color_calendar_background = "#f5f5f5"; set color_calendar_text = "#333"; ##=============================== ## Default Module Colors ##=============================== set color_module_background = "#3dac8e"; set color_module_link = "#fff"; set color_module_link_hover = "#fff"; set color_module_link_visited = "#fff"; set color_module_text = "#333"; set color_module_title = "#333"; set color_module_title_border = ""; set color_module_profile_userpic_border = "#fff"; ##=============================== ## Default Layout Settings ##=============================== set entry_userpic_style = "small"; set font_base = "'Nunito Sans', Verdana, Arial, sans-serif"; set font_module_text_units = "em"; set include_default_stylesheet = true; set layout_type = "one-column-split"; set font_sources = "https://fonts.googleapis.com/css?family=Nunito+Sans:400,400i,700"; set linked_stylesheet = ""; set module_active_show = false; set module_calendar_show = false; set module_credit_show = false; set module_customtext_order = 1; set module_customtext_show = true; set module_cuttagcontrols_show = false; set module_pagesummary_show = false; set module_poweredby_show = false; set module_search_show = false; set module_syndicate_show = false; set module_tags_opts_type = "multi"; set module_time_show = false; set module_userprofile_show = false; set sidebar_width = "18em"; set sidebar_width_doubled = "36em"; set text_posting_in = " "; set text_view_recent = "Recent"; set text_view_friends_comm = "Members"; set userpics_position = "left"; ##=============================== ## Default Custom CSS ##=============================== set custom_css = "/* \"PERSONABLE\" by baisemain.dreamwidth.org */ /* GENERAL */ body { line-height:1.5; } ul { padding:0; } blockquote { padding:15px; background-color:transparent; border:2px solid #EEE; border-radius:0; } .ljuser img { height:12px; width:auto; margin-bottom:4px; } #lj_controlstrip td { font-size:10px; font-family:Arial,sans-serif; } #lj_controlstrip #lj_controlstrip_userpic img { border-radius:100px; } #lj_controlstrip .ljuser img { height:10px; width:auto; } #lj_controlstrip select, #lj_controlstrip input { padding:0 4px; border-color:#CCC; border-radius:4px; font-size:10px; } #lj_controlstrip select { padding:2px 0; } #tertiary { display:none; } .inner { position:relative; } #footer { text-align:right; } #secondary > .inner:first-child, #header, #footer, .month, .tags-container, .entry { margin:25px auto; padding:20px; max-width: 600px; /* entry width */ } /* TITLES */ #header { margin:20px auto 50px; -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } h1#title { display:inline-block; padding:6px 14px; line-height:1; background-color:#FFF; color:#000; } h1#title a { color:#000; } h2#subtitle { display:block; margin:-4px 20px; padding:10px 12px; line-height:1; background-color:#000; color:#FFF; font-size:1em; letter-spacing:1px; text-transform:uppercase; text-align:center; } h2#pagetitle { display:none; } @media only screen and (min-width: 54em) { h2#subtitle { margin:-4px 50px; } } /* HEADER MODULE */ #secondary > .inner:first-child { margin:0 auto 50px; padding:20px; border-radius:0; } .module { display:none; clear:both; margin-bottom:0; } .module-customtext, .module-navlinks { display:block; } .module-customtext > .module-header { display:none; } .module-navlinks { font-size:1.2em; } .module-navlinks .module-list-item { display:inline; margin:0; padding:0; } .module-navlinks .module-list-item a { margin-left:5px; } .module-navlinks .module-list-item a.network { display:none; } /* hide Network in navlinks */ .module-customtext .bio-image { background:#FFF; /* image border color */ margin-bottom:1em; margin-right:1em; float:left; border-radius:20px; padding:8px; max-width:90%; } .module-customtext .bio-text { color:#FFF; /* text color */ font-size: 13px; padding:15px 0; } /* NAVIGATION */ .navigation { margin:5px; text-align:center; text-transform:uppercase; } .navigation li { color:#000; background-color:#FFF; margin:0 5px; padding:2px 8px; font-size:0.8em; text-transform:uppercase; } .page-top { display:inline-block; background-color:#FFF; margin:0 5px; padding:2px 8px; font-size:0.8em; text-transform:uppercase; } /* ENTRIES */ .entry { padding:20px; margin:25px auto 50px; } .entry .userpic { float:left; margin-top:10px; } .entry .userpic img { background-color:transparent; padding:0; border:8px solid; border-radius:20px; width:80px; height:auto; } .entry .entry-poster .ljuser:nth-child(2) { margin-left:1em; } .entry .entry-title, .entry .entry-title a { margin:0; padding:0; } .entry .datetime { text-transform:uppercase; letter-spacing:1px; } .entry .inner-entry-userpic { float:left; max-width:140px; padding-top:10px; padding-left:10px; font-size:12px; line-height:1; } .entry .inner-entry-userpic .display-name { display:inline-block; background-color:#000; color:#FFF; padding:4px 12px; margin-top:1em; text-align:center; -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .entry .entry-content { clear:both; border-top:0; padding:15px 0; } .entry .tag { margin:15px 0 0 0; padding-left:20px; text-transform:uppercase; font-size:0; font-weight:bold; line-height:22px; background:url('https://i.imgur.com/nSm7Sij.png') no-repeat; background-position:left 3px; } .entry .tag a { padding:0 5px; font-size:10px; } .entry ul.entry-interaction-links { font-size:13px; } .entry ul.entry-interaction-links li { margin:0 0 0 10px; } .entry .poster { float:none; margin:0; } @media only screen and (min-width: 54em) { .has-userpic .entry .userpic { margin:-40px 0 15px -130px; } .entry .userpic img { background-color:#FFF; border:0; border-radius:20px; padding:8px; width:80px; height:auto; } .entry .entry-poster { position: relative; display: block; float: right; background-color: #FFF; margin-top: -10px; padding: 4px 8px 1px; z-index: 2; -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); font-size: 0; line-height: 8px; } .entry .entry-poster .ljuser { text-transform:uppercase; letter-spacing:1px; } .entry .entry-poster .ljuser a { font-size:9px; color:#000; } .entry .entry-poster .ljuser img { display:none; } .entry .entry-poster .ljuser:nth-child(2) { margin-left:0; } .entry .inner-entry-userpic { position:absolute; padding:0; top:65px; left:-115px; width:100px; line-height:1; text-align:center; } .entry .inner-entry-userpic .display-name { color: #FFF; background-color: #000; position: relative; display: block; float: right; padding: 8px 4px 6px; font-size: 11px; margin-top: -2px; margin-right: 15px; min-width: 100px; -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); -o-transform: rotate(-5deg); -ms-transform: rotate(-5deg); transform: rotate(-5deg); } .entry .entry-content { clear: none; } } "; ##=============================== ## Custom Functions ##=============================== # 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 "<div class=\"inner-entry-userpic\">\n"; print safe "<span class=\"poster entry-poster $emptyclass\">"; 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 "</div>"; }


• Go to Your Custom Layers under Select Style. Find the theme called "Personable" 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 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 image url and text with your own content. You can also change the colour of the image border and the text colour here.
  
  <img class="bio-image" src="https://78.media.tumblr.com/31a6d13d1cdb48bbb49df93093566994/tumblr_opi541sIMy1ulk1x5o5_500.gif" style="width:270px; background:#FFF;"><!-- --><div class="bio-text" style="color:#FFF;">Topping candy jujubes dragée tootsie roll gummies brownie soufflé bonbon. Tiramisu tootsie roll jelly-o carrot cake fruitcake marzipan pastry sugar plum. Caramels cupcake macaroon sesame snaps.</div>


• To customize your layout, you can just use DW's custom options for most things. Edit the colours (and edit the navstrip colours), add background image(s).


• 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 navigation strip: Go to Display Settings, scroll down to Navigation Strip and uncheck boxes. The navstrip is GOOD actually and you should use it!
  
  
  • Disable the contextual hover over icons: Go to Display Settings, scroll down to Hover Menu and change the dropdown to "Nothing."


• If you want to get more hands-on (and you know your way around CSS), you can try messing around in the Custom CSS, which is preloaded for you!

Please ask below if you have any questions!

Comments

[lovesgaze]

hi hi this isn't a question i just wanted to say your layouts are stunning and i adore all of them! and i love how clear and easy to follow your installation instructions are. thank you for sharing your ideas <3 (i hope it's okay to comment this here, i'm snagging this layout for a journal and i just had to say this!)