tofuhouse | layout (Five AM) - free your mind 2019

[ click to see full size of default. ]

After the responsive fixes were implemented, and upon discovering that DW can use Material Icons, I was inspired to revisit an old layout. Free Your Mind 2015 was the first layout I ever created, so there were parts of it that I didn't even know of until now. I wouldn't really call this an update, but more an alternative version to an old layout, which is why I changed the images and the fonts. The original should still be usable!

Honestly though I'm not even sure I improved anything, and I'm 100% sure I still missed something. It's been a while. I changed the link colours 3 times after I already took the screenshot.

Free Your Mind is named after "Free Your Mind" by Cut Copy. This was looping while I was messing around haha. (Warning: there's like a bit of nudity in the music video. Arty-farty videos, man.) I copypasted this from the original post if you want to cross-reference tee hee.

ABOUT THE LAYOUT
It's a practical layout, basically for those who want to use as much of the functions Dreamwidth (circa 2019) can offer. SO:
- Mostly Minimalist
- Fluid Width: It works on any sized screen. Because it's--
- Responsive: Including on the phone. I made sure of it. Tablets I'm not sure because I don't own one.
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing.
- Custom Header: Of all kinds, baby.
- Material Icons Ready, get crazy.
- Optimal on: Firefox and Chrome (and consequently their forks and Opera). Works on Internet Explorer and Safari too (at least I think so when I clicked around).

WHAT CAN YOU USE THIS FOR?
- Journals (Personal, Fanstuff, Challenges, Roleplay, etc)
- Communities (of any kind)
- Anything that you wouldn't mind using the modules and stuff for.

HOW TO INSTALL
1. Select Five AM: Early Edition. (by

winterfish)
2. Customise
2.1 Scroll down and choose a Page Set Up: It has to have sidebars.
--- NOTE: I made this using the sidebar on the left. But I tested it with all sidebars and it should work.
--- NOTE 2: It works with a single column, but it's pretty weird. Use at own risk.
2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is unchecked.
2.3 Copy and paste the following code into "Use embedded CSS"

/*----FREE YOUR MIND 2019----*/
/* Base: Five AM (Early Edition) by winterfish */
/* Default header image located https://wallpaperscraft.com */
/* Edited by saga @ tofuhouse | 16th June 2019 */
/* feel free to edit as you like */
/* oh maaaaaaaan */

/*----HEADER BACKGROUND FOR EASY EDITING----*/
/* Put your pattern in between '' below in the header code */
/* A default is already there as an example! */

#header {
background-color: #eeeeee; /*Change Colour Here*/
background-image: url('https://i.imgur.com/rUp2fHy.jpg'); /*Change Image Here*/
background-repeat: no repeat; /*Change this to repeat if you have repeating image*/
background-size: cover; /*This will stretch to cover the header space no matter screensize. Remove this if you have repeating image.*/
}

