tofuhouse | layout (tectonic)

[ click to see full size of default. ]

UPDATE: If you're coming here because you saw that the layout broke, don't worry, I'm looking into it. It is because of Dreamwidth's 2019/04/30 code push to fix Tectonic.

UPDATE 2: Actually, the default Tectonic layout has some weird floating occurring. I'm asking the team about this before I update codes, so watch this space.

UPDATE 3: Dreamwidth have fixed the bugs! The layout is usable again.

This time, something that allows you to change the colours without changing the patterns! If you want those patterns anyway.

Blame It On Me is named after "Blame It On Me" by George Ezra. Randomised aww yisss.

ABOUT THE LAYOUT
It's a patterned layout that's a lot easier than it looks:
- Screen Width: Aim for bigger than 1024+, but should be any cos it's--
- Fluid Width: Also phone friendly.
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing. And patterns.
- Custom Pattern Colours: You can change the colour of the patterns using just colour hexcodes.
- 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).
--- 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. Nothing borks though yay.

WHAT CAN YOU USE THIS FOR?
- Journals + Communities (of any kind)
- Anything you want patterns for.
- Feeling like you wanna change colours a lot.
- Browsing on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

HOW TO INSTALL
1. Select Tectonic: Fission. (by

momijizukamori)
2. Customise
2.1 Scroll down and choose a Page Set Up: Choose any side bar position.
--- NOTE: The default was made on "2 Columns (sidebar on the right)"
--- NOTE 2: It works on one column too, but I personally like the sidebars more.
2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is checked.
--- It uses the original Fission 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"

/*----BLAME IT ON ME----*/
/* Base: Tectonic (Fission) by momijizukamori */
/* Edited by saga @ tofuhouse | 16th November 2015 */
/* textures from subtlepatterns.com */
/* feel free to edit as you like */
/* uns uns uns */

/*----PATTERNS AND COLOURS FOR EASY EDITING----*/
/* Two Step Process! */
/* Just Plug in the Colour Codes you want for each */
/* Sometimes you may have to go a shade or 2 lighter */
/* Alternatively, just change patterns to what you want */
/* A default is already there as an example! */

/* Main Body Pattern */
body {
background-color: #ffffff; /*Change Colour Here*/
background-image: url('http://i.imgur.com/RbOqDnm.png'); /*Change Image Here*/
background-repeat: repeat;
}

/* Header Pattern */
#header {
background-color: #333333; /*Change Colour Here*/
background-image: url('http://i.imgur.com/LvdRQzE.png'); /*Change Image Here*/
background-repeat: repeat;
}

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

body {
color: #222222 !important;
font-family: Arial!important;
font-size: 1em;
margin: 0 !important;
margin: 1em 0 0;
}

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

a:visited {
color: #888888!important;
}

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

a:active {
color: #888888!important;
}

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

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

#canvas {
width: 100%;
margin: 0px!important;
margin-top:0px!important;
padding:0px;
}

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

@media only screen and (max-width: 45em) {
#content { width:100%; 
margin: 0;}
}

#secondary > .inner:first-child, #tertiary > .inner:first-child {
border-top: 0px;
padding: 0;
background: transparent!important;
}

@media only screen and (min-width: 45em) {
.one-column .module {
width: 22%;
}
}

#tertiary .module {padding:10px;
box-shadow: 1px 1px 2px black;}
#tertiary .module-content {border:1px dashed #cccccc;
font-family:Arial; padding:10px;
font-size:0.8em;}
.two-columns-left #tertiary .module, .two-columns-right #tertiary .module {
margin-right:0.25em;
}
.three-columns-left #tertiary .module, .three-columns-right #tertiary .module, .three-columns-sides #tertiary .module {
margin-bottom:1em;
}

div.navigation.topnav {display: none;}
div.navigation.bottomnav { 
border:0px;
background: #ffffff; 
text-align:center; 
padding:10px;
font-family:Georgia;
font-weight: normal;
text-shadow: 1px 1px 2px #aaaaaa;
box-shadow: 1px 1px 2px black;
}
div.navigation.bottomnav>.inner {border:1px dashed #cccccc;}
div.navigation.bottomnav.empty {padding:0em!important;}

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

#header {
margin: 0 0 10px 0;
}

h1#title {
margin: 0;
padding: 0.7em 0.7em 0.3em 0.7em;
font-size: 2.5em;
color: #ffffff;
text-transform:lowercase;
font-family: Georgia;
text-align: center;
font-weight:normal;
letter-spacing:0.1em;
text-shadow: 1px 1px 3px black;
font-style: italic;
}

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

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

