myrtillenne

navigation links, links list, tags list, custom text
comment pages
icon pages

Code:

/*-------------------------------------

- layout - red ribbon (basic boxes) - https://myrtillenne.dreamwidth.org 
- icon font - material icons - https://material.io

-------------------------------------*/

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

:root {
  --text-size: 16px;
  --text-color: #6b4634;
  --line-height: 1.5;
  --body-background-color: #f2e8d0;
  --link-color: #da1b50;
  --link-hover-color: #6b4634;
  --content-width: 800px;
  --main-font: Lora, serif;
  --title-font: Rochester, serif;
  --ribbon-background-color: #e83c6b;
  --navlinks-color: #f2e8d0;
  --navlinks-hover-color: #f9f3e8;
  --content-background-color: #e3d1a3;
  --content-border-color: #e3d1a3;
  --content-background-image: url("https://rosecarmine.dreamwidth.org/file/86275.jpg");
  --entry-background-color: #f9f3e8;
  --entry-border-color: #986349;
  --title-color: #986349;
  --icon-size: 100px;
}

/*--------------- fonts ---------------*/

@font-face {
  font-family: "Material Icons";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2)
    format("woff2");
}

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

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

img {
  border: none;
}

hr {
  display: none;
}

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

html body {
  margin: 0;
}

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 {
  position: relative;
  padding: 1em;
  margin: 1.5em 0 1em;
  font-style: italic;
  border-top: 1px solid;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
}

blockquote:after {
  content: "format_quote";
  font-size: 40px;
  font-family: Material Icons;
  color: var(--title-color);
  position: absolute;
  font-style: normal;
  top: -20px;
  left: 0;
  right: 0;
  line-height: 40px;
  width: 40px;
  height: 40px;
  background: var(--entry-background-color);
  margin: 0 auto;
}

textarea {
  border: 1px dashed var(--content-border-color);
}

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

#canvas {
  margin: 20px 0;
}

@media (min-width: 600px) {
  #canvas {
    margin: 50px;
  }

#canvas > .inner:first-child {
    margin: 0 auto;
    max-width: var(--content-width);
    background-image: var(--content-background-image);
    background-color: var(--content-background-color);
    padding: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
    border-radius: 3px;
  }
}

#content {
  background: var(--entry-background-color);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  padding: 10px;
}

#content > .inner:first-child {
  border: 1px dashed var(--content-border-color);
  padding: 0 2em 1em;
}

#primary,
#secondary {
  clear:both;
}

#primary > .inner:first-child,
#secondary > .inner:first-child {
  padding: 0;
}

/*--------------- header ---------------*/

#header {
  text-align: center;
  padding-top: 2em;
  float: left;
  width: 100%;
  margin: 0;
}

#journaltitles-container {
  padding: 1.5em 2em;
}

h1#title {
  font-family: var(--title-font), serif;
  font-size: 2em;
  font-weight: normal;
  color: var(--title-color);
  margin: 0;
  line-height: 1;
}

h1#title a,
h1#title a:hover {
  color: inherit;
}

h2#subtitle {
  font-size: 1em;
  margin: 0;
  font-style: italic;
  font-weight: normal;
  padding-top: 0;
}

h2#pagetitle {
  display: none;
}

#header .module-wrapper {
  background-color: var(--ribbon-background-color);
  border-top: 1px solid var(--ribbon-background-color);
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0px 8px 4px -5px rgba(0, 0, 0, 0.3);
}

@media (min-width: 600px) {
  #header .module-wrapper {
    position: relative;
    margin: 0 -30px;
    border-left: 3px solid rgba(0, 0, 0, 0.1);
    border-right: 3px solid rgba(0, 0, 0, 0.1);
    border-radius: 3px 3px 0 0;
    min-height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

#header .separator-before,
  #header .separator-after {
    content: "";
    position: absolute;
    display: block;
    bottom: -30px;
    border: 20px solid var(--ribbon-background-color);
    z-index: -2;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
  }

#header .separator-before {
    left: -25px;
    border-right-width: 20px;
    border-left-color: transparent;
  }

#header .separator-after {
    right: -25px;
    border-left-width: 20px;
    border-right-color: transparent;
  }

#header .separator-before .inner {
    content: "";
    display: block;
    width: 15px;
    height: 40px;
    position: absolute;
    bottom: -20px;
    right: -20px;
    background: linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
    z-index: -1;
  }

#header .separator-after .inner {
    content: "";
    display: block;
    width: 15px;
    height: 40px;
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent);
    z-index: -1;
  }

#header .module-wrapper:before,
  #header .module-wrapper:after {
    border-color: rgba(0, 0, 0, 0.5) transparent transparent transparent;
    position: absolute;
    display: block;
    border-style: solid;
    bottom: -16px;
    content: "";
  }