/*----FONTS DECLARATION----*/
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v4/pe03MImSLYBIv1o4X1M8cc8WAc5iU1EQVg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v4/pe03MImSLYBIv1o4X1M8cc8WAc5jU1EQVg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans Light';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: local('Nunito Sans Light'), local('NunitoSans-Light'), url(https://fonts.gstatic.com/s/nunitosans/v4/pe03MImSLYBIv1o4X1M8cc8WAc5tU1E.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v4/pe0qMImSLYBIv1o4X1M8cceyI9tScg.woff2) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v4/pe0qMImSLYBIv1o4X1M8ccezI9tScg.woff2) format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Nunito Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Nunito Sans Regular'), local('NunitoSans-Regular'), url(https://fonts.gstatic.com/s/nunitosans/v4/pe0qMImSLYBIv1o4X1M8cce9I9s.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

/*----MAIN----*/

html {font-size: 100%;}

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

h1, h2, h3, h4, h5, h6 {
font-weight: normal;
margin: 0;
}

img {
border: none;
}

hr {
display: none;
}

.entry-content hr,
.comment-content hr {
display: block;
margin: 1em 10%;
}

body {
font-family: Arial, Verdana, Helvetica, sans-serif; 
padding: 0;
color: #444444;
background-color:#f5f5f5;
margin: 0;
font-size: 1em; 
}

html body {
margin-left: 0em;
margin-right: 0em;
}

a, a:link, a:active, a:visited {
text-decoration: none;
}

a {color: #000000;}
a:visited {color: #000000;}
a:hover {color: #1c86b5;}
a:active {color: #000000;}

q { font-style: italic; }

p { margin: 1em 0; }

blockquote {
background: #ffffff;
margin: 1em;
padding: 2em 1em;
font-family: Courier New;
color:#000000;
font-size:1em;
line-height: 1.4em;
border: 2px #000000 solid;
}

input, textarea, select {
background: #ffffff;
border: 1px solid #cccccc;
color: #444444;
}

ul, ol {
margin: 0 !important;
padding: 0 !important;
}
li {
margin: 0 !important;
padding: 0 0 0 1em !important;
}

.separator {
display: none;
}

/*----LAYOUTS----*/

/*----LAYOUTS: CONTENT----*/
#canvas {
width: 100%;
margin: auto;
margin-top:0px;
}

#content { 
float: none; 
}

@media only screen and (min-width: 51em) {
#content { 
margin-left:10%;
margin-right:10%;
}

.two-columns-left #content,
.three-columns-sides #content {
border-left: 17em solid transparent;
}
.two-columns-right #content,
.three-columns-sides #content {
border-right: 17em solid transparent;
}
.three-columns-left #content {
border-left: 34em solid transparent;
}
.three-columns-right #content {
border-right: 34em solid transparent;
}
.column-right #content {
min-width: 17em; /* prevents sidebar overlap of entry, when entry becomes narrower than sidebar */
}
}

#content-footer {
height: 0;
font-size: 0; /*to make IE happy*/
clear: both;
}

#header, #footer {
margin: 0;
clear: both;
padding: .5em;
}

/*----LAYOUTS: MODULES----*/

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

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

#primary { float: none; }
#secondary, #tertiary { width: 100%; }

.page-entry #primary,
.page-reply #primary {
margin-top: 2.15em; /* entry-wrapper has padding already */
}

.page-icons #primary,
.page-tags #primary {
margin-top: 3.15em;
}

#secondary {
margin-top: 3.15em;
}

.any-column #tertiary { clear: both; }

@media only screen and (min-width: 51em) {
.multiple-columns #primary {
float: left;
}

.two-columns-left #secondary,
.three-columns-sides #secondary {
float: left;
width: 17em;
margin-left: -17em;
}
.two-columns-right #secondary {
float: right;
width: 17em;
margin-right: -17em;
}
.three-columns-left #secondary {
float: left;
width: 17em;
margin-left: -34em;
}
.three-columns-right #secondary {
float: right;
width: 17em;
margin-right: -17em;
}

.two-columns #tertiary {
clear: both;
width: auto;
}
.two-columns-left #tertiary { margin-left: -17em; }
.two-columns-right #tertiary { margin-right: -17em; }
.two-columns #tertiary .module {
float: left;
width: 17em;
}
.three-columns-left #tertiary {
float: left;
width: 17em;
margin-left: -17em;
}
.three-columns-right #tertiary {
float: right;
width: 17em;
margin-right: -34em;
margin-left: 17em; /* so that #tertiary won't overlay #secondary in IE7 */
}
.three-columns-sides #tertiary {
float: right;
width: 17em;
margin-right: -17em;
}

.column-left #primary > .inner:first-child {
padding-left: 4em;
}

.column-right #primary > .inner:first-child {
padding-right: 4em;
}

/* to make sure the sidebars always have the same size */
.three-columns-sides #primary > .inner:first-child {
padding-left: 2em;
padding-right: 2em;
}

.three-columns #secondary > .inner:first-child {
padding-right: 2em;
}

.multiple-columns #tertiary {
padding-top: 3.15em;
}
.three-columns #tertiary {
clear: none;
}
.three-columns #tertiary > .inner:first-child {
padding-left: 2em;
}
}

.navigation ul {
margin-left: 0;
padding-left: 0;
}
.navigation li {
display: inline;
padding: 0 .5em;
}
.noentries {
padding: 0 .5em;
}

/*----LAYOUTS: USERPIC----*/

@media only screen and (min-width: 51em) {
.has-userpic .entry .contents {
margin-right: 120px;
min-height: 140px;
padding-right: 2em;
}

.has-userpic .entry .userpic {
float: right;
clear: right;
margin-right: -140px;
}

.has-userpic .comment .userpic {
float: left;
clear: left;
margin-right: 1em;
padding-right: .5em;
}
}