h2#subtitle {
margin: 0;
padding: 0 0.7em 0.7em 0.7em;
font-size: 1.5em;
color: #ffffff;
color: rgba(255, 255, 255, 0.4);
text-transform:lowercase;
letter-spacing: 0.2em;
font-family: Georgia;
text-align: center;
font-weight:normal;
text-shadow: 1px 1px 2px black;
}
h2#pagetitle{
margin: 0;
padding: 0 0.7em 0.7em 0.7em;
font-size: 1em;
color: #ffffff;
color: rgba(255, 255, 255, 0.3);
text-transform: uppercase;
letter-spacing: 0.3em;
font-family: Georgia;
text-align: center;
font-weight:normal;
}

.module-section-header {
padding: 10px 0;
background: black;
box-shadow: 0px 0px 2px black;
}

.module-section-header>.inner {
border-top:1px dashed #404040;
border-bottom:1px dashed #404040;
}

.module-navlinks.module {
background: black;
border: 0;
margin: 0;
padding: 5px 0 10px 0;
width: 100%;
text-align: center;
}

.module-navlinks ul {
background-color: transparent!important;
}

.module-navlinks.module li {
display: inline;
background-color: transparent;
padding:0 5px;
border:0px;}

.module-navlinks.module li:hover {background-color: transparent;
border:0px;}

.module-navlinks .module-header {display:none;}

.module-navlinks a, .module-navlinks a:visited {
padding: 5px 10px;
text-decoration: none;
font-weight: normal;
font-size: 1em!important;
letter-spacing:0.2em;
text-transform: lowercase;
color: #ffffff!important;
font-family: Georgia;
}
.module-navlinks a:hover {
color: #888888!important;
}
.module-navlinks a:active {}

#footer {
margin-top:1em;
padding: 10px 0;
background: black;
box-shadow: 0px 0px 2px black;
text-align: center;
font-family:Georgia;
text-transform: lowercase;
}

#footer>.inner {
padding:10px;
border-top:1px dashed #404040;
border-bottom:1px dashed #404040;
}

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

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

/*----ENTRIES----*/

.entry, .comment, #postform{
border-top: 0;
box-shadow: 1px 1px 2px black;
padding:10px;
}

.entry>.inner {border:1px dashed #cccccc;}

.entry .header {
color: #000000;
background: #ffffff;
text-align:center;
border-bottom:1px dashed #cccccc;
margin:0px;
font-family:Georgia!important;
}

.entry h3.entry-title {
font-family:Georgia!important;
text-transform: lowercase;
font-weight: normal;
padding:2px;
margin:0;
background: transparent!important;
display:inline-block;
font-style: italic;
font-size:1.5em;
text-shadow: 1px 1px 2px #aaaaaa;
}

.entry h3.entry-title a {
background:transparent!important;
color:#000000!important;
}

.entry h3.entry-title a:hover {
color:#888888!important;
}

.datetime {
display: block;
font-size: 0.75em;
margin:0;
text-transform: uppercase;
font-style: normal;
color:#999999;
}

.datetime a {color: #999999!important;}
.datetime a:hover {color: #000000!important;}

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

.entry .contents {
padding:0px;
margin:0px;
}

.has-userpic .entry .userpic, .has-userpic .comment .userpic {
margin:0 10px 10px 0;
}
.has-userpic .entry-content, .has-userpic .metadata, .has-userpic .tag {
margin-left: 0px;
}

.has-userpic .tag {
margin-left:1em;
}

.entry-content, .comment-content {
padding: 0 1em 1em 1em;
}

.entry .userpic img, .comment .userpic img {
border: 0;
padding:10px;
border-bottom:1px dashed #cccccc;
border-right:1px dashed #cccccc;
}

.metadata, .tag {
text-shadow: 1px 1px 2px #aaaaaa;
}

.tag {
margin:1em;
padding:1em;
background:#ffffff;
box-shadow: 1px 1px 2px #aaaaaa;
font-family:Georgia;
}

.entry .footer, .comment .footer {
background: #ffffff;
clear: both;
text-align: center;
padding: .25em 0em;
margin-top: 1em;
border-top:1px dashed #cccccc;
font-family:Georgia;
font-style:italic;
text-transform:lowercase;
}

ul.entry-interaction-links, ul.entry-management-links,
ul.comment-interaction-links, ul.comment-management-links {
margin:0;
padding: 0;
display:inline;
}

ul.text-links li {background: transparent!important; padding: 0.25em 0.75em !important;
text-shadow: 1px 1px 2px #aaaaaa;}
.text-links a, #comments .text-links a {font-size: normal; color: #eeeeee;}
ul.text-links li:hover {background: transparent!important; padding: 0.25em 0.75em !important;}
.text-links li:hover a, #comments .text-links li:hover a {color: #000000; text-decoration: none;}

.poster {
font-family:Georgia;
font-style:italic;
text-shadow: 1px 1px 2px #aaaaaa;
}

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

.comment-pages {background:#ffffff;
text-align:center;
box-shadow: 1px 1px 2px black;
font-family:Georgia;
font-style:italic;
font-weight:normal;
text-shadow: 1px 1px 2px #aaaaaa;
}

.comment>.inner {
border:1px dashed #cccccc;
}

.comment .header {
background: #ffffff;
text-align: center;
margin:0px;
border-bottom:1px dashed #cccccc;
}

.comment-title {
font-style:italic;
font-size: 1.2em; 
color: #000000;
text-transform: lowercase;
text-shadow: 1px 1px 2px #aaaaaa;
}

h4.comment-title, h4.comment-title a {
font-family:Georgia!important;
font-weight:normal!important;
color:#000000!important;
}

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

.comment .datetime {
font-family:Georgia!important;
}

.has-userpic .comment-content {
margin:0px;
}

span.poster.comment-poster {
margin-bottom:1em;
}

.edittime {
margin-top:1em;
}

.bottomcomment,
.comments-message {
font-family:Georgia!important;
text-transform:lowercase;
box-shadow: 1px 1px 2px black;
}

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

#secondary .module { margin: 0em 0em 1em 0em;
padding:10px;
box-shadow: 1px 1px 2px black;
}

#secondary .module-header, #tertiary .module-header {
margin:0px;
background:#ffffff;
font-family:Georgia;
font-weight:normal;
font-style:italic;
color:#000000!important;
text-align:center;
text-transform:lowercase;
text-shadow: 1px 1px 2px #aaaaaa;
border-top:1px dashed #cccccc;
border-left:1px dashed #cccccc;
border-right:1px dashed #cccccc;
}

#secondary .module-header a, #tertiary .module-header a {
color:#000000!important;
}

#secondary .module-header a:hover, #tertiary .module-header a:hover {
color:#888888!important;
}

