myrtillenne

header image (set to "cover")
header icon (200x200px)
navigation links, links list, tags list, custom text
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - crossroad (boxes and borders) - https://myrtillenne.dreamwidth.org
- image - https://unsplash.com
 
-------------------------------------*/

/*--------------- options ---------------*/

:root {
  --text-size: 16px;
  --text-color: #444466;
  --line-height: 1.5;
  --background-color: #f1f2f8;
  --link-color: #6541c2;
  --link-hover-color: #b152af;
  --main-font: Open Sans, sans-serif;
  --title-font: Denk One, sans-serif;
  --content-width: 1200px;
  --header-height: 320px;
  --sidebar-width: 320px;
  --header-image: url(https://rosecarmine.dreamwidth.org/file/108849.jpg);
  --header-icon: url(https://rosecarmine.dreamwidth.org/file/108687.jpg);
  --header-icon-width: 200px;
  --header-icon-height: 200px;
  --title-first-letter: #edbce3;
  --subtitle-color: #444466;
  --sidebar-background-color: #5a5a98;
  --sidebar-text-color: #d6d7e4;
  --sidebar-link-color: #fefefe;
  --sidebar-link-hover-color: #edbce3;
  --entry-background-color: #fefefe;
  --entry-border-color: #edbce3;
  --entry-inner-border-color: #d6d7e4;
  --entry-title-color: #5a5a98;
  --entry-title-hover-color: #b152af;
}

/*--------------- general ---------------*/

H1,
H2,
H3 {
  margin: 0.25em 0;
  padding: 0.25em 0;
}

img {
  border: none;
}

hr {
  display: none;
}

body {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  background-color: var(--background-color);
  color: var(--text-color);
}

a {
  color: var(--link-color);
}
a:hover {
  color: var(--link-hover-color);
}

a,
a:link,
a:visited,
a:active {
  text-decoration: none;
  transition: all 0.4s ease;
}

q {
  font-style: italic;
}

blockquote {
  border: 1px solid var(--entry-inner-border-color);
  margin: 1em 0;
  padding: 1.5em;
  font-style: italic;
}

blockquote:first-letter {
  font-family: var(--title-font);
  color: var(--entry-title-hover-color);
  font-size: 1.5em;
  line-height: 1em;
}

/*------------ content ------------*/

#primary > .inner:first-child {
  margin: 50px 0;
}

@media (min-width: 640px) {
  #primary > .inner:first-child {
    margin: 50px;
  }
}

@media (min-width: 1024px) {
  #content {
    border-left: var(--sidebar-width) solid transparent;
    max-width: var(--content-width);
    margin: 0 auto;
    box-sizing: border-box;
  }

#content:before {
    content: "";
    position: fixed;
    top: 0;
    margin-left: calc(-1 * var(--sidebar-width));
    width: var(--sidebar-width);
    height: 100%;
    background: var(--sidebar-background-color);
    z-index: -1;
  }

#primary {
    width: 100%;
    margin-right: -100%;
    margin-left: 0;
    float: left;
  }

#secondary {
    float: left;
    width: var(--sidebar-width);
    margin-left: calc(-1 * var(--sidebar-width));
  }
}

@media (min-width: 1280px) {
  #primary > .inner:first-child {
    padding-right: 80px;
  }
}
/*--------------- header ---------------*/

#header {
  background: var(--sidebar-background-color);
  clear: both;
  text-align: center;
  padding: 2em;
}

@media (min-width: 1024px) {
  #header {
    padding: 0;
    padding-bottom: var(--header-height);
    background: transparent;
    position: relative;
    text-align: left;
  }

#header:before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: var(--header-height);
    background-image: var(--header-image);
    background-size: cover;
    background-position: center center;
  }

#header > .inner:first-child {
    max-width: var(--content-width);
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
  }

#header .module-wrapper {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2;
    background: var(--sidebar-background-color);
  }

.module-section-header {
    max-width: var(--content-width);
    margin: 0 auto;
  }
}

h1#title {
  padding: 0.5em;
  margin: 0;
  text-transform: uppercase;
  line-height: 1.2;
  font-size: 1.5em;
  text-align: center;
  font-family: var(--title-font);
  font-weight: normal;
}

h1#title a {
  color: var(--sidebar-link-color);
}

h1#title:first-letter {
  color: var(--title-first-letter);
}

h2#subtitle {
  font-size: 1em;
  line-height: 1;
  text-transform: uppercase;
  padding: 0;
  margin: 0;
  color: var(--sidebar-text-color);
  font-weight: normal;
}