/*----HEADER----*/

#header {
width:100%;
color: #000000;
border-top: 5px solid #000000;
margin-top: 0em;
padding:0px;
position: relative; 
text-transform: lowercase;
text-align:center;
letter-spacing:0.2em;
}

@media only screen and (min-width: 51em) {
#header {
padding: 60px 0px 60px 0px
}
}

h1#title {
font-family: Nunito Sans Light, Arial, sans-serif; 
font-size: 1.7rem;
display:block;
background: #ffffff;
color: #000000;
padding: 5px 10px;
background: rgba(256, 256, 256, 0.7);
}

h1#title a {
color: #000000;
}

h2#subtitle {
margin-top:0px;
display:block;
background: #ffffff;
font-family: Nunito Sans Light, Arial, sans-serif;
color: #000000;
font-size: 1.1em;
padding: 5px 10px !important;
background: rgba(256, 256, 256, 0.7);
}

h2#pagetitle {
display:none;
}

#header .module {
border: none;
}

#header .module-content {
padding:0px!important;
}

#header .module-wrapper {
margin-top:0px;
}

#header .module-navlinks ul {
margin: -.8em 0 1.8em;
}

#header .module-navlinks {
margin-bottom: 0;
}

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

.module-navlinks ul {
top:0px;
margin-left: auto;
margin-right: auto;
margin: 0px !important;
text-align:center !important;
}

@media only screen and (min-width: 51em) {
.module-navlinks ul {
position:absolute;
left: 0;
right: 0;
}
}

#header .module-navlinks li {
font-family: Nunito Sans, Arial, sans-serif;
display: inline;
margin: 0px !important;
font-size: 0.8rem !important;
color: #ffffff;
padding: 5px 10px 5px 10px!important;
background: #000000;
}

#header .module-navlinks li a {
color: #ffffff;
}

#header .module-navlinks li a:hover {
color: #cccccc;
}

@media only screen and (max-width: 51em) {
#header .module-navlinks {
background: #000000;
padding:0.5rem;
}

#header .module-navlinks li {
background: transparent;
display: inline block;
}
}

/*----NAVIGATION----*/

.navigation {
font-family: Nunito Sans, Arial, san-serif;
text-align: right;
text-transform: uppercase;
font-size:1rem;
}

.topnav {
margin-top: 1em;
min-height: 1.2em;
}

.page-recent .bottomnav,
.page-read .bottomnav,
.page-network .bottomnav,
.page-day .bottomnav {
margin-top: -2.5em;
}

.page-day .navigation .page-forward:before {
content: "|";
}

.page-day .navigation .page-forward a {
padding-left: 1.1em;
}

/*----ENTRY----*/

.entry-wrapper {
margin: 1em 0 4em;
}

.entry {
background:#ffffff;
margin-bottom: 20px; 
border-top:5px #000000 solid;
overflow-x:auto;
}

.entry .header {
clear: both;
margin-top:0px;
padding-top:0px;
color: #ffffff;
font-family: Nunito Sans, Arial, sans-serif;
font-size:0.75rem!important;
letter-spacing:0.1em;
text-transform:uppercase;
}

.entry .header a {
color: #ffffff;
}

.entry .header a:hover {
color: #cccccc;
}

.entry .entry-title, .entry .datetime {
display: block;
background-color:#000000;
padding: 5px 10px 5px 10px;
}

@media only screen and (min-width: 51em) {
.entry .entry-title,  .entry .datetime {
display: inline-block;
max-width:40%;
}
}

.no-subject .entry .entry-title {
background: none;
border: none;
}

.entry .datetime {
float: right;
font-size: 1.1em;
text-transform: uppercase;
}

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

.entry .access-filter img,
.entry .restrictions img {
display: inline;
padding-left: .5em;
}

span.sticky-entry-icon img {
display:none;
}

/* ensure comment content stretches out horizontally so it's readable */
.comment-content:before {
content: "";
display: block;
overflow: hidden;
width: 10em;
}
.comment-content { border-top: 1px transparent solid; } /* for firefox */

/* To prevent overlapping when icon's on the left */
/* and list is the first thing in content */
.entry-content li,
.comment-content li {
list-style-position: inside;
}

