tofuhouse | layout (Blanket)

[ click to see full size. live preview (nav version/2) @

riotking + reading page + archives/archive day view, etc ]
[ example code in image: the fool @

cawaii ]

I've seen a lot of dreamwidth accounts used as portals, but I also heard that people want a functioning reading page at the same time. I recently found out how to do that, so now we can have the best of both worlds. It's actually a very fast layout because the base is essentially this older one, but way simplified. There are still working modules at the bottom of the layout with full working functionality in the normal version, or in the other pages of the other version.

Silent Picture is named after "Silent Picture" by baroque. There's no link to the full song, but listen to the samples of the entire album. It's like sound candy and audio heaven.

ABOUT THE LAYOUT
There's two versions! One you can use as a portal (with functional everything once you hit Reading and everywhere else), and one that you can use as a simple layout. Either way, it's practical (even the portal as long as you follow all my instructions), and you can use some functions Dreamwidth (circa 2015) can offer. SO:
- Screen Width: 1024px+ This is because it has a--
- "Fixed" Width: Max width of 800px (excluding icon). Once your screen starts getting smaller than a certain width (like phones), it'll revert to a smaller version.
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing.
- Custom Front Page/Recent Page: You can use this as a portal or a listing.
- Optimal on: Firefox and Chrome. Works on Internet Explorer and Safari too (at least I think so when I clicked around).
--- Decently passable on phone screens because I tried to make sure, but I'd still prefer to use it on a normal computer sized screen.

WHAT CAN YOU USE THIS FOR?
PORTAL VERSION:
- Anything that requires a Navigation Portal: (Introduction Accounts, Fanfiction Navigational Accounts you wanna restrict browsing flexibility so they follow a strict order, Roleplay Journals, etc)
- But with a functional Reading Page, Archive, Tags, Icons Page, etc. And modules.
--- Where you can also browse on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

NORMAL VERSION:
- Journals + Communities (of any kind)
- Browsing on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

HOW TO INSTALL
1. Select Blanket: Peach. (by

sforzinda)
2. Customise
2.1 Presentation: Scroll down to Select whether entry management links are printed as text or using the available icons: Choose "text-only"
2.1.5 Repeat for Select whether comment management links are printed as text or using the available icons : Choose "text-only"
--- NOTE: It's not "Select whether user interaction links are printed as text or using the available icons" which I know is the first in the list of these crazy icon vs text things! Leave that one as icons.
2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is checked.
--- It uses the original Peach css. My code just overlaps extra on top of it.
--- This method keeps all these layouts practically mobile responsive.
--- I dare you to uncheck the box. Do it. The layout will look super hideous.
2.3 Copy and paste the following code into "Use embedded CSS"
NORMAL VERSION

/*----SILENT PICTURE (DEFAULT)----*/
/* Base: Blanket (Peach) by renoir/sforzinda */
/* Edited by saga @ tofuhouse | 3rd November 2015 */
/* feel free to edit as you like */
/* this is hard and easy all at once */

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

body {
color: #222222;
background: url('') repeat #f5f5f5;
font-family: Arial;
font-size: 1em;
    }

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

a:visited {
color: #790000;
}

a:hover {
color: #000000;
}

a:active {
color: #790000;
}

blockquote {
background: #f8f8f8;
border: none;
margin: 1em;
padding: 2em 1em;
font-family:Courier New;
color:#808080;
font-size:1em;
font-style:normal;
}

/*----LAYOUT----*/

@media only screen and (min-width: 40em) {
#primary, #header, #secondary, #footer, .page-top { 
width: 800px; }
}

div.navigation.topnav {display: none;}
div.navigation.bottomnav { background: #ffffff;
margin: 2em 0;
padding:1em;
font-size: 0.6em;
font-weight: normal; 
text-align:right; }

div.navigation.bottomnav a {
color:#000000!important;
}
div.navigation.bottomnav a:hover {
color:#790000!important;
}

div.navigation.bottomnav.empty {padding:0em!important;}

/*----HEADER + FOOTER----*/

#header {
background-color:#ffffff;
margin: 0 auto 0;
}

#header>.inner {
border-left: 0px;
padding: 1em;
text-align:center;
}

#footer {
background: #ffffff;
margin: 2em auto 0;
}

#footer>.inner {
padding: 1em;
text-align:center;
}

#footer .page-top {
text-align:center;
color: #000000;
font-family: Times New Roman;
font-size: 1em;
letter-spacing: 0.1em;
    }