@media (min-width: 1024px) {
  h1#title {
    width: var(--sidebar-width);
    background: var(--sidebar-background-color);
    box-sizing: border-box;
  }

h2#subtitle {
    padding: 0.5em 50px;
    color: var(--subtitle-color);
    text-align: left;
    flex: 1;
  }
}

h2#pagetitle {
  display: none;
}

#header-decoration {
  display: none;
}

@media (min-width: 1024px) {
  #header-decoration {
    display: block;
    position: absolute;
    left: 0;
    bottom: calc(-1 * var(--header-height));
    width: var(--sidebar-width);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
  }

#header-decoration:before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    height: var(--header-height);
    background: var(--sidebar-background-color);
    opacity: 0.5;
  }

#header-decoration-inner {
    width: var(--header-icon-width);
    height: var(--header-icon-height);
    border: 5px solid var(--sidebar-background-color);
    background: var(--header-icon);
    position: relative;
  }
}

/*--------------- entries ---------------*/

.entry,
.full .comment {
  border: 1px solid var(--entry-border-color);
  background: var(--entry-background-color);
  margin: 50px 0;
  padding: 2em;
  position: relative;
}

.entry .header,
.comment .header {
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: 0.5em;
}

.sticky-entry-icon,
.admin-post-icon {
  display: none;
}

.entry .entry-title {
  font-family: var(--title-font);
  margin: 0 0 0.5em;
  padding: 0;
  font-weight: normal;
  font-size: 1.5em;
  color: var(--entry-title-color);
}

.entry .entry-title a,
.full .comment-title a {
  color: var(--entry-title-color);
}

.entry .entry-title a:hover,
.full .comment-title a:hover {
  color: var(--entry-title-hover-color);
}

.no-subject .entry-title {
  margin: 0;
}

.restrictions img,
.access-filter img {
  display: none;
}

.security-protected .access-filter:before {
  content: "LOCKED";
}

.security-private .access-filter:before {
  content: "PRIVATE";
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
}

.restrictions-18 .restrictions:before {
  content: "18+";
}

.userpic {
  float: right;
  margin-left: 1em;
}

.userpic img {
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

@media (min-width: 800px) {
  .userpic img {
    max-width: 100px;
    max-height: 100px;
  }
}

@media (min-width: 1280px) {
  .userpic {
    position: absolute;
    top: -1px;
    right: -121px;
    margin: 0;
  }

.userpic img {
    border: 5px solid var(--sidebar-background-color);
  }
}

.entry .poster,
.full .poster {
  display: block;
  text-transform: uppercase;
}

.poster .ljuser b {
  font-weight: normal;
}

.poster.empty,
.poster .ljuser img {
  display: none;
}

.entry-content {
  margin: 2em 0;
}

@media (min-width: 800px) {
  .entry-content {
    text-align: justify;
  }
}

.entry-content ol,
.comment-content ol,
.entry-content ul,
.comment-content ul {
  padding-left: 1em;
}

.entry-content li,
.comment-content li {
  list-style-position: inside;
}

.entry-content img,
.comment-content img {
  max-width: 100%;
  height: auto;
}

.metadata ul {
  display: inline;
  list-style: none;
  margin: 0;
  padding: 0;
}

.metadata li {
  margin-bottom: 0.5em;
}

.metadata-label,
.tag-text {
  text-transform: uppercase;
}

.tag ul {
  display: inline;
  margin-left: 0;
  padding-left: 0;
}

.tag ul li {
  display: inline;
}

ul.entry-management-links,
ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  display: inline;
  text-transform: uppercase;
  font-family: var(--title-font);
}

ul.entry-management-links:before {
  content: "";
  display: block;
  margin-top: 2em;
}

ul.entry-management-links li,
ul.entry-interaction-links li {
  display: inline;
  margin-right: 0.25em;
}

.entry-interaction-links a,
.entry-management-links a {
  color: var(--entry-title-color);
}

.entry-interaction-links a:hover,
.entry-management-links a:hover {
  color: var(--entry-title-hover-color);
}

/*--------------- comments ---------------*/

.comment-pages {
  background: var(--entry-background-color);
  margin: 10px 0;
  padding: 1em 2em;
  font-family: var(--title-font);
  border: 1px solid var(--entry-border-color);
  text-transform: uppercase;
}

.comment-pages a {
  color: var(--entry-title-color);
}

.comment-pages a:hover {
  color: var(--entry-title-hover-color);
}

.comment-wrapper {
  min-width: 15em;
}

