tofuhouse | layout (Patsy)

[ click to see full size. ]

I ended up trying another one after I wanted to find a layout that was more phone-friendly. The Patsy base layout happens to be pretty fantastic for phones (and I like it normally too). I could've started fresh, but since Patsy uses some really good code for small screens already so I don't wanna mess with it cos I'm not that great. Maybe in the future if I feel like torturing myself more by redoing things.

Echo is named after "Echo" by Eskimo Joe. This was looping while I was messing around haha. I'm just naming stuff after songs cos my originality is excellent (meaning it doesn't exist)

ABOUT THE LAYOUT
It's a practical layout, basically for those who want to use as much of the functions Dreamwidth (circa 2015) can offer. SO:
- Great for Any Sized Screen: it should be relatively readable, at least when I tried.
- Fluid Width: It is actually mostly responsive. You can use this layout on your phone and aside from header text awkwardness, everything else will be perfectly fine. It will turn into one column instead of two.
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing.
- Custom Header + Footer: Patterns only.
- 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, but I'd still prefer to use it on a normal computer sized screen.

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.
- Browsing on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

HOW TO INSTALL
1. Select Patsy: Retro. (by

sforzinda)
2. Customise
2.1 Scroll down and choose a Page Set Up: Choose "2 Column (sidebar on the left)" which is the default anyway.
--- NOTE: It actually looks kinda hideous on sidebars aside from left. Usable, but don't do it!!
--- NOTE 2: I said it works as a single column automatically on a small screen. If you force it on a big screen (as in you choose the single column options instead of 2-columns), it will look butt-ugly. You'll have to turn off all modules.
2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is checked.
--- It uses the original Retro 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"

/*----ECHO----*/
/* Base: Patsy (Retro) by renoir/sforzinda */
/* Default header pattern by crazykira_22 */
/* Edited by saga @ tofuhouse | 11th July 2015 */
/* feel free to edit as you like */
/* i'm a masochist i swear */

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

#header {
background: url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee;
}

#footer {
background: url('http://i.imgur.com/1nrciMc.jpg') repeat #eeeeee;
}

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

html {font-size: 100%;}

body {margin: 0px; padding: 0px;
background-color:#f5f5f5;
color: #555555;
font-size: 1em;
font-family: Arial !important;
}

a {color: #9e0b0f;}

a:visited {color: #9e0b0f;}

a:hover {color: #666666;}

.cuttag_container b {font-weight: normal;}

.cuttag_container a {
font-weight: normal !important;
color:#9e0b0f;
}

.cuttag_container a:hover {
color:#666666;
}

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

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

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

#canvas {
border-left: 0px;
}

#secondary {
background: #222222;
}

.column-left #content, .column-right #content {
border-color: #222222;
}

@media only screen and (min-width: 45em) {
.two-columns #secondary, .three-columns #secondary, .three-columns #tertiary {position:relative; top: -7em;}
}

.entry .userpic img, .comment .userpic img  { border: 10px solid #ffffff; width:100px; height:100px;}

@media only screen and (min-width: 45em) {
.has-userpic .entry .userpic {
float: right;
margin: -4em -160px 0 0;
border-left: 20px solid #eeeeee;
}
.has-userpic .comment .userpic {
float: right;
border-left: 20px solid #eeeeee;
margin: -1em -160px 0 0;
}
}

@media only screen and (min-width: 45em) {
#header, #footer, #secondary, #tertiary {
border-right: 0px;
}
}

@media only screen and (min-width: 45em) {
#primary{
border-right: 140px solid #f5f5f5;
}
}

@media only screen and (min-width: 45em) {
#tertiary {
border-top: 10px #f5f5f5 solid;
}
}

.navigation {
font-family:arial !important;
border-left: 0px;
font-weight:bold;
text-shadow: 1px 1px 1px #aaaaaa;
color:#ffffff;
}

.navigation a {
color:#ffffff;
}

.navigation a:hover {
color:#9e0b0f;
}