#header .module-wrapper:before {
    left: -3px;
    border-width: 15px 0 0 15px;
  }

#header .module-wrapper:after {
    right: -3px;
    border-width: 15px 15px 0 0;
  }
}

.module-section-header {
  padding: 0.5em;
  width: 100%;
  box-sizing: border-box;
  background-image: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.3),
    transparent
  );
}

.module-navlinks li {
  text-transform: uppercase;
}

.module-navlinks a {
  color: var(--navlinks-color);
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  font-size: 1em;
}

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

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

.entry,
.comment {
  margin: 1.5em 0;
}

.entry .header .inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
}

.entry .datetime {
  display: flex;
  font-style: italic;
  padding: 0 1em;
  order: -1;
  flex: 0 0 100%;
  align-items: center;
}

.entry .datetime:before {
  content: "";
  height: 1px;
  background: linear-gradient(to right, transparent, var(--entry-border-color));
  flex: 1;
  margin-right: 0.5em;
}

.entry .datetime:after {
  content: "";
  height: 1px;
  background: linear-gradient(to left, transparent, var(--entry-border-color));
  flex: 1;
  margin-left: 0.5em;
}

.entry .datetime span {
  margin: 0 0.25em;
}

.entry .datetime,
.entry .datetime a,
.comment .header .datetime {
  color: var(--text-color);
}

.entry .entry-title {
  font-family: var(--title-font), serif;
  font-size: 2em;
  font-weight: normal;
  line-height: 1;
  color: var(--title-color);
  flex: 0 0 100%;
}

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

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

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

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

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

.security-protected .access-filter:before {
  content: "LOCKED";
  margin: 0 0.25em;
}

.security-private .access-filter:before {
  content: "PRIVATE";
  margin: 0 0.25em;
}

.restrictions-NSFW .restrictions:before {
  content: "NSFW";
  margin: 0 0.25em;
}

.restrictions-18 .restrictions:before {
  content: "18+";
  margin: 0 0.25em;
}

.entry .contents {
  margin-top: 1.5em;
}

.has-userpic .userpic {
  float: right;
  margin-left: 1em;
  shape-outside: circle(50%);
  position: relative;
  z-index: 1;
}

.userpic img {
  display: block;
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
  border: 2px solid var(--content-border-color);
  border-radius: 50%;
}

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

.entry .poster {
  display: block;
  padding-top: 1.5em;
}

.entry .poster {
  font-size: 0;
}

.entry .poster .ljuser {
  font-size: var(--text-size);
  padding-right: 0.25em;
}

.entry .poster .ljuser:nth-child(1):before {
  content: "Written by ";
}

.entry .poster .ljuser:nth-child(2):before {
  content: "in ";
}

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

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

.entry-content,
.comment-content {
  margin: 1.5em 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;
}

.cuttag-action {
  display: flex;
  align-items: center;
  line-height: 1;
}

.cuttag-action img {
  display: none;
}

.cuttag-action:before {
  content: "content_cut";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--title-color);
  margin-right: 5px;
}

.cuttag-action:after {
  content: "";
  height: 0;
  width: 100%;
  border-bottom: 1px dashed var(--entry-border-color);
}

.cut-open, .cut-close {
  display:none;
}

.cut-text{
  font-weight: normal;
  margin-left: 27px;
  display: block;
}

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

.metadata li,
.entry .tag {
  margin-top: 0.25em;
}

.tag {
  text-align: left;
}

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

.tag ul li {
  display: inline;
}

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

ul.entry-management-links,
ul.entry-interaction-links {
  display: inline;
  margin: 0;
  padding: 0;
  font-style: italic;
}

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

.footer {
  text-align: center;
}

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

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

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

.comment-pages {
  text-align: center;
  font-style: italic;
}

.comment-pages:first-child {
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding-top: 1.5em;
}

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

.comment {
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding-top: 1.5em;
}

.comment-thread:not(.comment-depth-1) .thread-depth:before {
  content: "subdirectory_arrow_right";
  font-family: Material Icons;
  font-size: 22px;
  vertical-align: middle;
  color: var(--title-color);
  margin-right: 5px;
}

.full .comment-title {
  text-align: center;
  font-family: var(--title-font);
  font-size: 1.5em;
  font-weight: normal;
  line-height: 1;
  padding: 0.25em 0;
}

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

.no-subject .comment .comment-title {
  background: none;
  border: none;
  padding: 0;
}

.comment .header .datetime {
  float: left;
}

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

.full .poster {
  display: block;
  clear: left;
}

ul.comment-management-links,
ul.comment-interaction-links,
.multiform-checkbox {
  margin: 0;
  padding: 0;
  display: inline;
  font-style: italic;
}