/* To constrain the width and prevent layout breaking */
.entry-content img, .comment-content img {
max-width: 100%;
height: auto;
}

@media only screen and (min-width: 68em) {
.entry-content img, .comment-content img { max-width: none; }
}

.entry .entry-content {
padding: 0px 1em 2em;
}

.entry .entry-content a {
color: #2c399d;
}

.entry .entry-content a:hover {
color: #1c86b5;
}

.entry .contents {
margin-top: .5em;
padding: 0;
}

.has-userpic .entry .userpic {
margin-top: 1em;
text-align: center;
}

@media only screen and (max-width: 51em) {
.has-userpic .entry .userpic {
clear:both;
display: block;
}
}

.contents .userpic img {
background: #000000;
padding: 5px;
}

.entry .poster {
display: block;
padding-bottom: 2em;
padding-left:1em;
font-size:1.1rem;
}

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

.entry-content ul,
.entry-content ol {
margin: 1em 1em 1em 3em;
}

.metadata {
padding: 0 0 1em;
font-family: Nunito Sans Light;
}

.metadata-label {
font-weight: normal;
}

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

.metadata.top-metadata ul {
margin: 0;
}
.metadata.top-metadata {
margin-bottom: 1em;
}

/* Metadata Label Replacement Start */

span.metadata-label.metadata-label-mood, span.metadata-label.metadata-label-location, span.metadata-label.metadata-label-music {
font-size:0;
}

.metadata-label.metadata-label-mood:before, .metadata-label.metadata-label-location:before, .metadata-label.metadata-label-music:before {
visibility: visible;
font-family: Material Icons;
font-size:1rem;
}

.metadata-label.metadata-label-mood:before {
content:"mood";
}

.metadata-label.metadata-label-location:before {
content:"place"; 
}

.metadata-label.metadata-label-music:before {
content:"music_note"; 
}

/* Metadata Label Replacement End */

.tag {
font-family: Nunito Sans, Arial, sans-serif;
margin:1em;
}

.tag-text {
text-transform: uppercase;
}

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

.tag ul li {
display: inline;
} /* same for month view */

ul.entry-management-links {
margin-left: 0;
padding-left: 0;
}

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

ul.entry-interaction-links {
margin-left: 0;
padding-left: 0;
text-align: right;
}

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

.entry-management-links {
float: left;
padding: 1em 0 1em .5em;
}

.entry-interaction-links {
padding: 1em .5em 1em 0;
text-align: right;
}

.entry-interaction-links li {
padding: 0 .5em 0 0em !important;
}

.entry-management-links li {
padding: 0 0em 0 0.5em !important;
}

/* Links Replacement Start*/

li.entry-permalink a, li.entry-replylink a {
    font-size:0;
}

li.entry-permalink a:before, li.entry-replylink a:before {
visibility: visible;
font-family: Material Icons;
font-size:1.5rem;
}

li.entry-permalink a:before {
content:"link";
}

li.entry-replylink a:before {
content:"comment";
}

li.entry-readlink a {
font-family: Nunito Sans;
text-transform: uppercase;
font-size: 1.2rem;
display: inline-block;
vertical-align: top;
}

li.link.edit_entry img, li.link.edit_tags img, li.link.mem_add img, li.link.tell_friend img, li.link.watch_comments img, li.link.link_prev img, li.link.link_next img {
display: none;
}

li.link.edit_entry a:before, li.link.edit_tags a:before, li.link.mem_add a:before, li.link.tell_friend a:before, li.link.watch_comments a:before, li.link.link_prev a:before, li.link.link_next a:before {
visibility: visible;
font-family: Material Icons;
font-size:1.5rem;
}

li.link.edit_entry a:before {
content: "edit";
}

li.link.edit_tags a:before {
content: "local_offer";
}

li.link.mem_add a:before {
content: "favorite";
}

li.link.tell_friend a:before {
content: "share";
}

li.link.watch_comments a:before {
content: "notifications";
}

li.link.link_prev a:before {
content: "arrow_back";
}

li.link.link_next a:before {
content: "arrow_forward";
}

/* Links Replacement End */

/*----COMMENTS----*/

#qrform {
margin-top: 1em !important;
}

.comment-pages {
text-align: center;
background: #ffffff;
font-family: Nunito Sans;
}