@media only screen and (min-width: 45em) {
.two-columns #tertiary, .one-column #tertiary, .one-column #secondary  {
border-left: 0px;
background: #ffffff;
}
}

.month, .tags-container, .icons-container {
border-left: 0px; }

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

#header {
color: #000000;
border-left: 0px;
margin-top:0px !important;
padding:1em 1.5em 3em 1.5em;
position: relative; 
border-bottom: 0px;
font-family:arial !important; 
text-align:left;
font-weight:normal;
box-shadow: 2px 2px 2px #cccccc;
}

h1#title {
text-align:left;
font-family:arial !important;
font-weight:700;
text-transform: lowercase;
letter-spacing: 0.1em;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #aaaaaa;
}
h1#title:first-letter {
color: #9e0b0f !important;
}

h2#subtitle {
font-family:arial !important;
text-align:left;
font-weight: normal;
text-transform: lowercase;
letter-spacing: .3em;
padding: 0;
margin: 0;
text-shadow: 1px 1px 1px #aaaaaa; 
}

#header h2#pagetitle { display: none; }

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

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

.module-navlinks ul {
font-family:arial !important;
font-weight:bold;
display: inline-block;
text-align:center !important;
}

#header .module-navlinks li {
padding: 0;
margin: 0 !important;
font-size: 1.5em !important;
color: #ffffff;
text-shadow: 1px 1px 1px #aaaaaa;
padding: 1em 1em 0px 0px !important;
}

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

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

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

.entry {  border-left: 0;  border-bottom: 10px solid #f5f5f5; border-top:0; border-right:0;
margin-bottom:20px;
font-family:Arial!important;
font-size:1em;}

.entry .header {
text-shadow: 1px 1px 1px #aaaaaa;
letter-spacing:0.1em;
color: #000000 !important;
}

.entry .header a {
font-family:arial !important;
color: #000000 !important;
}

.entry .header a:hover {
color: #9e0b0f !important;
}

.entry .entry-title {
display:block;
border-bottom: 1px dotted #cccccc;
font-weight:bold;
}

h3.sticky-entry-title {color: #000000 !important;}

div.metadata {
margin:0px !important;
padding:0px !important;
font-size:0.75em;
text-shadow: 1px 1px 1px #aaaaaa;
border-top: 1px dotted #cccccc;
}

.metadata-label {
font-style:bold;
}

.tag {
font-size:0.8em;
font-weight: bold !important;
color:#222222;
text-shadow: 1px 1px 1px #aaaaaa;
border-top: 1px dotted #cccccc;
}

.entry-management-links {
display:block;
border-top: 1px dotted #cccccc;
}

.entry-interaction-links {
display:block;
text-shadow: 1px 1px 1px #aaaaaa;
color:#000000;
}

.entry-interaction-links a {
font-size: 0.9em;
font-weight: bold !important;
color:#000000;
}

.entry-interaction-links a:hover {
color:#9e0b0f;
}

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

#primary #comments {background:#f5f5f5;
font-family:Arial!important;
font-size:1em;
}

.comment {
border-left: 0px;
border-bottom: 5px solid #f5f5f5;
}

.bottomcomment, .comment-pages {
border-left: 0px;
border-bottom: 5px solid #f5f5f5;
}

.bottomcomment {
text-shadow: 1px 1px 1px #aaaaaa;
text-transform:uppercase;
}

.comment-pages {
font-weight:bold;
text-shadow: 1px 1px 1px #aaaaaa;
color:#ffffff;
text-transform:uppercase;
}

.comment-pages a {
color:#ffffff;
}

.comment-pages a:hover {
color:#9e0b0f;
}

.comment .header {
text-shadow: 1px 1px 1px #aaaaaa;
letter-spacing:0.1em;
color: #000000 !important;
}

.comment .comment-title {
display:block;
font-size:1em;
font-weight:bold;
border-bottom: 1px dotted #cccccc;
}

.comment .comment-title a {
font-family:arial !important;
color:#000000 !important;
}