.partial .comment {
  border: 1px solid var(--entry-border-color);
  background: var(--entry-background-color);
  padding: 2em;
}

.comment .comment-title {
  margin: 0;
}

.full .comment-title {
  font-family: var(--title-font);
  margin: 0 0 0.5em;
  padding: 0;
  font-weight: normal;
  font-size: 1.2em;
  color: var(--entry-title-color);
}

.no-subject .comment-title {
  margin: 0;
}

.full .comment-from-text {
  text-transform: uppercase;
}

.comment .poster-ip {
  display: block;
  text-transform: uppercase;
}

.comment-content {
  padding: 2em 0;
}

.partial .comment {
  margin: 10px 0;
}

.multiform-checkbox {
  display: inline;
  padding-right: 0.5em;
  font-family: var(--title-font);
  text-transform: uppercase;
}

ul.comment-management-links,
ul.comment-interaction-links {
  display: inline;
  font-family: var(--title-font);
  margin: 0;
  padding: 0;
}

ul.comment-management-links li,
ul.comment-interaction-links li {
  text-transform: uppercase;
  padding-right: 0.5em;
  display: inline;
}

.comment-interaction-links a,
.comment-management-links a {
  color: var(--entry-title-color);
}

.comment-interaction-links a:hover,
.comment-management-links a:hover {
  color: var(--entry-title-hover-color);
}

.bottomcomment {
  color: var(--subtitle-color);
}

#comments ul.entry-management-links,
#comments ul.entry-interaction-links,
.comment-pages.bottompages {
  display: none;
}

#qrformdiv {
  right: 0 !important;
  min-width: 100% !important;
  padding: 0;
}

#qrform {
  margin-top: 1.5em;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px solid var(--entry-inner-border-color);
  font-family: var(--main-font);
  font-size: var(--text-size);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: transparent;
  border: 0;
  font-size: var(--text-size);
  padding: 0.5em;
  color: var(--entry-title-color);
  text-transform: uppercase;
  line-height: 1;
  font-family: var(--title-font);
}

#postform {
  margin: 50px 0;
  border: 1px solid var(--entry-border-color);
  background: var(--entry-background-color);
  padding: 2em;
}

/*------------ archive, tags, icons containers ------------*/

.month-wrapper,
#archive-month,
.tags-container,
.icons-container {
  padding: 2em;
  margin: 50px 0;
  position: relative;
  background: var(--entry-background-color);
  border: 1px solid var(--entry-border-color);
}

.month .header,
.tags-container .header,
.icons-container .header {
  margin-bottom: 2em;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-family: var(--title-font);
  text-transform: uppercase;
  font-weight: normal;
  font-size: 1.25em;
  padding: 0;
  color: var(--entry-title-color);
}

@media (min-width: 1280px) {
  .month .header,
  .tags-container .header,
  .icons-container .header {
    width: 110px;
    height: 110px;
    background: var(--sidebar-background-color);
    position: absolute;
    right: -121px;
    top: -1px;
    text-align: center;
    display: flex;
    align-items: center;
  }

.month-wrapper h3,
  .tags-container h2,
  .icons-container h2 {
    padding: 0.5em;
    color: var(--sidebar-link-color);
  }

.month-wrapper h3:first-letter,
  .tags-container h2:first-letter,
  .icons-container h2:first-letter {
    color: var(--title-first-letter);
  }
}

.month .footer,
#primary .manage-link {
  margin-top: 2em;
  font-family: var(--title-font);
  text-transform: uppercase;
}

.month .footer a,
#primary .manage-link a {
  color: var(--entry-title-color);
}

.month .footer a:hover,
#primary .manage-link a:hover {
  color: var(--entry-title-hover-color);
}

/*------------ archive ------------*/

.day-date {
  display: none;
}

.month caption {
  display: none;
}

table.month {
  width: 100%;
  text-align: center;
  border-collapse: separate;
  border-spacing: 3px;
}

table.month td {
  border: 1px solid var(--entry-inner-border-color);
  max-width: 3em;
  height: 3em;
}

table.month th {
  font-family: var(--title-font);
  text-transform: uppercase;
  padding-bottom: 1em;
}

table.month td p {
  margin: 0;
}

.month dl {
  margin: 0;
}

.month dl dt {
  font-family: var(--title-font);
  text-transform: uppercase;
  font-weight: normal;
}

.month dd {
  margin: 2em 0;
}

.month dl .time {
  padding-right: 0.5em;
}

.month dl h3 {
  display: inline;
  font-size: 1em;
}

.page-month .month .entry-poster {
  margin-right: 0.5em;
}