#secondary .module-content {border:1px dashed #cccccc;
padding:10px;
font-family:Arial!important;
font-size:0.8em;
}

#secondary .module-content .userpic img, #tertiary .module-content .userpic img {border:0px;
padding:10px;
background:#ffffff;
box-shadow: 1px 1px 2px #aaaaaa;
}

#secondary .journal-name, #tertiary .journal-name {
text-transform: none!important;
font-style:italic!important;
font-family: Georgia!important;
}

.module-calendar { text-align: center !important; }
.module-calendar table {width: 100%!important; text-align: center !important; font-family:Georgia!important; font-size:0.9em; }
.module-calendar td {border: 1px dotted #eeeeee; background:transparent;}
.module-calendar .empty-day {border: 1px dotted #cccccc;}
.module-calendar .entry-day {border: 1px solid #cccccc; background-color: #f5f5f5 !important;}
.module-calendar th {background: #f5f5f5; border: 1px solid #eeeeee;}

ul.module-list li {
border-bottom: 1px dashed #cccccc;
}

ul.module-list li:hover {
background:transparent!important;
}

/*----ARCHIVES + TAGS + ICONS LAYOUT----*/

.month, .page-tags .tags-container, .icons-container {
border-top: 0;
}

.month-wrapper, .page-tags .tags-container, .icons-container {
box-shadow: 1px 1px 2px black;
padding:10px;
background:#ffffff!important;
margin-bottom:1em;
}

.month-wrapper {padding-bottom:1px;}

.month>.inner, .page-tags .tags-container>.inner, .icons-container>.inner {
border:1px dashed #cccccc;
}

.month .header h3, .tags-container .header h2, .icons-container .header h2 {background:transparent!important;
font-family:Georgia!important;
text-transform:lowercase!important;
text-align:center!important;
font-weight:normal;
font-style:italic;
font-size:1.5em!important;
border-bottom:1px dashed #cccccc;
text-shadow: 1px 1px 2px #aaaaaa;}

.month .footer, .page-tags .tags-container .footer, .icons-container .footer {padding:1em;
font-family:Georgia;
text-transform:lowercase!important;
text-align:center!important;
text-shadow: 1px 1px 2px #aaaaaa;}

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

.month {padding:0px}

.month .footer {padding:1em 0;
text-align:center;}

.month .contents { padding:1em;
font-family:Georgia;}

.month table { width:100%;
border-spacing: 1px;
border-collapse: separate;
background:transparent!important;
}

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

.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%;
color:#000000; 
text-shadow: 1px 1px 2px #aaaaaa;
font-weight:normal;
font-size: 1.2em;
font-family: Georgia;
padding: 10px 0;
text-align:center;
background: #ffffff; 
box-shadow: 1px 1px 2px black;
margin: 0 0 1em 0;
}

.page-month .month {
padding:10px;
box-shadow: 1px 1px 2px black;
}

.month dl {
border:0px!important;
margin:0px;
padding:10px;
}

.month dl dt {
font-family: Georgia;
font-style:italic;
font-weight:normal;
text-shadow: 1px 1px 2px #aaaaaa;
text-align:center;
}

.month dl .entry-title {
font-family: Georgia;
font-style:italic;
font-weight:normal;
text-shadow: 1px 1px 2px #aaaaaa;
}

.month dl .datetime {
font-family: Georgia;
}

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

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

.icons-container .sorting-options {
text-align:center;
font-family:Georgia;
}

div.icons-container div.icon:nth-of-type(2n) {
clear: none;
}

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

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

#lj_controlstrip {
background: black !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 black;
}

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

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

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

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

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

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

/*----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: 1px 1px 2px black;
text-shadow: 1px 1px 2px #aaaaaa;
}

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

.ContextualPopup .Relation {
display:block;
font-weight:normal;
font-size:1em;
font-style:italic;
font-family:Georgia;
margin: 0 0 5px 0;
color: #000000;
border-bottom: 1px dashed #cccccc;
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: 1px 1px 2px #aaaaaa;
}

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

3. Modules: 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/4068.html">layout</a> @ <user name="tofuhouse">

OPTIONAL STUFF This is super customisable again, though you don't have to do much to get what you want.

PATTERN COLOURS: I said before that you can change the pattern colours without uploading new images. WOW! That also means you can mix and match. Anyway, near the top of the code I already left an area where you can change the colours.

1. Find where the colour code to the patterns of Main and Header (as labelled in the code)
2. Replace them with the colour codes of your preference
--- NOTE: You might have to go one or two shades lighter, but just check it first.

Currently, the default colours are:
Header: #333333
Main: #ffffff (it's white)
Which are the ones you see in the full-sized image preview. So mess around with the colours yourself for the perfect combo!

These two files are the patterns, in case you want to save them and upload them somewhere:
Main:

Header:

ALTERNATIVELY
1. Replace all the pattern files with patterns of your own.
--- Dreamwidth's internal file service is also here: Upload New | Manage Existing
(It's been working for mobile uploads if you email it, but now it does have file uploading from an internet browser)

COLOUR: It's all in grey scale cos it's easier to customise that way, but I made sure that all the colours used for text are pretty much different (so actual 50 shades). Don't worry about #000000 getting replaced all; anything that uses black as a shadow or background has been renamed "black" instead of the colour code, so you can Find+Replace as you please.
Main Font Colour: #222222
Link Colour: #888888
Hover Link Colour: #000000
Title Colour (and Links): #000000
Title Link Colour when hovered: #888888

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

Flat | Top-Level Comments Only

OHHHH yeah I definitely have no idea how to work php, which is sad cos I know it would be nice! Forums and wordpress are beyond me. Actually so was LJ, but i guess it wouldn't have been as bad if it had consistent names 8( The world is a fearsome place HAHA.

OH YEAH I REMEMBER SORTING COMMS, like the ones you fill in surveys too and get a stamp where you're like (insert character here). I feel like it's the atmosphere of tumblr too? I guess when it's harder to talk, it ends up leaking into the (very little) conversation. I used tumblr back before it suddenly got popular, and I swear it was just to follow a few graphic artists who also fell out of tumblr, sob.

YES CHALLENGE COMMUNITIES, i liked looking at the icon ones!

IT'S GOOOD oh man my first one was a nightmare, and thinking back it was kinda ambitious too with the subject titles (I keep thinking that I need to fix it up a bit, making it more responsive). But yes, at least if you have one set of code for this layout, the subsequent layouts get easier...good ol' copy and paste /guilty.

If you can handle DW, you could handle a lot of forums. Just not some of the older ones. MyBB uses HTML and CSS with variables to make it's layout, and though it's complicated a bit it's not much harder than editing a normal page with CSS/HTML. SMF's layouts, however, are little bitches. D:<

Like I heard you left out a semi-colon, now the entire webpage won't load kind of bitch.

I was in HP ones, but yes that's the idea. Tumblr feels different to me, but I think a large portion of that is the discussions being hard thing. I, too, tumblr'd before it was super popular! Lmao it was so different. :l

TBH I'm not sure I'd make another layout with this base (Planet Caravan), as I don't especially enjoy the title/subtitle bouncing around the navigation at will.

layout (tectonic) - blame it on me

no subject

no subject