.comment-pages.bottompages,
.comment-pages.bottompages {
margin-top: 1em;
}

#comments {
margin-top: -1em;
}

.comment-posted {font-weight:bold;}

.comment-content ul,
.comment-content ol {
margin: 1em 1em 1em 3em;
}

.comment-wrapper {
border-top: 5px solid #000000;
background-color:#ffffff;
margin: 1em 0 0;
padding:1em 1em 0 1em;
font-size:1rem;
min-width:15em;
}

.partial {
padding: .3em 0 !important;
}

.partial .comment {
display: inline !important;
padding: 1em 0;
}

.partial .comment-title {
display: inline !important;
padding-right: .5em;
}

.comment .header {
color:#000000;
font-family: Nunito Sans, Arial, sans-serif;
}

.comment .comment-title {
font-size:1.2em;
}

.comment .datetime {  clear: both;
font-size:0.8em;
font-style:italic;
text-transform: uppercase;
color:#888888;}

.comment .poster-ip {clear:both;
font-style:italic;
font-size:0.7em;
color:#aaaaaa;
}

.has-userpic .comment .userpic {
text-align: center;
}

.comment .contents {
clear: both;
padding: .5em 0;
background:#ffffff;
}

.comment .poster {
margin: 0;
}

.comment-poster .anonymous {
font-weight: bold;
color:#aaaaaa;
}

.comment-content {
padding: .8em 0 .5em;
}

.comment-content a {
color: #2c399d;
}

.comment-content a:hover {
color: #1c86b5;
}

.comment .footer {
clear: both;
padding: 1em .5em 0;
}

.comment .multiform-checkbox {
font-family: Arial;
float: right;
margin-top: -1px; /* line up the checkbox */
padding-left: .5em;
text-transform: lowercase;
}

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

ul.comment-management-links {
margin-left: 0;
padding-left: 0;
text-align: right;
font-family: Nunito Sans, Arial, sans-serif;
}

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

ul.comment-interaction-links {
margin-left: 0;
padding-left: 0;
font-family: Nunito Sans, Arial, sans-serif;
}

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

textarea#commenttext {
width: 100%; /* fix for FF form width glitch */
}

.comment-interaction-links {
padding-bottom: 1em;
text-align: right;
}

.comment-management-links {
float: right;
}

.comment-interaction-links li,
.comment-management-links li {
padding: 0 .5em;
text-transform: uppercase;
}

.edittime {
padding-top: 1em;
}

.bottomcomment {
margin-top: 2.2em;
padding: .5em 0;
text-align: center;
background: #ffffff;
}

.bottomcomment .entry-interaction-links{
margin-bottom: 1.5em;
}

/*----ARCHIVES----*/

.page-archive .navigation {
text-align: center;
}

.page-archive .topnav {
padding-bottom: 1em;
}

.page-archive .bottomnav {
padding-top: 1em;
}

#archive-year {
padding: 2.2em 0 0 0;
}

.month-wrapper {
margin: 0 0 1em 0;
background-color:#ffffff;
border-top:5px #000000 solid;
width: 100%;
}

.month-wrapper .header {
margin:0px;
padding: 0px;
}

.month-wrapper .header>inner {
margin:0px;
padding: 0 !important;
}

.month-wrapper h3 {
float: left;
clear:both;
font-family: Nunito Sans, Arial, san-serif;
font-size:0.9em !important;
color:#ffffff;
background-color:#000000;
text-transform: uppercase;
padding: 2px 10px 5px 10px;
margin-bottom:20px;
letter-spacing: 1px;
}

.month-wrapper .contents caption {
display: none;
}

table.month {
clear:both;
margin: 0 auto;
border-collapse: collapse;
text-align: center;
width: 90%;
}

table.month td {
height: 3.25em;
border-bottom: 1px solid #cccccc;
border-right: 1px solid #cccccc;
height: 4em;
width: 4em;
padding: 3px;
}

table.month th {
border: 1px solid #cccccc;
border-left: none;
font-weight: normal;
height: 4em;
padding: .5em;
}

table.month td:first-child,
table.month th:first-child {
border-left: 1px solid #cccccc;
}

table.month td p {
margin: 0;
padding: 3px;
}

.month dl, .month dt, .month dd {
margin: 0;
padding: 0;
}