ul.comment-management-links li,
ul.comment-interaction-links li {
  display: inline;
  padding: 0 0.25em;
}

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

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

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

#postform {
  width: auto;
  margin-bottom: 1.5em;
}

#qrformdiv {
  padding: 0;
  max-width: 100%;
}

#qrform {
  margin-top: 1.5em;
}

#qrdiv input,
#qrdiv select,
#qrdiv textarea {
  border: 1px dashed var(--content-border-color);
}

#qrdiv input[type="button"],
#qrdiv input[type="submit"] {
  background: transparent;
  border: 0;
  font-size: 1em;
  padding: 0.5em;
  color: var(--link-color);
  line-height: 1;
  font-family: var(--main-font);
  font-style: italic;
}

#qrdiv .ljuser img,
#talkform-from img {
  display: none;
}

#qrformdiv .qr-meta .ljuser {
  font-size: inherit;
}

#qrformdiv .qr-meta .ljuser b {
  font-weight: normal;
  color: var(--text-color);
}

#talkform-from label {
  font-weight: normal;
}

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

.month-wrapper,
.tags-container,
.icons-container {
  margin: 1.5em 0;
}

.month .header,
.tags-container .header,
.icons-container .header {
  position: relative;
  text-align: center;
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  font-weight: normal;
  background: var(--entry-background-color);
  display: inline-block;
  font-style: italic;
  font-size: 1em;
  position: relative;
  z-index: 1;
  padding: 0 0.75em;
}

.month .header:before,
.tags-container .header:before,
.icons-container .header:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--entry-border-color),
    transparent
  );
  position: absolute;
  top: 50%;
  left: 0;
}

.month .contents,
.tags-container .contents,
.icons-container .contents {
  margin: 1.5em 0;
}

.month .footer,
.tags-container .footer,
.icons-container .footer {
  font-style: italic;
}

#primary .manage-link {
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding-top: 1.5em;
}

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

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

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

.month caption {
  display: none;
}

.day-date {
  display: none;
}

.month table {
  border: none;
  text-align: center;
  border-collapse: collapse;
  width: 80%;
}

table.month {
  margin: 0 auto;
}

table.month td {
  width: 3.25em;
  height: 3.25em;
  padding: 0.25em;
  border-bottom: 1px solid var(--entry-border-color);
}

table.month th {
  padding: 0.25em;
  font-style: italic;
  border-bottom: 1px solid var(--entry-border-color);
}

table.month td p {
  margin: 0;
  display: inline;
}

table.month td p:before {
  content: "( ";
}

table.month td p:after {
  content: " )";
}

table.month td.day-has-entries .label {
  font-weight: bold;
}

.month dl {
  margin: 1.5em 0;
}

.month dl dt {
  font-style: italic;
  position: relative;
  z-index: 1;
  text-align: center;
}

.month dl dt:before {
  content: "";
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--entry-border-color),
    transparent
  );
  position: absolute;
  top: 50%;
  left: 0;
  z-index: -1;
}

.month dl dt a {
  display: inline-block;
  background: var(--entry-background-color);
  color: var(--text-color);
  padding: 0 0.75em;
}

.month dd {
  margin: 1em 1em 0 0;
}

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

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

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

.month dl .tag ul {
  margin-top: 0;
}

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

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

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

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

.sorting-options ul {
  margin: 0 0 1.5em;
  padding: 0;
  text-align: center;
}

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

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

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

.icon {
  border-top: 1px solid var(--entry-border-color);
  padding: 1em 1em 0;
  margin: 1em auto 0;
  overflow: hidden;
  width: 80%;
  box-sizing: border-box;
}

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

.icon-image img {
  display: block;
}

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

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

.icon-pages p {
  margin: 0;
}

.default.label {
  font-style: italic;
}

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

.module-section-one .module {
  text-align: center;
  margin: 1.5em 0;
}

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

.module-content li {
  display: inline-block;
  padding: 0 0.5em;
}

.module-tags_cloud li,
.module-tags_cloud li a {
  font-size: 1em !important;
  padding: 0 0.25em;
  color: var(--title-color);
}

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

.tags_cloud li,
.module-tags_cloud li {
  display: inline;
}

.module-customtext .module-content {
  font-style: italic;
  text-align: left;
}

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

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

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

.topnav,
#primary .page-separator {
  display: none;
}

.navigation ul {
  text-align: center;
  font-style: italic;
  border-top: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  padding: 1.5em 0 0;
  margin: 0 0 1.5em;
}

.navigation li {
  display: inline;
  padding: 0 0.5em;
}

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

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

.navigation.empty,
.noentries {
  display: none;
}

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

