tofuhouse | layout (Blanket)

[ click to see full size. ]

I wanted to try something with a header banner!! I made a fresh css sheet, but it wasn't phone-fluid. Long story short, testing around it out turns you need the original stylesheet checked. Which I'm not complaining about, it makes things easier to muck around with.

Burn Your Name is named after "Burn Your Name" by Powderfinger. This time...I just hit a random song in my library.

ABOUT THE LAYOUT
It's a stylish and vaguely practical layout, 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 and date). Once your screen starts getting smaller than a certain width (like phones), it'll revert to a smaller version (bannerless).
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing. And patterns.
- Custom Header: a 800px wide image. Any height. Animated gifs should work too (whoa).
- 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?
- Journals + Communities (of any kind)
- Anything you need a banner for (and can't be bothered to put fancy text straight into it like me.)
- 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"

/*----BURN YOUR NAME----*/
/* Base: Blanket (Peach) by renoir/sforzinda */
/* Edited by saga @ tofuhouse | 2nd August 2015 */
/* Default Banners: photos by Masato Mukoyama https://www.flickr.com/photos/94720786@N04/ */
/* Default patterns by crazykira_22 */
/* feel free to edit as you like */
/* doop di doo */

/*----HEADER BANNER FOR EASY EDITING----*/
/* Two Step Process! */
/* Insert URL of a 800px width banner where the URL is*/
/* Change padding-bottom with image height */
/* A default is already there as an example! */

@media only screen and (min-width: 40em) {
#header {
background-color:#000000;
padding-bottom: 300px; /*image height*/
background-image: url('http://i.imgur.com/mqqiSTJ.jpg');
background-repeat: no-repeat;
background-position: bottom center;
}
}

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

body {
color: #222222;
background: url('http://i.imgur.com/tXJ6eg1.png') 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;
}

.cuttag_container b {font-weight: normal;}

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: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
margin: 0;
padding:1em;
font-size: 0.6em;
font-weight: normal; 
text-align:right; }

div.navigation.bottomnav a {
color:#ffffff!important;
}
div.navigation.bottomnav a:hover {
color:#888888!important;
}

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

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

#header {
margin: 0 auto 0;
}

#footer {
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
margin: 0 auto 0;
}

#header>.inner {
border-left: 0px;
padding: 1em;
text-align:center;
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
}

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

#footer .page-top {
text-align:center;
color: #ffffff;
font-family: Arial;
font-size: 0.8em;
letter-spacing: 0.1em;
    }

#header h1#title {
color: #ffffff;
font-family: Arial;
font-size: 1.5em;
text-transform: none;
letter-spacing: 0.1em;
}

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

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

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

#header h2#pagetitle {
display:none;
}

#footer a {color:#ffffff;}
#footer a:hover {color:#888888;}

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

.module-navlinks {
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
color:ffffff;
background-repeat: repeat-x;
text-align: center;
}

.module-navlinks ul.module-list {
display: inline;
letter-spacing: 0.2em;
text-transform: uppercase;
font-family:  Arial;
font-size: 0.75em;
}

.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;
background:url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee;
font-family:arial !important;
font-size:1em;
padding:1em;
text-transform: uppercase; 
text-align:center !important;
font-weight:normal;
color:#000000!important;
text-shadow: 1px 1px #cccccc;
}

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

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

#secondary .module-content {max-height:250px;
overflow:auto;
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;
}

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

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

.entry .header {
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
text-align: center;
margin:0px;
padding:1em;
}

h3.entry-title {
font-family: Arial;
font-size: 0.8em; color: #ffffff;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: uppercase;
}

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

h3.entry-title a:hover {
color: #888888;
}
.entry .datetime a {
color: #cccccc;
}

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

@media only screen and (min-width: 40em) {
h3.entry-title, .header .access-filter {display:inline;}
.header .access-filter img {height:12px;width:12px; margin:0 0 0 0.5em;}
.entry .userpic {
margin: -1em 0em 0em -8em;    }
}
.userpic img {
width:100px;
height:100px;
background:url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee;
padding: 10px;
border: 0;
}

@media only screen and (min-width: 40em) {
.entry .datetime {
float:right;
width:100px;
text-align:center;
color: #000000;
background:url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee;
font-size: 1em;
font-weight: normal;
letter-spacing: 1px;
padding: 10px;
text-transform: uppercase;
margin: 2em -9em 0em 0em;
text-shadow: 1px 1px #cccccc;
}

.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;}