.month dl dt {
font-weight: bold;
}
.month dl .time {
padding-right: .5em;
}
.month dl h3 {
display: inline;
font-size: medium;
}
.page-month .month .entry-poster {
margin-right: .5em;
}
.month dl .tag ul {
margin-top: 0;
}

.month-wrapper .day-has-entries {
background: #eeeeee;
color: #444444;
}

.month-wrapper .day-has-entries a {
color: #666666;
}

.month-wrapper .day-has-entries:hover {
background: #ffffff;
color: #444444;
}

.month-wrapper .day-has-entries a:visited {
color: ;
}

.month-wrapper .day-has-entries:hover p a {
color: #999999;
}

.month-wrapper .day-has-entries a:active {
color: ;
}

.month-wrapper .footer {
padding: 1em 0;
text-align: center;
font-family: Nunito Sans, Arial, san-serif;
text-transform: uppercase;
}

#archive-month .topnav {
border-top: 0px;
}

#archive-month {
padding-top: 2.2em;
}

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

#archive-month .topnav {
padding-top: .8em;
}

#archive-month .bottomnav {
margin-top: .5em;
}

.navigation .month-back,
.navigation .month-forward {
text-align: center;
}

#archive-month .month {
margin-top: .7em;
padding: 1em 2em 0;
border-top: 5px #000000 solid;
background-color:#ffffff !important;
font-size:0.9em;
}

.month h3.entry-title {
font-family: Nunito Sans, Arial, sans-serif; 
font-size: 1.2em;
}

dd.month {
display: inline;
}

.month .datetime,
.month .access-filter,
.month .entry-title {
padding-right: 5px;
}

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

#archive-day .topnav {
padding-bottom: 1em;
}

#archive-day .bottomnav {
padding-top: 0em;
}

h3.day-date {
font-family: Nunito Sans, Arial, san-serif;
display: block;
background: #000000;
padding: 0.5em;
color:#ffffff;
font-size:0.9rem;
text-transform: uppercase;
}

/*----TAGS PAGE----*/

.tags-container {
border-top: 5px solid #000000;
background-color:#ffffff;
padding:0px;
}

.tags-container h2 {
float: left;
clear:both;
font-family: Nunito Sans, Arial, san-serif;
font-size:0.9em;
color:#ffffff;
background-color:#000000;
text-transform: uppercase;
padding: 2px 10px 5px 10px;
margin-bottom:20px;
letter-spacing: 1px;
}

.tags-container .ljtaglist {
line-height: 1.8em;
}

.tags-container ul.ljtaglist {
list-style: none;
}

.tags-container .manage-tags-link {
margin-bottom: 1em;
}

.tags-container .contents {
clear:both;
}

.tags-container .footer {
padding: 0 0 .1em 1em;
clear:both;
}

/*----ICONS----*/

.icons-container {
border-top: 5px solid #000000;
background-color:#ffffff;
padding:0px;
}

.icons-container h2 {
float: left;
clear:both;
font-family: Nunito Sans, Arial, san-serif;
font-size:0.9em;
color:#ffffff;
background-color:#000000;
text-transform: uppercase;
padding: 2px 10px 5px 10px;
margin-bottom:20px;
letter-spacing: 1px;
}

.icons-container .contents {
clear:both;
padding: 0 1em 0 1em;
}

.icons-container .icon {
margin: 1.5em 0;
}

.sorting-options {
text-align: center;
font-family: Nunito Sans, Arial, san-serif;
text-transform: uppercase;
}

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

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

.icon-pages.toppages, .icon-pages.bottompages {
text-align: center;
font-family: Nunito Sans, Arial, san-serif;
text-transform: uppercase;
}

.icon-pages.toppages b, .icon-pages.bottompages b {
font-weight: normal !important;
}

.icon-image {
float: left;
clear: left;
margin-bottom: .25em;
min-width: 100px;
padding-right: 1em;
}

.icon-info {
min-height: 100px;
}

.icon-info span {
font-weight: bold;
}

.icon-info .default {
text-decoration: underline;
}

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

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

.icons-container .footer {
padding: 0 0 .1em 1em;
clear:both;
}

.icons-container .ljuser {
font-weight: normal !important;
}

.icons-container .ljuser a {
font-weight: normal !important;
}

/*----MODULES----*/