#header h1#title {
color: #000000;
text-shadow: 1px 1px 1px #888888;
font-family: Times New Roman;
font-size: 1.5em;
text-transform: none;
letter-spacing: 0.1em;
}

#header h1#title a {
color: #000000; !important;
}

#header h1#title a:hover {
color: #790000; !important;
}

#header h2#subtitle {
color: #aaaaaa;
font-family: Arial;
font-size: 0.8em;
text-transform: none;
letter-spacing: 0.1em;
}

#header h2#pagetitle {
color: #cccccc;
font-family: Times New Roman;
font-size: 1em;
text-transform: uppercase;
font-style: italic;
letter-spacing: 0.1em;
}

#footer a {color:#000000;}
#footer a:hover {color:#790000;}

/*----NAV LINKS (NOT CONTROL STRIP) ---*/

.module-navlinks {
background: #000000;
color:ffffff;
text-align: center;
}

.module-navlinks ul.module-list {
display: inline;
letter-spacing: 0.2em;
text-transform: uppercase;
font-family:  Times New Roman;
font-size: 1em;
}

.module-navlinks ul.module-list li {
border-right: none;
}

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

.module-navlinks ul.module-list li a:hover {
color: #888888;
}

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

#secondary {
clear:both;
color:#222222!important;
font-size:0.8em;}

#secondary>.inner {
border-left: 0px;
margin:0px;
padding:0px;
}

#secondary .module {
width: 90%;
margin: 1em 1em;
}

@media only screen and (min-width: 40em) {
#secondary .module {
width: 29%;
}
}

h2.module-header {
clear:both;
display:block;
font-family:Times New Roman !important;
font-size:1.2em;
padding:0.5em;
text-transform: uppercase; 
text-align:center !important;
font-weight:normal;
color:#000000!important;
text-shadow: 1px 1px #cccccc;
border-bottom:1px solid #666666;
}

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

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

#secondary .module-content {
font-family:Arial!important;
}

.module-content #profile {text-align: center;}
.module-content .userpic  {display:block;
float:none;
clear:both;
text-align: center;}
.module-content .journal-name {clear:both;
text-align: center;}
ul.userlite-interaction-links.icon-links {
clear:both;
margin-left: 0;
padding-left: 0;
text-align: center;
}
ul.userlite-interaction-links.icon-links li {
clear:both;
display: inline;
padding: 0 .20em;
border:0px;
}

