saga: (Default)
saga ([personal profile] saga) wrote in [community profile] tofuhouse2015-06-27 06:00 pm
Entry tags:

layout (Five AM) - free your mind

[ 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!!

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).

- Journals (Personal, Fanstuff, Challenges, Roleplay, etc)
- Communities (of any kind)
- Anything that you wouldn't mind using the modules and stuff for.

1. Select Five AM: Early Edition. (by [personal profile] 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"

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

Post a comment in response:

Anonymous( )Anonymous This account has disabled anonymous posting.
OpenID( )OpenID You can comment on this post while signed in with an account from many other sites, once you have confirmed your email address. Sign in using OpenID.
Account name:
If you don't have an account you can create one now.
HTML doesn't work in the subject.


Notice: This account is set to log the IP addresses of everyone who comments.
Links will be displayed as unclickable URLs to help prevent spam.