#secondary .module, #tertiary .module {
margin-bottom: 2.5em;
border-top: 5px solid #000000;
padding: 0px 10px 10px 0px; 
background-color: #ffffff; 
color: #555555;
text-align: left;
min-width: 17em;
}

@media only screen and (min-width: 51em) {
.one-column #secondary .module,
.one-column #tertiary .module,
.two-columns #tertiary .module {
float: left;
margin-right: 2em;
}

.one-column-split #primary,
.one-column #footer,
.two-columns #footer {
clear: both;
}
}

h2.module-header {
clear:both;
float:left;
background-color:#000000;
margin-top:0 !important;
margin-left:0 !important;
padding: 3px 10px 5px 10px;
text-transform: uppercase; 
letter-spacing: 1px;
text-align:left;
font-family: Nunito Sans, Arial, sans-serif;
font-size:0.85rem!important;
font-weight:normal;
color:#ffffff;
}

h2.module-header a {
color:#ffffff !important;
}

h2.module-header a:hover {
color:#cccccc !important;
}

.module-content {
clear:both;
margin: 0px 10px 0px 10px;
padding-top: .8em
}

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

.module-userprofile .module-content {
text-align: center;
}

.module-userprofile .userpic img {
background: #000000;
padding: 5px;
}

.module-userprofile .journal-website-name {
padding-top: .8em;
}

ul.userlite-interaction-links {
list-style: none;
}

ul.userlite-interaction-links li {
display: block;
}

ul.userlite-interaction-links.icon-links {
margin-left: 0;
padding-left: 0;
}

ul.userlite-interaction-links.icon-links li {
display: inline;
padding: 0 .20em;
}

ul.userlite-interaction-links.text-links {
text-align: left;
}

.any-column .module-calendar table { margin: 0; }

.module-calendar .module-content { 
text-align: left; 
padding-top: 1em;
}

@media only screen and (min-width: 51em) {
.multiple-columns .module-calendar .module-content {
text-align: center;
}

.multiple-columns .module-calendar table {
margin: 0 auto;
}

.multiple-columns .module-syndicate .module-content {
text-align: center;
}
}

.module-calendar { text-align: center !important; 
padding:0px 0px 10px 0px !important;}

.module-calendar table {
text-align: center;
width: 100%;
}

.module-calendar td {
padding: 1px;
}

.module-calendar th,
.module-calendar td {
border: 1px solid #eeeeee;
height: 2em;
line-height: 2em;
}

.module-calendar td a {
display: block;
padding: 2px;
background: #eeeeee;
display: block;
text-align: center;
}

.module-calendar td a:hover {
background: #ffffff;
}

.module-calendar .empty-day {border: 1px solid #aaaaaa;}
.module-calendar .entry-day {border: 1px solid #aaaaaa; 
background-color: #eeeeee;}

.search-box {
margin: .2em auto;
max-width: 100%;
}

.search-form .search-box-item, 
.search-form .search-button-item {
display: block
}

.search-form .comment_search_checkbox_item {
display: inline
}

.module-search .search-box {
margin-right: 2px;
padding: 1px;
}

/* wrap long content, particularly openid usernames */
.module-pagesummary .ljuser {
white-space: normal !important;
}
.module-pagesummary .module-content {
word-wrap: break-word;
}

.module-credit .category-title {
font-weight: bold;
}

.module-tags_cloud li, .tags_cloud li {
display:block;
font-size:1em!important;
}

.module-tags_multilevel li {
list-style: none;
margin-left: 0;
padding-left: 0;
}

.module-tags_multilevel li ul li {
margin-left: -.5em;
padding-left: 2em;
}

.module-tags_cloud .module-list {
line-height: 1.8em;
}

.module-tags_cloud .module-list a {
text-decoration: underline;
}

.manage-tags-link, .manage-link {
font-family: Calibri;
padding-top: .8em;
text-transform: lowercase;
}

.module-powered, .module-time {
padding-top: .8em;
}

.entry .userpic,
.comment .userpic {
text-align: right;
}

.module .manage-link {
text-align: center;
}

/* Profile Icons Replacement */

li.link.watch img, li.link.trust img, li.link.track img, li.link.link.message img, li.link.manage_membership img, li.link.post_entry img {
display: none;
}

li.link.watch a:before, li.link.trust a:before, li.link.track a:before, li.link.message a:before, li.manage_membership a:before, li.link.post_entry a:before {
visibility: visible;
font-family: Material Icons;
font-size:1.5rem;
}

li.link.watch a:before {
content: "import_contacts";
}

li.link.trust a:before {
content: "lock_open";
}

li.link.track a:before {
content: "notifications";
}

li.link.message a:before {
content: "email";
}

li.manage_membership a:before {
content: "group_add";
}

li.link.post_entry a:before {
content: "note_add";
}

/* End Icons Replacement */

/*----FOOTER----*/

#footer {
text-align:center;
border-top: 0px;
border-bottom: 5px solid #000000;
margin-top: 3em;
padding: 0;
font-family: Nunito San, Arial, san-serif;
text-transform: uppercase;
letter-spacing: 0.1em;
font-size:0.9em;
}

#footer .inner {
padding: 0px;
}

