myrtillenne | Fresh

sidebar image (300x500px)
topbar image (700x300px)
navigation links, links list, custom text
comment pages
icon pages

Code:

/*-------------------------------------
 
- layout - fresh (basic boxes) - https://myrtillenne.dreamwidth.org
- image - https://unsplash.com
 
-------------------------------------*/

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

:root {
  --text-size: 16px;
  --text-color: #476363;
  --line-height: 1.5;
  --background-color: #f1f5f5;
  --link-color: #23afaf;
  --link-hover-color: #dbc277;
  --main-font: Cambria, serif;
  --title-font: Great Vibes, serif;
  --content-width: 700px;
  --header-background-color: #cfe7e0;
  --header-image: url(https://rosecarmine.dreamwidth.org/file/106855.png);
  --header-image-height: 300px;
  --header-text-color: #476363;
  --header-link-color: #238b8b;
  --header-link-hover-color: #476363;
  --title-shadow-color: #fff;
  --entry-background-color: #fff;
  --entry-shadow-color: rgba(0, 0, 0, 0.2);
  --entry-border-color: #cfe7e0;
  --userpic-size: 80px;
  --sidebar-width: 300px;
  --sidebar-image-height: 500px;
  --sidebar-image: url(https://rosecarmine.dreamwidth.org/file/106540.jpg);
  --customtext-height: 6em;
  --footer-link-color: #238b8b;
  --footer-link-hover-color: #476363;
  --footer-shadow-color: #cfe7e0;
}

/*--------------- 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);
  padding: 0;
  margin: 0;
  line-height: var(--line-height);
  background-color: var(--background-color);
  color: var(--text-color);
}

html body {
  margin-left: 0;
  margin-right: 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 {
  margin: 1em 0;
  padding-left: 1em;
  position: relative;
  font-style: italic;
}

blockquote:first-letter {
  font-family: var(--title-font);
  font-weight: bold;
  line-height: 1;
  margin-left: -1em;
  color: var(--link-color);
}

blockquote:after {
  content: "";
  position: absolute;
  top: 2em;
  left: 0;
  width: 2px;
  height: calc(100% - 2em);
  background-image: linear-gradient(
    to bottom,
    var(--entry-border-color),
    transparent
  );
}

.module-customtext .module-content::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.module-customtext .module-content::-webkit-scrollbar-track {
  background: var(--header-background-color);
}

.module-customtext .module-content::-webkit-scrollbar-thumb {
  background: var(--title-shadow-color);
}

.module-customtext .module-content::-webkit-scrollbar-corner {
  background: var(--header-background-color);
}

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

#canvas {
  margin: 50px auto;
  max-width: var(--content-width);
}

@media (min-width: 1024px) {
  #canvas {
    border-left: var(--sidebar-width) solid transparent;
    padding: 0 50px;
    max-width: calc(var(--content-width) + 50px);
  }

#primary,
  #secondary {
    margin-left: 50px;
  }
}

@media (min-width: 1280px) {
  #canvas {
    border-right: calc(var(--userpic-size) + 10px);
    padding: 0 50px;
    max-width: calc(
      var(--content-width) + 50px + calc(var(--userpic-size) + 10px)
    );
  }

#content {
    margin-right: calc(var(--userpic-size) + 10px);
  }
}

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

#header > .inner:first-child {
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
  padding: 2em 2em 0;
  text-align: center;
  color: var(--header-text-color);
  background-color: var(--header-background-color);
}

#header #journaltitles-container {
  padding: 1em 0 0;
}

h1#title {
  font-size: 2.5em;
  font-weight: normal;
  font-family: var(--title-font);
  line-height: 1;
  padding: 0;
  margin: 0;
  text-shadow: 2px 2px 0 var(--title-shadow-color);
}

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

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

h2#subtitle:first-letter {
  font-family: var(--title-font);
  font-weight: bold;
  line-height: 1;
  color: var(--header-link-color);
}

h2#pagetitle {
  display: none;
}

@media (min-width: 1024px) {
  #header {
    position: fixed;
    top: 0;
    width: var(--sidebar-width);
    height: 100%;
    margin-left: calc(-1 * var(--sidebar-width));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

#header > .inner:first-child {
    display: flex;
    flex-direction: column;
    padding: 0 0 2em;
  }

#header .module-wrapper {
    order: 2;
    padding: 0 2em;
  }

#header #journaltitles-container {
    padding: 0;
  }

h1#title {
    height: var(--sidebar-image-height);
    background-image: var(--sidebar-image);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

h1#title span {
    display: block;
    padding: 100px 0.5em 0.25em;
    background-image: linear-gradient(
      to bottom,
      transparent,
      var(--header-background-color)
    );
  }

h2#subtitle {
    padding: 0 1em 0.5em;
  }
}

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

#secondary {
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
  color: var(--header-text-color);
}

.module-section-one .inner {
  background: var(--header-background-color);
  padding: 0 2em 2em;
}

@media (min-width: 1024px) {
  #secondary .separator-before {
    width: 100%;
    height: var(--header-image-height);
    background-image: var(--header-image);
    background-repeat: no-repeat;
    background-position: top center;
    position: relative;
  }

#secondary .separator-before .inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(
      to bottom,
      transparent,
      var(--header-background-color)
    );
  }
}

.module a {
  color: var(--header-link-color);
  text-shadow: 2px 2px 0 var(--title-shadow-color);
}

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

.module-section-one .module {
  padding-top: 1em;
}

.module-content ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

.module-content li {
  display: inline;
  padding: 0 0.25em;
  text-transform: uppercase;
}

.module-customtext .module-content {
  max-height: var(--customtext-height);
  overflow: auto;
}

.module-customtext .module-content:first-letter {
  font-family: var(--title-font);
  font-weight: bold;
  line-height: 1;
  color: var(--header-link-color);
}

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

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

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

.entry,
.comment {
  background: var(--entry-background-color);
  margin: 50px 0;
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
  position: relative;
}

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

.header {
  padding: 2em 2em 0;
  background-image: linear-gradient(
    to bottom,
    var(--header-background-color),
    transparent
  );
}

.entry .entry-title {
  text-align: center;
  font-size: 1.75em;
  font-family: var(--title-font);
  line-height: 1;
  font-weight: normal;
  padding: 0 0 30px;
  margin: 0;
  text-shadow: 2px 2px 0 var(--title-shadow-color);
  color: var(--header-text-color);
}

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

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

.restrictions,
.access-filter {
  float: left;
  padding-right: 0.25em;
}

.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+)";
}

.entry .datetime {
  padding-right: 0.25em;
  float: left;
}

.entry .datetime:before {
  content: "Written on ";
}

.entry .time:before {
  content: "at ";
}

.contents {
  padding: 0 2em;
}

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

.userpic img {
  box-shadow: 1px 2px 2px var(--entry-border-color);
  max-width: 50px;
  max-height: 50px;
  width: auto;
  height: auto;
}

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

@media (min-width: 1280px) {
  .has-userpic .userpic {
    position: absolute;
    top: 0;
    right: -10px;
    transform: translateX(100%);
  }

.has-userpic .userpic img {
    box-shadow: 1px 2px 2px var(--entry-shadow-color);
  }
}

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

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

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

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

.poster .ljuser img {
  display: none;
}

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

.poster.empty {
  display: none;
}

.entry-content {
  padding-top: 2em;
  margin-bottom: 2em;
  clear: left;
}

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

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

.entry-content ul,
.comment-content ul {
  padding-left: 1em;
  list-style: none;
}

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

.entry-content ul li:before,
.comment-content ul li:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 4px;
  height: 4px;
  background: var(--entry-border-color);
}

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

.cuttag-action img {
  display: none;
}

.cuttag-action:before {
  content: "+";
  display: inline-block;
  font-size: 26px;
  line-height: 22px;
  vertical-align: bottom;
  font-family: arial;
}

.cuttag-action-after:before {
  transform: rotate(45deg);
}

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

.cut-text {
  font-size: var(--text-size);
  font-weight: normal;
  display: inline;
  margin-left: 0.5em;
}

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

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

.footer,
#archive-year .month .footer {
  padding: 0 2em 2em;
  text-align: center;
}

.entry .tag {
  text-align: left;
}

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

.tag ul li {
  display: inline;
}

.metadata li:first-letter,
.entry .tag:first-letter {
  font-family: var(--title-font);
  font-weight: bold;
  color: var(--link-color);
  line-height: 1;
}

ul.entry-management-links,
ul.entry-interaction-links {
  margin: 0;
  padding: 0;
  display: inline;
  text-transform: uppercase;
}

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

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

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

.comment-pages {
  margin: 10px 0;
  padding: 1em 2em;
  background: var(--entry-background-color);
  line-height: 1;
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
  text-transform: uppercase;
  text-align: center;
}

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

.comment-title {
  font-weight: normal;
  padding: 0;
  margin: 0;
}

.full .comment-title {
  text-align: center;
  font-size: 1.5em;
  font-family: var(--title-font);
  line-height: 1;
  font-weight: normal;
  margin: 0;
  padding: 0 0 30px;
  text-shadow: 2px 2px 0 var(--title-shadow-color);
}

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

.full .comment .comment-title a {
  color: var(--header-link-color);
}

.full .comment .comment-title a:hover {
  color: var(--header-link-hover-color);
}

.comment .header .datetime {
  display: block;
  float: left;
  margin-right: 0.25em;
}

.comment-date-text,
.comment-from-text,
.comment-ip-text {
  display: none;
}

.comment .header .datetime:before {
  content: "Posted on ";
}

.full .poster {
  display: block;
}

.full .poster:before {
  content: "by ";
}

.comment .poster-ip {
  font-size: 1em;
}

.partial .comment {
  padding: 2em;
}

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

.comment .footer {
  text-align: center;
}

ul.comment-management-links,
ul.comment-interaction-links,
.multiform-checkbox {
  display: inline;
  text-transform: uppercase;
  margin: 0;
  padding: 0;
}

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

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

.bottomcomment {
  padding: 0 2em;
  background: var(--entry-background-color);
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
}

.bottomcomment select,
.bottomcomment input {
  margin: 1em 0;
}

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

#qrform {
  padding-top: 2em;
}

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

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

#postform {
  padding: 2em;
  background: var(--entry-background-color);
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
}

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

.month-wrapper,
.tags-container,
.icons-container {
  background: var(--entry-background-color);
  margin: 50px 0;
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
}

.month-wrapper h3,
.tags-container h2,
.icons-container h2 {
  text-align: center;
  font-size: 1.75em;
  font-family: var(--title-font);
  color: var(--header-text-color);
  line-height: 1;
  font-weight: normal;
  padding: 0 0 30px;
  text-shadow: 2px 2px 0 var(--title-shadow-color);
}

#archive-year .month .footer,
#primary .manage-link {
  padding-top: 2em;
  text-transform: uppercase;
  text-align: center;
}

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

.day-date {
  display: none;
}

.month caption {
  display: none;
}

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

.month tr {
  border-bottom: 1px solid var(--entry-border-color);
}

.month td,
.month th {
  padding: 1em 0;
  border: 0;
  font-weight: normal;
}

table.month th:first-letter {
  font-family: var(--title-font);
  font-weight: bold;
  color: var(--link-color);
  line-height: 1;
}

table.month td.day-has-entries .label,
table.month td p {
  display: inline-block;
  margin: 0;
}

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

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

.month dl {
  margin: 30px 0;
}

.month dl dt {
  text-align: center;
  font-size: 1.5em;
  font-family: var(--title-font);
  line-height: 1;
  font-weight: normal;
  background-image: linear-gradient(
    to bottom,
    var(--header-background-color),
    var(--entry-background-color)
  );
  padding: 1em 2em;
  text-shadow: 2px 2px 0 var(--title-shadow-color);
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
}

.month dt a {
  color: var(--header-link-color);
}

.month dt a:hover {
  color: var(--header-link-hover-color);
}

.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 .tag ul {
  margin-top: 0;
}

.month dd {
  margin: 0 0 50px;
  background: var(--entry-background-color);
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
  padding: 0 2em 2em;
}

.month dd br {
  display: 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: "";
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5em;
  width: 4px;
  height: 4px;
  background: var(--header-background-color);
}

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

.sorting-options ul {
  margin: 0 0 2em;
  padding: 0;
}

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

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

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

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

.icon-image {
  order: 2;
  padding-left: 1em;
}

.icon-image img {
  display: block;
}

.icon-info {
  flex-grow: 1;
}

.icon-info div:first-letter {
  font-family: var(--title-font);
  font-weight: bold;
  color: var(--link-color);
  line-height: 1;
}

.icon-pages p {
  margin: 0;
}

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

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

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

.topnav {
  display: none;
}

.navigation {
  background: var(--entry-background-color);
  margin: 30px 0;
  box-shadow: 1px 2px 2px var(--entry-shadow-color);
  text-align: center;
}

.navigation ul {
  margin: 0;
  padding: 0.5em 2em;
  text-transform: uppercase;
}

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

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

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

#footer {
  background: transparent;
  margin-top: 50px;
  margin-left: 50px;
  font-family: var(--title-font);
  font-size: 1.5em;
  line-height: 1;
  text-shadow: 2px 2px 0 var(--footer-shadow-color);
}

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

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

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

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

div.ContextualPopup .Relation {
  font-size: 1.5em;
  font-family: var(--title-font);
  font-weight: normal;
  margin: 0;
}

div.ContextualPopup .Userpic {
  border: none;
}

div.ContextualPopup .Userpic img {
  box-shadow: 2px 2px 1px var(--entry-border-color);
}

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

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

#lj_controlstrip {
  color: var(--text-color);
  background: var(--entry-background-color);
  box-shadow: 0 1px 1px var(--entry-shadow-color);
  justify-content: center;
  padding: 0.75em 0;
}

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

#lj_controlstrip_statustext:before {
    content: "";
    position: absolute;
    bottom: -25px;
    height: 15px;
    width: 3px;
    background: var(--footer-link-color);
    transform: rotate(-45deg);
    left: 50%;
    margin-left: -6px;
  }

#lj_controlstrip_statustext:after {
    content: "";
    position: absolute;
    bottom: -25px;
    height: 15px;
    width: 3px;
    background: var(--footer-link-color);
    transform: rotate(45deg);
    right: 50%;
    margin-right: -6px;
  }

#lj_controlstrip:after {
    content: "";
    position: absolute;
    bottom: -35px;
    height: 35px;
    width: 40px;
    margin-left: -20px;
    left: 50%;
    cursor: pointer;
  }

#lj_controlstrip:hover {
    transform: translateY(0);
  }
}

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

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

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

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

#lj_controlstrip_actionlinks {
  text-align: center;
}

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

#lj_controlstrip_search {
  text-align: right;
}

#lj_controlstrip input,
#lj_controlstrip select {
  border: 1px solid var(--entry-border-color);
  font-size: var(--text-size) !important;
  font-family: var(--main-font) !important;
}

#lj_controlstrip input[type="submit"] {
  background: transparent;
  border: 0;
  text-transform: uppercase;
  color: var(--link-color);
}

#lj_controlstrip .ljuser img {
  display: none;
}

#lj_controlstrip img {
  box-shadow: 2px 2px 1px var(--entry-border-color);
}

#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)".
On the same page, copy and paste the following https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap into the "Custom stylesheet URL" field.
Click on the "Modules" tab. Set "Navigation" to number 2, "Links list" to number 4 and "Custom text" to number 13. 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".

Resources: image from unsplash.com

Threaded | Flat

Your layouts really are some of the most beautiful ever made for DW.

I love this layout! I'm trying to troubleshoot something, thought - the topbar header is appearing at the bottom of the page rather than the top. Any thoughts on why that might be the case? The site I'm working on is here: crackopenacoldboy. Thanks!

NEVERMIND; I figured it out. I had the wrong option selected for the 1-column page setup.

Thanks for creating such a lovely layout!

Edited 2019-04-05 20:35 (UTC)

Fresh

no subject

(no subject)

(no subject)

(no subject)

no subject