.module-calendar { text-align: center !important; 
padding:0px 0px 10px 0px !important;}
.module-calendar table {width: 100%; text-align: center !important;  }
.module-calendar td {border: 1px solid #eeeeee;}
.module-calendar .empty-day {border: 1px solid #cccccc;}
.module-calendar .entry-day {border: 1px solid #cccccc; background-color: #f5f5f5 !important;}
.module-calendar th {background: #f5f5f5; border: 1px solid #eeeeee;}

.module-tags_cloud {border:0px;}

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

.module-userprofile .userpic img {
box-shadow: 3px 3px 3px #cccccc;
}

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

.entry {
color: #222222!important;
background-color: #ffffff;
border-left: 0;
margin:2em 0;
padding:0px;
}

.entry .header {
font-family: Times New Roman;
background: #ffffff;
text-align: center;
margin:0px;
padding:1em;
border-bottom: 1px solid #666666;
}

h3.entry-title {
font-family: Times New Roman;
font-size: 1.2em; 
color: #000000;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: none;
text-shadow: 1px 1px #cccccc;
}

h3.entry-title a {
color: #000000;
}

h3.entry-title a:hover {
color: #790000;
}
.entry .datetime a {
color: #000000;
}

.entry .datetime a:hover {
color: #790000;
}

@media only screen and (min-width: 40em) {
.entry .userpic {
margin: -1em 0em 0em -8em;    }
}
.userpic img {
width:100px;
height:100px;
background: #ffffff;
padding: 10px;
border: 0;
}

.entry .datetime a {
color: #000000;
}

.entry .datetime a:hover {
color: #790000;
}
}

.entry .contents { 
min-height:120px;
}

@media only screen and (min-width: 40em) {
.entry .contents { 
margin:1em 0 0 0;
}
}

.entry .entry-content {padding: 1em;}

@media only screen and (min-width: 40em) {
.entry .entry-content { overflow:auto;
}
}

.poster.entry-poster { padding: 0em 1em;
text-shadow: 1px 1px #cccccc;
color:#888888;}

.poster.entry-poster.empty { padding: 0em!important; }

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

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

ul.entry-interaction-links, ul.entry-management-links,
ul.comment-interaction-links, ul.comment-management-links {
margin:0;
padding: 1em 0em;
display:inline;
border-bottom:0px;
}

ul.text-links li { font-weight: normal;
font-size: 0.7em;
padding: 1em;
text-transform: uppercase;
letter-spacing: 1px;
color: #000000 !important;
text-decoration:none;
text-shadow: 1px 1px #cccccc;}
.text-links a, #comments .text-links a { color: #000000 !important; text-decoration:none;}
ul.text-links li:hover {text-decoration:none;}
.text-links li:hover a, #comments .text-links li:hover a {color: #790000 !important; text-decoration:none;}

ul.text-links li:active {text-decoration:none;}
.text-links li:active a, #comments .text-links li:active a {text-decoration:none;}

ul.text-links li:visited {text-decoration:none;}
.text-links li:visited a, #comments .text-links li:visited a {text-decoration:none;}

.entry .footer, .comment .footer {
clear:both;
margin: 0px;
padding: 1em 0;
text-align:center;
border-top:1px solid #666666;
}

.tag { margin: 0 0 1em 0;
padding: 0 1em 1em 1em;
text-align:left!important;
font-weight: normal;
font-size: 0.8em;
text-shadow: 1px 1px #cccccc;
border-bottom:1px solid #666666;
}

.tag-nav-trigger, .tag-nav-actions input {border:0 !important;}

.metadata-label-location,
.metadata-label-mood,
.metadata-label-music {
display:inline;}

.tag-text {display:inline;}

.metadata ul {
margin: 1em;
text-transform: lowercase;
font-weight: normal;
font-size: 0.8em;
}

.metadata ul li {color:#444444;}

.metadata-item-location, .metadata-item-music, .metadata-item-mood, .tag ul {
text-align: right;
}

.tag ul li {
font-weight: normal;
margin: .5em .2em 0 0;
text-align: right;
}

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

.comment-wrapper {
margin:0px;
}

.comment {
border:0px;
color: #222222!important;
background-color: #ffffff;
margin:0px;
padding:0px; 
}

.comment .contents {padding:1em;}

.comment-pages {background:#ffffff;
text-align:center;
padding: 1em 0;}

.comment .header {
background: #ffffff;
text-align: center;
margin:0px;
padding:1em;
border-bottom:1px solid #666666;
}

.comment-title {
font-family: Times New Roman;
font-size: 1.2em; 
color: #000000;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: none;
text-shadow:1px 1px #cccccc;
}

.comment-title a { color: #000000; }
.comment-title a:hover { color: #790000; }

.comment .datetime {color:#000000!important;}

.comment-poster {text-transform:none;
color:#888888;
text-shadow: 1px 1px #cccccc;}

.bottomcomment,
.comments-message {
border:0px;
margin:1em 0;
padding: 1em 0;
text-align:center;
background:#ffffff;
}

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

li.active {
color: #cccccc;
}

.month {
border:0px;
background-color: #ffffff;
color:#222222;
margin: 2em auto;
padding: 0;
}

.month .header {
text-align: center;
margin:0px;
padding:1em;
border-bottom: 1px solid #666666;
}

.month h3 {
font-family: Times New Roman;
font-size: 1.2em; color: #000000;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: none;
text-align:center;
}

.month .contents { padding:1em;}

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

.month table {
border-spacing: 1px;
border-collapse: separate;
}

.month td.day-empty {border: 1px solid #eeeeee;}
.month td.day {border: 1px solid #cccccc;}
.month td.day-has-entries {border: 1px solid #cccccc; background-color: #eeeeee !important;}
.month-wrapper th {background:#eeeeee; border: 0px; color:#000000; text-shadow: 1px 1px #cccccc;}

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

.month-wrapper .day-has-entries a {
}

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

h3.day-date {
display:block;
width:100%;
background: #ffffff; 
color:#000000; text-shadow: 1px 1px #cccccc;
font-weight:normal;
font-size: 1.2em;
font-family: times new roman;
padding: 1em 0;
margin: 2em 0 0 0;
text-align:center;
}

.month dl {
font-family: Arial;
margin:0px;
padding:1em;
}

.month dl dt {
text-transform: uppercase;
text-shadow: 1px 1px #cccccc;
}

.month dd h3 {
padding: 0em 0em 0em 0.5em;
}

.month dd h3 a {
color: #000000;
text-shadow: 1px 1px #cccccc;
}

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

.page-tags .tags-container {
border:0px;
background-color: #ffffff;
color:#222222;
margin: 2em auto;
padding: 0;
}

.page-tags .header {
background: #ffffff;
text-align: center;
margin:0px;
padding:1em;
border-bottom: 1px solid #666666;
}

.page-tags .tags-container h2 {
font-family: Times New Roman;
font-size: 1.2em; color: #000000;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: none;
text-align: center;
text-shadow: 1px 1px #cccccc;
}

.page-tags .contents { padding:1em;}

.page-tags .footer {text-align: center;}

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

.icons-container {
border:0px;
background-color: #ffffff;
color:#222222;
margin: 2em auto;
padding: 0;
}

.icons-container .header {
background: #ffffff;
text-align: center;
margin:0px;
padding:1em;
border-bottom: 1px solid #666666;
}

.icons-container h2 {
font-family: Times New Roman;
font-size: 1.2em; color: #000000;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: none;
text-align: center;
text-shadow: 1px 1px #cccccc;
}

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

.icons-container .footer {text-align: center;
clear:both;}

.icons-container .icon {
float:left;
min-width: 280px;
vertical-align: bottom;
width: 50%;
display:table;
font-size:0.75em;
}

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

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

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

#lj_controlstrip {
background: #000000;
background-position: 0 0;
border:0px;
text-shadow: 1px 1px #444444;
}

#lj_controlstrip td, #lj_controlstrip_statustext {
font-family: Arial !important;
color: #ffffff !important;
}

#lj_controlstrip input {
color:#ffffff !important;
background-color: #000000 !important; 
border: 1px solid #ffffff;
}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_login {
border-right: 0 !important;
}

#lj_controlstrip td a {
color: #cccccc !important;
}

#lj_controlstrip td a:hover {
color: #888888 !important;
}

/*----HOVER MENU THING----*/

.ContextualPopup {
background: #ffffff!important;
color: #000000!important;
font-size: 0.8em !important;
font-weight; normal !important;
border:0px !important;
border-radius: 0px!important;
box-shadow: 0px 0px 0px #000000;
text-shadow: 1px 1px #cccccc;
}

.ContextualPopup a { font-size: 0.8em !important;
color: #000000!important;
text-transform:uppercase; }
.ContextualPopup a:visited { color: #000000!important; }
.ContextualPopup a:hover { color: #aaaaaa!important; }
.ContextualPopup a:active { color: #000000!important; }

.ContextualPopup .Relation {
display:block;
font-weight:normal;
font-size:1em;
font-family:Times New Roman;
margin: 0 0 5px 0;
color: #000000;
border-bottom: 1px solid #666666;
padding:5px 0;
}

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

.ContextualPopup .Userpic img {
padding:7px;
background: #ffffff;
border: 0px;
box-shadow: 3px 3px 3px #cccccc;
}

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

NAVIGATIONAL PORTAL VERSION: USE THIS AFTER FURTHER INSTRUCTIONS.

/*----SILENT PICTURE (NAV PORTAL)----*/
/* Base: Blanket (Peach) by renoir/sforzinda */
/* Edited by saga @ tofuhouse | 3rd November 2015 */
/* feel free to edit as you like */
/* this is hard and easy all at once */

/*----NAVIGATIONAL PAGE EDITS----*/

/* Colour of Entry */
/* Replace "transparent" with a hex code for a colour */
/* Remember to put a # if you want to use a colour */
.page-recent .entry {
background: transparent !important;
}

/* Background of entire page */
/* Add a pattern url between the '' */
body {
background: url('') repeat #f5f5f5;
}

/* Entry + Link Colour Edits */
/* To stop clashing with bg colors if needed*/
/* No need to replace all*/
/* These colour changes affect only the entry page*/

/*Entry Text*/
.page-recent .entry {
color: #222222 !important;
}

/*Entry Text: Links*/
.page-recent .entry a {
color: #790000 !important;
}

/*Entry Text: Link Hover*/
.page-recent .entry a:hover {
color: #000000 !important;
}

/*---- FURTHER EDITS ----*/

/* Switch Previous Page on Recent View On or Off*/
/* It is currently Switched off.*/
/*Delete up to "stop deleting"*/
.page-recent div.navigation.bottomnav {display: none;}
/* stop deleting */

/* If Previous Page is switched ON */
/* Change Background Colour */
.page-recent div.navigation.bottomnav {
background: transparent !important;
}

/* Change Link Colour */
.page-recent div.navigation.bottomnav a {
color: #000000 !important;
}