saga: (Default)
saga ([personal profile] saga) wrote in [community profile] tofuhouse2015-07-11 01:08 am
Entry tags:

layout (Patsy) - echo


[ 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 [personal profile] 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"

3. Modules for your sidebar(s): Choose as you see fit.
4. And just so people can find and use this layout too, credit [community profile] 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 (⊙◞౪◟⊙)
colls: (JONES Indy&Marion)

[personal profile] colls 2015-07-12 09:13 pm (UTC)(link)
I like the layout - thanks for posting it!
ariane: (Default)

[personal profile] ariane 2015-07-13 03:24 pm (UTC)(link)
Wondeful layout! I'm using it :D
quietfront: <user name="r-h-kawai-icons" site="tumblr.com"> (Default)

[personal profile] quietfront 2015-08-07 06:33 am (UTC)(link)
I love this layout, it's sleek and beautiful! Thank you!
forthwritten: stained glass spiral (Default)

[personal profile] forthwritten 2015-10-09 03:05 pm (UTC)(link)
I really like this - have you considered submitting it to [site community profile] dreamscapes as a site theme?
forthwritten: stained glass spiral (Default)

[personal profile] forthwritten 2015-10-12 05:47 pm (UTC)(link)
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!
axi: <user name="axiality"> (summer nights)

[personal profile] axi 2016-06-09 02:17 am (UTC)(link)
Using this with a couple color edits. Great work!
waxbox: (sh | <3)

[personal profile] waxbox 2016-09-03 02:07 am (UTC)(link)
Using it on this journal, as is. Thanks!