.month dl br {
  display: block;
}

#archive-month .navigation {
  text-align: center;
}

#archive-month .navigation li {
  display: inline-block;
}

/*------------ tags ------------*/

ul.ljtaglist {
  padding: 0;
  margin-left: 1em;
  list-style: none;
}

ul.ljtaglist:first-child,
.tags_cloud ul {
  padding: 0;
  margin: 0;
}

ul.ljtaglist li:before {
  content: "-";
  padding-right: 0.5em;
}

/*------------ icons ------------*/

.sorting-options ul {
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

.sorting-options ul li {
  display: inline;
}

.icon-keywords ul {
  display: inline;
  margin-left: 0;
  padding-left: 0;
}

.icon-keywords ul li {
  display: inline;
}

.page-icons .toppages {
  display: none;
}

.page-icons .bottompages {
  text-align: center;
  margin-top: 2em;
}

.icon {
  border: 1px solid var(--entry-inner-border-color);
  display: flex;
  margin: 10px 0;
}

.icon-image {
  border-left: 1px solid var(--entry-inner-border-color);
  order: 3;
}

.icon-image img {
  display: block;
  padding: 0.5em;
}

.icon-info {
  padding: 2em;
  flex: 1;
}

.icon-pages p {
  margin: 0;
}

/*------------ modules ------------*/

#secondary {
  background: var(--sidebar-background-color);
  position: relative;
  z-index: 3;
}

#secondary > .inner:first-child {
  padding: 0 2em 2em;
}

#secondary .module {
  padding-top: 2em;
  color: var(--sidebar-text-color);
}

#secondary .module li {
  margin-top: 0.25em;
}

.module a {
  color: var(--sidebar-link-color);
}

.module a:hover {
  color: var(--sidebar-link-hover-color);
}

.module h2 {
  text-transform: uppercase;
  text-align: center;
  font-size: 1em;
  font-weight: normal;
  padding: 0;
  line-height: 1;
  margin-bottom: 1.5em;
  font-family: var(--title-font);
}

.module h2,
.module h2 a {
  color: var(--sidebar-link-color);
}

.module h2:first-letter {
  color: var(--title-first-letter);
}

.module-content ul {
  margin: 0 0 0 1em;
  padding: 0;
  list-style: none;
}

.module-content ul:first-child {
  margin: 0;
}

.module-navlinks {
  text-transform: uppercase;
  text-align: center;
  font-family: var(--title-font);
  line-height: 1.2;
}

@media (min-width: 1024px) {
  .module-navlinks {
    margin-left: var(--sidebar-width);
    text-align: left;
  }

.module-navlinks .module-content {
    padding: 1em;
  }
}

.module-navlinks ul {
  padding: 0;
  margin: 0;
}

.module-navlinks ul li {
  display: inline-block;
  padding: 0 0.25em;
}

.module-navlinks li:before {
  color: var(--title-first-letter);
}

.module-navlinks li:first-child:before {
  content: "01. ";
}

.module-navlinks li:nth-child(2):before {
  content: "02. ";
}

.module-navlinks li:nth-child(3):before {
  content: "03. ";
}

.module-navlinks li:nth-child(4):before {
  content: "04. ";
}

.module-navlinks li:nth-child(5):before {
  content: "05. ";
}

.module-navlinks li:nth-child(6):before {
  content: "06. ";
}

.module-navlinks li:nth-child(7):before {
  content: "07. ";
}

.module-navlinks a {
  display: inline-block;
}

.module-navlinks a:first-letter {
  color: var(--title-first-letter);
}

.module-typelist li {
  list-style: decimal-leading-zero inside;
  color: var(--title-first-letter);
  font-family: var(--title-font);
}

.module-typelist li:first-letter {
  color: var(--title-first-letter);
  font-family: var(--title-font);
}

.module-typelist li a {
  font-family: var(--main-font);
  letter-spacing: 1px;
}

.module-tags_list li:before,
.module-tags_multilevel li:before {
  content: "-";
  padding-right: 0.5em;
}

.module .manage-link,
.module-userprofile,
.module-calendar,
.module-cuttagcontrols,
.module-pagesummary,
.module-active,
.module-credit,
.module-syndicate,
.module-subscriptionfilters,
.module-search,
.module-time,
.module-powered {
  display: none;
}

/*------------ navigation ------------*/

#entries .navigation,
#archive-year .navigation {
  text-align: center;
  margin: 50px 0;
}