#footer {
  text-align: center;
  margin-top: 20px;
}

@media (min-width: 600px) {
  #footer {
    position: fixed;
    width: 30px;
    height: 30px;
    bottom: 10px;
    right: 10px;
  }
}

.page-top {
  width: 30px;
  height: 30px;
  overflow: hidden;
  transition: all ease 0.5s;
  margin: 0 auto;
  border-radius: 30px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.page-top a:before {
  display: block;
  font-family: Material Icons;
  font-size: 24px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  text-align: center;
  content: "expand_less";
  color: var(--text-color);
  background: var(--entry-background-color);
}

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

div.ContextualPopup {
  background: var(--entry-background-color);
  border: 0;
  font-family: var(--main-font);
  font-size: 1em;
  color: var(--text-color);
  padding: 1.5em;
  width: 200px;
}

div.ContextualPopup .Relation {
  font-weight: normal;
  border-bottom: 1px solid;
  border-image: linear-gradient(
      to right,
      transparent,
      var(--entry-border-color),
      transparent
    )
    1;
  font-style: italic;
  font-size: 1em;
  text-align: center;
  padding: 1em 0;
}

div.ContextualPopup .Userpic {
  border: 0;
  float: none;
  text-align: center;
}

div.ContextualPopup .Userpic img {
  border: 2px solid var(--content-border-color);
  border-radius: 50%;
}

.ContextualPopup .Actions ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

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

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

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

#lj_controlstrip {
  background: var(--entry-background-color);
  color: var(--text-color);
  justify-content: center;
  padding: 0.75em 0;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
  width: 100%;
}

@media (min-width: 600px) {
  #lj_controlstrip {
    transform: translateY(-100%);
    position: fixed;
    transition: transform 0.7s;
    z-index: 9;
  }

#lj_controlstrip:before {
    content: "";
    position: absolute;
    bottom: -40px;
    height: 40px;
    width: 30px;
    right: 10px;
  }

#lj_controlstrip:after {
    font-family: "Material Icons";
    content: "more_horiz";
    font-size: 22px;
    position: absolute;
    bottom: -40px;
    height: 30px;
    width: 30px;
    right: 10px;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    color: var(--text-color);
    background: var(--entry-background-color);
    border-radius: 30px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }

#lj_controlstrip:hover {
    transform: translateY(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(--link-color);
}

#lj_controlstrip a:hover {
  text-decoration: none;
}

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px dashed var(--content-border-color);
}

#lj_controlstrip input[type="submit"] {
  border: 0;
  background: transparent;
  font-size: 1em;
  font-style: italic;
  color: var(--text-color);
  font-family: var(--main-font);
  padding: 0.25em;
}

#lj_controlstrip_userpic a img {
  border-radius: 50%;
  border: 2px solid var(--content-border-color);
}

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

#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 "Basic Boxes" and apply any theme.
Choose the "1 Column (modules at top and bottom; no sidebar)" page setup.
Go to the "Customize your theme" page, click on 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=Lora&family=Lora:ital@1&family=Rochester&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. For the "Tags" module, select "Cloud" from the "Type of tags display" drop-down. Set "Navigation" to number 2, "Links list" to number 4, "Custom text" to number 5 and "Tags" to number 6. 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". For "Indentation for nested comment threads" select "Responsive".

Resources:

icon font by Google
background image from subtlepatterns.com

Flat | Top-Level Comments Only

From:

mageling

How can a layout feel more simplified yet complex at the same time? I've been using the previous version of this layout for one of my journals and this one feels so much more slick and fun to navigate! Gorgeous work as always!

rosecarmine

Thank you!

adore

Hello! This layout is lovely. I'm having trouble with one thing: the title and date of a sticky post is always getting pushed to the right corner, and whenever I click on a post, its title and date get pushed to the corner too. This also happens when I click on a post in your Live Preview of this theme; is there any way to fix it? If it helps, I use Google Chrome.

Hi! I just tested this layout on your journal in chrome and it looks fine. Can you post a screenshot, please? Or post a link to the live preview on your journal? Thanks!

Sure! Here is a screenshot of my journal, and here is a screenshot of yours when I'm using this layout.

ETA: This issue was present before I changed the userpics to square.

Edited Date: 11/10/2022 05:50 pm (UTC)

I see! You have chosen the one column page setup with the modules at bottom. Paste this somewhere in the code:

Let me know it it's fixed.

Yes, I had changed to one column with modules at bottom because when I chose one column with modules at top and bottom, the tag cloud was appearing at the top, under the header.

It worked, it's fixed now! Thank you so much!

You're welcome! 🤗

Journal layouts

Red ribbon

Red ribbon

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Welcome!

Terms of use

Layouts

Links

Resources