#footer a {
background-color:#000000;
padding: 5px 10px 5px 10px;
color:#ffffff!important;
}

#footer a:hover { color:#cccccc!important; }

/*----CONTROL STRIP----*/

#lj_controlstrip {
background: #000000;
background-repeat: no-repeat;
background-position: 0 0;
z-index: 100 !important;
border-bottom: 0px;
letter-spacing:0.2em;
}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_login {
text-align: left;
border: none;
}

#lj_controlstrip td {
color: #606060 !important;
}

#lj_controlstrip a {
color: #606060 !important;
text-decoration: none;
}

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

#lj_controlstrip_statustext {
font-weight: normal;
color: #606060 !important;
}

#lj_controlstrip input {
color:#606060 !important;
background-color: #000000; 
border: 1px solid #444444;
padding:0.1em 0.25em; }

/*----CONTEXTUAL POPUP----*/

.ContextualPopup {
background: #ffffff;
color: #666666;
font-size: 1rem;
font-weight; normal !important;
border:0px !important;
border-top:5px solid #000000 !important;
border-radius: 0px!important;
}

.ContextualPopup .Relation{
font-size:1rem;
font-family:Nunito Sans;
font-weight:normal;
text-transform:uppercase;
margin:0;
color: #000000;
}

.ContextualPopup .Userpic {
padding: 0px!important;
margin: 0px!important;
border: 0px!important;
}

.ContextualPopup .Userpic img {
border: 5px solid #000000;
}

/*----ADD MORE EDITS BELOW THIS IF YOU LIKE----*/

3. Modules for your sidebar(s): Choose as you see fit.
4. And just so people can find and use this layout too, credit

tofuhouse somewhere on your journal or profile page!
--- Helpful code to copy and paste: <a href="http://tofuhouse.dreamwidth.org/5447.html">layout</a> @ <user name="tofuhouse">

OPTIONAL STUFF: As you can see, there's just one image in there. It's the background pattern for the header! You can replace it if you want. Just remember:
- If it's a full image, you need to make sure it "covers" the entire space.
- If it's a pattern, then just make sure repeats.

To replace it, look to the code again, and see near the top how I put in a #header code with a background. Just replace that url with the image you want. I currently am using something that covers. I left instructions, which hopefully make sense.

Meanwhile, the header's background in case you wanna upload it elsewhere and replace the url with your own is here
It's better you do in case it disappears somewhere.

CUSTOM ICON PAGE: Check it out, it's pretty cool. How do you get this thing working? Go to Settings: Display, and make sure you check the box "Show my journal's icons pages in my chosen style instead of the site layout".

While you're there...

CUSTOM COMMENT PAGE: I coded it to work, so it's completely mobile responsive...as far as dreamwidth allows, anyway. It might be better to use it on the phone using the custom comments, and I even changed the min-width for nested comments.

However, if you want to turn it off and use dreamwidth's default look? The comment system and nesting is much more cleaner on the default site skin, that's why. So go to Settings: Display, and make sure you uncheck the box "Show my journal's entry pages in my chosen style instead of the site skin".

And that's pretty much it! (Though I might edit this page to tidy it up.) Have fun with my long time coming masochistic attempt at productivity (⊙◞౪◟⊙)

that house made out of tofu

you can eat the walls

layout (Five AM) - free your mind 2019

Navigation

layout (Five AM) - free your mind 2019

no subject

Profile

May 2023

Links

Most Popular Tags

Page Summary

Some Lyrics in Custom Text

Style Credit

Expand Cut Tags