tofuhouse | layout (Five AM)

[ click to see full size. ]

While notifications were down, I ended up messing around with a layout, and it's my very first layout ever so I suck!!! I put more work on it than I thought, so I might as well share it.

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.) That's right, sharing music here!!

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:
- Mostly Minimalist
- Great for Large Screens (like mine...anyway fonts aren't too small!)
--- Still great for small laptop screens though.
- Fluid Width (until you go too small then it'll just bork, so it's not really that responsive)
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing.
- Custom Header: Patterns only.
- Optimal on: Firefox and Chrome. 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 checked.
--- It uses the original Early Edition css. My code just overlaps extra on top of it.
--- This method keeps all these layouts practically mobile responsive. Even though I did this for this layout is cos I'm a beginner.
--- 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"

/*----FREE YOUR MIND----*/
/* Base: Five AM (Early Edition) by winterfish */
/* Default header pattern by fivespointapart */
/* Edited by saga @ tofuhouse | 27th June 2015 */
/* feel free to edit as you like */
/* there's no real structure to each code, 
it's inconsistent cos i suck!!! */

/*----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: url('http://i.imgur.com/XoDh6rw.png') repeat #eeeeee; 
}

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

html {font-size: 100%;}

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

a {color: #666666;}

a:visited {color: #666666;}

a:hover {color: #999999;}

.cuttag_container b {font-weight: normal;}

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

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

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

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

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

#canvas {
width: 100%;
margin: auto;
margin-top:0px;
}

#content { float: none; 
margin-left:10%;
margin-right:10%;}

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

#header {margin-top:0px !important;
position: relative; 
margin-bottom: 20px; 
padding: 60px 0px 20px 0px important!; 
border-top: 5px solid #000000; 
border-bottom: 0px; 
width:100%;
text-align:center;
font-weight:normal;
min-height:200px;
letter-spacing:0.2em;
}

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

#header h1#title {
margin-top:50px;
display:block;
background: #ffffff;
font-family: Arial;
color: #000000 !important;
font-size: 1.5em !important;
padding: 5px 10px !important;
border: none;
opacity: 0.7;
}
#header h2#subtitle {
margin-top:0px;
display:block;
background: #ffffff;
font-family: Arial;
color: #000000 !important;
font-size: 1em !important;
font-style:italic;
padding: 5px 10px !important;
border: none;
opacity: 0.7;
}
h1#title:first-letter,
h2#pagetitle:first-letter {
color: #000000 !important;
}
#header h2#pagetitle { display: none; }

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

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

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

#header .module-navlinks li {
padding: 0;
margin: 0 !important;
font-size: 0.9em !important;
color: #fff;
padding: 5px 10px 5px 10px !important;
background: #000;
}

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

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

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

.entry {margin-bottom: 20px; line-height: 1.5em;
background:#ffffff;
border-top:5px #000000 solid;}

.entry a { color: #666666 !important; }
.entry a:visited { color: #666666 !important; }
.entry a:hover { color: #999999 !important; }
.entry a:active { color: #666666 !important; }

.entry .header {
clear: both;
margin-top:0px !important;
padding-top:0px !important;
color: #ffffff;
font-size:0.8em;
letter-spacing:0.1em;
text-transform:uppercase;
}

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

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

.entry .entry-title {
background-color:#000000;
padding: 5px 10px 5px 10px !important;
}

.entry .datetime {
background-color:#000000;
padding: 0 10px 5px 10px !important;
text-transform: uppercase;
}

.entry .entry-content {
padding: 0px 1em 2em;
font-size:0.9em;
letter-spacing:0.05em;
text-align:justify;
}

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

.contents .entry-poster {
padding-left:1em;
font-weight: normal !important;
color:#888888;
font-size:0.8em;
font-style:italic;
}

.contents .entry-poster a {
font-weight: normal !important;
color:#777777 !important;
}

.contents .entry-poster a:hover {
color:#999999 !important;
}

div.metadata {
margin:0 !important;
padding-left:2em !important;
padding-bottom:0 !important;
font-size:0.75em;
letter-spacing:0.05em;
}

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

.tag {
margin:0 !important;
padding: 1em 0 1em 1em !important;
font-size:0.8em;
letter-spacing:0.05em;
}

.entry-management-links {
margin: 0px !important;
padding:10px !important;
}

.entry-interaction-links {
margin: 0px !important;
background-color: #eeeeee;
padding:10px !important;
}

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

.comment-wrapper {
border-top: 5px solid #000000;
background-color:#ffffff;
margin: 1em 0 0;
padding:1em 1em 0 1em;
font-size:0.9em;
letter-spacing:0.05em;
}

.comment-wrapper a:hover {
color: #999999!important;
}

.comment .header {
color:#222222 !important;
}

.comment .comment-title {
font-size:1.1em;
font-weight:bold;
}

.comment .comment-title a {
color:#222222 !important;
}

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

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

.bottomcomment .entry-interaction-links a {
color:#666666 !important;
}

.bottomcomment .entry-interaction-links a:hover {
color:#999999 !important;
}

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

#secondary .module { border-top: 5px solid #000000;
padding: 0px 10px 10px 0px; 
background-color: #ffffff; 
color: #555555;
text-align: center;}

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-size:0.9em;
font-weight:normal;
color:#ffffff;
}

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

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

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

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

#secondary .module-content ul {text-align:left;}

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 .empty-day {border: 1px solid #aaaaaa;}
.module-calendar .entry-day {border: 1px solid #aaaaaa; 
background-color: #eeeeee;}

.module-customtext {text-align: justify !important;}

.module-powered, .module-time {
border:0px;
background-color:#ffffff;
color:#dddddd;
}

.module-powered a, .module-time a {
color:#dddddd !important;
}

.module-powered a:hover, .module-time a:hover {
color:#cccccc !important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.tags-container .contents {
clear:both;
font-size: 0.9em;
letter-spacing:0.05em;
}

.tags-container .footer {
padding: 0 0 .1em 1em;
clear:both;
font-size: 0.8em;
letter-spacing:0.05em;
}

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

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

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

.icons-container .contents {
clear:both;
font-size: 0.9em;
letter-spacing:0.05em;
padding: 0 1em 0 1em;
}

.icons-container .footer {
padding: 0 0 .1em 1em;
clear:both;
font-size: 0.8em;
letter-spacing:0.05em;
}

.icons-container .ljuser {
font-weight: normal !important;
color:#888888;
font-size:0.8em;
}

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

.icons-container .ljuser a:hover {
color:#999999 !important;
}

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

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

#footer .inner {
padding: 0px !important;
}

#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 !important;
background-repeat: no-repeat;
background-position: 0 0;
z-index: 100 !important;
border-bottom: 0px;
text-align:center;
letter-spacing:0.2em;
}

#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: #ffffff!important;
color: #666666!important;
font-size: 0.8em !important;
font-weight; normal !important;
border:0px !important;
border-top:5px solid #000000 !important;
border-radius: 0px!important;
}

.ContextualPopup a { color: #666666!important; }
.ContextualPopup a:visited { color: #666666!important; }
.ContextualPopup a:hover { color: #999999!important; }
.ContextualPopup a:active { ccolor: #666666!important; }

.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/557.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:
- It has to be a pattern (any pattern though will be fine).

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.

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, 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! (Though I might edit this page to tidy it up.) Have fun with my first masochistic attempt at productivity (⊙◞౪◟⊙)

Flat | Top-Level Comments Only

I like this! Well done, it's nice and simple which is pretty much what I look for in a layout ;D

Edited 2015-06-29 15:38 (UTC)

uwohhhh thanks!! since it's my first go i'm really happy that it's liked :>

I've been looking for a clean, pretty, practical layout like this for a long time - just gorgeous, thank you! Have used and credited in my profile. :)

you're welcome! I'm glad I could help! :>

oh gosh i love this *0* and a custom icon page too!! i've been looking for a new layout for one of my rp journals for ages now and this looks perfect, thank you!

thank u!!! and ahhhh awesome i hope to see you around the rp sphere someday too!

TAKES THIS BECAUSE GOD I NEED A FLUID WIDTH GRIPS THE TABLE

OMG I'VE BEEN WANTING SOMETHING LIKE THIS FOR AGES thank you

I love this! Thank you for sharing :D

I love this layout so much. Thank you!

amy i'm ditching the sidebar how do i make the journal entries a little less wide

idk

omg i just woke up but it's like, in the "primary" and locate the width, and change it. It's a percentage if i remember correctly LOL. you can change it to pixels but it just won't be phone frandly cos first layout, it wasn't as efficient then.

thanks gurl now talk gackt with me

HUR HUR DID IT WORK

and apparently gackt's gonna be at some indonesian anime con I'M SO JEALOUS.

Hello! I'm attempting to change the black to an accent color and round out the icons, and I managed to do so on all but the sidebar. I added icon container codes to the sidebar section and it is still being stubborn! ): Only the icon and its border won't listen to anything. Do you have any ideas? Thank you for your time and the beautiful code!

Okay no problem! Here's the thing, it's actually from the original stylesheet, not my one, (cos it looked the same so I kept it and didn't change!)

The original stylesheet code is:
.module-userprofile .userpic img {
background: none repeat scroll 0% 0% rgb(37, 37, 37);
border: 1px solid rgb(37, 37, 37);
padding: 5px;
}

So basically just override that and add the !important (and with a lot of 0px or none for what you don't need)!!

Edited (o is not a zero omg i need coffee) 2016-01-29 04:27 (UTC)

That worked perfectly thank you!

Thank you! This is great. I'm using it for an icon journal :3

yessss icon journals! I'm so glad this helped out hehe

I love this layout, it's so elegant and clean looking! I'm using it in my journal right now, thank you for making it ♥ !

Not a problem, I'm glad you like it!! And whoa your edits look amazing too!!!

Thank you, this is a nice layout with large enough font for my bigger computer monitor and font is also good for my mobile phone. My sister just added some color to links, meta data and control strip. I have credited you on the sidebar of my journal. Thank you for sharing your creativity with us.

Account name:	Log in with OpenID?
Password:	Forget your password?
	Remember me

layout (Five AM) - free your mind

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

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject

no subject