.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: 0;
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;
background:url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee;
}

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

.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: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
text-align: center;
margin:0px;
padding:1em;
}

.comment-title {
font-family: Arial;
font-size: 0.8em; color: #ffffff;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: uppercase;
}

.comment-title a { color: #ffffff; }
.comment-title a:hover { color: #888888; }

.comment-poster {text-transform:uppercase;
text-shadow: 1px 1px #cccccc;}

.bottomcomment,
.comments-message {
border:0px;
margin:0px;
padding: 1em 0;
text-align:center;
background:url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee;
}

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

li.active {
color: #cccccc;
}

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

.month .header {
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
text-align: center;
margin:0px;
padding:1em;
}

.month h3 {
font-family: Arial;
font-size: 0.8em; color: #ffffff;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: uppercase;
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:url('http://i.imgur.com/1nrciMc.jpg') repeat #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:url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee; 
color:#000000; text-shadow: 1px 1px #cccccc;
font-weight:normal;
font-size:0.8em;
padding: 1em 0;
margin:0px;
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: 0 auto;
padding: 0;
}

.page-tags .header {
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
text-align: center;
margin:0px;
padding:1em;
}

.page-tags .tags-container h2 {
font-family: Arial;
font-size: 0.8em; color: #ffffff;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: uppercase;
text-align: center;
}

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

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

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

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

.icons-container .header {
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
text-align: center;
margin:0px;
padding:1em;
}

.icons-container h2 {
font-family: Arial;
font-size: 0.8em; color: #ffffff;
font-weight: normal;
letter-spacing: 0.1em;
margin: 0;
padding: 0;
text-transform: uppercase;
text-align:center;
}

.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:url(http://i.imgur.com/1nrciMc.jpg) repeat #eeeeee;
background-position: 0 0;
border:0px;
text-shadow: 1px 1px #cccccc;
}

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

#lj_controlstrip input {
color:#606060 !important;
background-color: #f5f5f5 !important; 
border: 1px solid #cccccc;
}

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

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

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

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

.ContextualPopup {
background:url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee!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 .Userpic {
padding: 0px!important;
margin: 0px!important;
border: 0px!important;
}

.ContextualPopup .Userpic img {
padding:10px;
background: url('http://i.imgur.com/SoR6aat.jpg') repeat #000000;
border: 0px;
}

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

3. Modules for your bottom module section: Choose as you see fit.
--- NOTE: Don't worry about how big these modules get when it comes to list, I threw on a scrollbar code.
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/1687.html">layout</a> @ <user name="tofuhouse">

OPTIONAL STUFF There's a whole bunch of images here, so I'm gonna go through them by categories.

HEADER BANNER: Underneath your title and subtitle: No need to do much with your header banner, like fancy text, because the journal/community name is there. To insert the code look to the top where I put #header.
0. Make sure your image is 800px wide.
1. Insert the URL where the link already is.
2. Change padding-bottom's value with the image's height value.

And you're pretty much set. I left a default banner there already. The link is here: http://i.imgur.com/mqqiSTJ.jpg
--- Preferably save it and re-upload it somewhere in case it is lost.

PATTERNS: There are three patterns in use here, and unfortunately I can't move them all in the above code because they are used in so many areas. If you wanna replace them:
0. Copy these following links:
--- Black pattern: http://i.imgur.com/SoR6aat.jpg
--- Grey pattern: http://i.imgur.com/1nrciMc.jpg
--- White pattern (one in the bg): http://i.imgur.com/tXJ6eg1.png
1. Get the entire code, add to word processor like Notepad. Something that doesn't autoformat grossly.
2. Go to Find. Or in notepad's case, "Replace": Replace links with your ones. Hit "Replace All" if it's there, even easier.
ALTERNATIVELY: If you're doing it straight from the browser:
1. CTRL+F each of those URLs and replace them as you go.

Once again, should you want to re-upload those images somewhere, feel free to! (Same process applies). Also choose patterns with similar levels of shades if you wanna customise, unless you're going for the full rehaul (go for it!)

CUSTOM ICON PAGE: Check it out, it's pretty cool. I even put in more than one icon now cos it looked so lonely before. 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, but I'm gonna be honest and say that it's easier 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! Have fun with my further masochistic attempts at productivity (⊙◞౪◟⊙)

layout (Blanket) - burn your name

no subject