.navigation ul {
  font-family: var(--title-font);
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

#entries .navigation li,
#archive-year .navigation li,
#archive-year .navigation li.active {
  display: inline-block;
  border: 1px solid var(--entry-border-color);
  background: var(--entry-background-color);
  margin: 5px;
  padding: 0;
  padding: 0.75em 1em;
  line-height: 1;
}

.navigation a {
  color: var(--entry-title-color);
}

.navigation a:hover {
  color: var(--entry-title-hover-color);
}

#entries .navigation .page-separator,
.noentries,
.topnav {
  display: none;
}

/*------------ footer ------------*/

#footer {
  padding: 0;
  clear: both;
  font-family: var(--title-font);
  line-height: 1.2;
}

#footer .inner {
  background: var(--sidebar-background-color);
  text-align: center;
}

@media (min-width: 1024px) {
  #footer {
    max-width: var(--content-width);
    margin: 0 auto;
  }

#footer .inner {
    width: var(--sidebar-width);
    position: relative;
    z-index: 4;
  }
}

.page-top {
  padding: 1em;
  text-transform: uppercase;
}

.page-top:first-letter {
  color: var(--title-first-letter);
}

#footer a {
  color: var(--sidebar-link-color);
}

#footer a:hover {
  color: var(--sidebar-link-hover-color);
}

/*------------ contextual pop-up ------------*/

div.ContextualPopup {
  background: var(--sidebar-background-color);
  color: var(--sidebar-text-color);
  font-family: var(--main-font);
  border: 0;
  padding: 2em;
}

.ContextualPopup a {
  color: var(--sidebar-link-color);
}

.ContextualPopup a:hover {
  color: var(--sidebar-link-hover-color);
}

div.ContextualPopup .Relation {
  font-family: var(--title-font);
  text-transform: uppercase;
  margin-bottom: 1em;
  font-size: 1em;
}

div.ContextualPopup .Actions ul {
  padding: 0;
  margin: 0;
}

div.ContextualPopup .Userpic {
  border: 0;
}

/*------------ control strip ------------*/

#lj_controlstrip {
  color: var(--sidebar-text-color);
  background: var(--sidebar-background-color);
  justify-content: center;
  padding: 0.75em 0;
}

#lj_controlstrip > div {
  font-family: var(--main-font);
  font-size: var(--text-size);
  line-height: var(--line-height);
  padding: 0.25em 0.5em;
  flex-grow: 0;
}

#lj_controlstrip a {
  font-family: var(--main-font);
  color: var(--sidebar-link-color);
}

#lj_controlstrip a:hover {
  color: var(--sidebar-link-hover-color);
  text-decoration: none;
}

#lj_controlstrip .ljuser b {
  font-weight: normal;
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

#lj_controlstrip_statustext {
  color: var(--sidebar-text-color);
  font-weight: normal;
  font-size: var(--text-size);
}

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 0;
  font-size: var(--text-size) !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  background: transparent;
  text-transform: uppercase;
  font-family: var(--title-font) !important;
  color: var(--title-first-letter);
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip_user,
#lj_controlstrip_login,
#lj_controlstrip_actionlinks {
  border: 0;
}

How to install:

Go to the "Select style" page, search for "Boxes and Borders" and apply any theme.
Choose the "1 Column (modules at bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click the "Custom CSS" tab and paste the code into the "Use embeded CSS" field. Uncheck "Use layout's stylesheet(s)". Paste the following https://fonts.googleapis.com/css2?family=Open+Sans&display&family=Denk+One&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab and enable "Custom text" if you want to display it. The layout supports "Navigation", "Links list", "Tags" and "Custom text". Uncheck the other modules.
Click on the "Presentation" tab. In the "Additional options" section select "text-only" for "Select whether entry management links are printed as text or using the available icons" and "Select whether comment management links are printed as text or using the available icons".

Resource: image from unsplash.com

Flat | Top-Level Comments Only

From:

saga

this is gorgeous and is in my favourite colours AHHH.

rosecarmine

Thanks! ^_^

serenitywheeler

Hello. I'm using this layout on my blog hisana.dreamwidth.org. I tried adding custom text on the side like displayed in the preview, but for some reason it's not showing up. Was there something else I need to do?

Edited Date: 18/03/2017 03:26 am (UTC)

Hello! Make sure the custom text module is enabled. Go to Customize Style, click on the Modules tab and see if the checkbox in front of no. 13 Custom Text is checked.

Thank you so much! Turns out custom text wasn't checked at all. Lol! Funny how little things can resolve huge problems. Awesome themes by the way. I think yours are the best on this site and Tumblr. :)