.comment .comment-title a:hover {
color:#9e0b0f !important;
}

.comment .datetime {
text-shadow: 1px 1px 1px #aaaaaa;
letter-spacing:0.1em;
color: #000000 !important;}

.comment-poster {  text-transform: none; }

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

.comment-management-links {
display:inline-block;
}

.comment-interaction-links {
display:block;
text-align:center;
text-shadow: 1px 1px 1px #aaaaaa;
color:#000000;
text-transform:uppercase;
}

.comment-interaction-links a {
font-size: 0.9em;
font-weight: bold !important;
color:#000000;
}

.comment-interaction-links a:hover {
color:#9e0b0f;
}

.comment .multiform-checkbox {display:inline-block;
}

.comment-content {border-bottom: 1px dotted #cccccc;}

/*----MODULES ("SIDEBAR")----*/

#secondary .module {
background: #222222!important;
color:#777777!important;
font-family:arial !important;
}

h2.module-header {
clear:both;
display:block;
font-family:arial !important;
text-transform: uppercase; 
text-align:left !important;
font-weight:bold;
color:#404040;
text-shadow: 1px 1px 1px #000000;
border-top: 1px dotted #444444;
border-bottom: 1px dotted #444444;
}

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

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

#secondary .module-content {
clear:both;
margin: 10px 0px 0px 0px;
font-family:arial;
font-size:0.8em;}

#secondary .module-content a {
color: #9e0b0f;}
#secondary .module-content a:hover {
color: #999999;}

.module-content .userpic  img {padding: 10px; border: 1px dotted #444444; background: #333333;}

#secondary .module-content ul {
text-align:left;
list-style-type: none;
}

ul.userlite-interaction-links.icon-links {
text-align: center !important;
}

