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

Journal layouts

06/02/2017

06/02/2017

Crossroad

Welcome!

Terms of use

Layouts

Links

Resources