.module-calendar { text-align: center !important; 
padding:0px 0px 10px 0px !important;}
.module-calendar table {width: 98%; }
.module-calendar td {border: 1px dotted #444444;}
.module-calendar .empty-day {border: 1px solid #666666;}
.module-calendar .entry-day {border: 1px solid #666666; background-color: #333333 !important;}
.module-calendar th {background: #303030; border: 1px dotted #444444;}

.module-powered, .module-time {
border:0px;
font-size:0.75em;
color:#aaaaaa;
}

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

div#archive-year {padding-left: 0px !important;
padding-right: 0px !important;
}

.month-wrapper {
width: 100%;
margin:0 !important;
font-family: Arial;
}

.month-wrapper h3 {
display:block;
font-family: Arial;
color:#000000;
text-transform: uppercase;
font-weight:bold;
text-shadow: 1px 1px 1px #aaaaaa;
border-bottom: 1px dotted #cccccc;
}

table.month {
clear:both;
text-align: center;
width: 90%;
}

.month td.day-empty {border: 1px dotted #aaaaaa;}
.month td.day {border: 1px solid #aaaaaa;}
.month td.day-has-entries {border: 1px solid #aaaaaa; background-color: #eeeeee !important;}
.month-wrapper th {background: #333333; border: 1px dotted #222222; color:#666666;}

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

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

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

h3.day-date {
padding-left:1em;
color:#ffffff;
text-transform: uppercase;
text-shadow: 1px 1px 1px #aaaaaa;
}

.month dl {
font-family: Arial;
}

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

.month caption {
color:#ffffff;
text-transform: uppercase;
text-shadow: 1px 1px 1px #aaaaaa;
font-weight:bold;
}

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

.tags-container {
font-family: Arial;
}

.tags-container h2 {
display:block;
font-family: Arial;
font-size:1em;
color:#000000;
text-transform: uppercase;
font-weight:bold;
text-shadow: 1px 1px 1px #aaaaaa;
border-bottom: 1px dotted #cccccc;
}

.tags-container .contents {
}

.tags-container .footer {
font-size: 0.8em;
text-shadow: 1px 1px 1px #aaaaaa;
}

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

.icons-container {
font-family: Arial;
}

.icons-container h2 {
font-family: Arial;
font-size:1em !important;
color:#000000;
text-transform: uppercase;
font-weight:bold;
text-shadow: 1px 1px 1px #aaaaaa;
border-bottom: 1px dotted #cccccc;
}

.icons-container .contents {
text-align:left;
font-size: 0.9em;
}

.icons-container .footer {
font-size: 0.8em;
text-transform: uppercase;
text-shadow: 1px 1px 1px #aaaaaa;
}

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

#footer {
border-left: 0px;
color: #000000;
text-align: right;
text-transform: uppercase;
font-family:arial !important;
font-weight:bold;
text-shadow: 1px 1px 1px #aaaaaa;
}

#footer a {
color: #000000;!important;
}

#footer a:hover {
color:#9e0b0f!important;
}

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

#lj_controlstrip {
background: #000000 !important;
background-repeat: no-repeat;
background-position: 0 0;
z-index: 100 !important;
text-align:left;
letter-spacing:0.2em;
box-shadow: 0px 0px 2px #000000;
}

#lj_controlstrip_user, #lj_controlstrip_actionlinks, #lj_controlstrip_login {
text-align: left;
border-right: 1px dotted #444444;
}

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

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

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

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

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

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

.ContextualPopup {
background: #222222!important;
color: #555555!important;
font-size: 0.9em !important;
font-weight; normal !important;
border:0px !important;
border-radius: 0px!important;
box-shadow: 0px 0px 2px #000000;
text-shadow: 1px 1px 1px #000000;
}

.ContextualPopup a { font-size: 0.9em !important;
color: #cccccc!important; }
.ContextualPopup a:visited { color: #cccccc!important; }
.ContextualPopup a:hover { color: #9e0b0f!important; }
.ContextualPopup a:active { color: #cccccc!important; }

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

.ContextualPopup .Userpic img {
padding:7px;
background:#333333;
border: 1px dotted #444444;
}

/*----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/1085.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 and foot! You can replace it if you want. Just remember:
- It has to be a pattern (any pattern though will be fine as long as it is of the lighter end of the spectrum).

To replace it, look to the code again, and see near the top how I put in a #header and #footer code with a background. Just replace that url with the image you want. Do it to both.

Meanwhile, the 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, 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 (⊙◞౪◟⊙)

Flat | Top-Level Comments Only

From:

colls

I like the layout - thanks for posting it!

saga

no problem, thanks for using it!!!

intothisshadow

Wondeful layout! I'm using it :D

aaaahhh i'm glad it's good for you :)

quietfront

I love this layout, it's sleek and beautiful! Thank you!

whoa thank you! i'm happy it's cool for :>

forthwritten

I really like this - have you considered submitting it to

dreamscapes as a site theme?

oh wow thank you!! I'm not sure how (and if I am worthy either HAHA!) also if I knew how, I'd have to change the texture to something commercial-free (and bring back the page-title, but both should be easy)

Sadly I'm not good enough with styles from scratch to offer much help, but there's some info here:

Entry guidelines: http://dreamscapes.dreamwidth.org/2014/02/24/entry-guidelines.html
Conversion resources: http://dreamscapes.dreamwidth.org/6636.html
How to patch styles and themes: http://wiki.dwscoalition.org/notes/Newbie_Guide_for_People_Patching_Styles

You can also check the !information and !resources tags. You can also post it with a -needs conversion tag.

I hope this helps!

whoa thanks! yeah these will help, let's see if I can do this thing! If all else fails, thank god for that "-needs conversion" tag uwoh.

axi

Using this with a couple color edits. Great work!

waxbox

Using it on this journal, as is. Thanks!

Not a problem, I'm glad you like it!

S	M	T	W	T	F	S
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30	31

that house made out of tofu

you can eat the walls

layout (Patsy) - echo

Navigation

layout (Patsy) - echo

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

Profile

May 2023

Links

Most Popular Tags

Page Summary

Some Lyrics in Custom Text

Style Credit

Expand Cut Tags