saga: (Default)
saga ([personal profile] saga) wrote in [community profile] tofuhouse2015-08-02 09:40 pm
Entry tags:

layout (Blanket) - burn your name


[ click to see full size. ]


I wanted to try something with a header banner!! I made a fresh css sheet, but it wasn't phone-fluid. Long story short, testing around it out turns you need the original stylesheet checked. Which I'm not complaining about, it makes things easier to muck around with.

Burn Your Name is named after "Burn Your Name" by Powderfinger. This time...I just hit a random song in my library.

ABOUT THE LAYOUT
It's a stylish and vaguely practical layout, and you can use some functions Dreamwidth (circa 2015) can offer. SO:
- Screen Width: 1024px+ This is because it has a--
- "Fixed" Width: Max width of 800px (excluding icon and date). Once your screen starts getting smaller than a certain width (like phones), it'll revert to a smaller version (bannerless).
- Custom: Navigation Bar, Comments, Icons, Hover Pop-up thing. And patterns.
- Custom Header: a 800px wide image. Any height. Animated gifs should work too (whoa).
- 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 because I tried to make sure, but I'd still prefer to use it on a normal computer sized screen.

WHAT CAN YOU USE THIS FOR?
- Journals + Communities (of any kind)
- Anything you need a banner for (and can't be bothered to put fancy text straight into it like me.)
- Browsing on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

HOW TO INSTALL
1. Select Blanket: Peach. (by [personal profile] sforzinda)
2. Customise
2.1 Presentation: Scroll down to Select whether entry management links are printed as text or using the available icons: Choose "text-only"
2.1.5 Repeat for Select whether comment management links are printed as text or using the available icons : Choose "text-only"
--- NOTE: It's not "Select whether user interaction links are printed as text or using the available icons" which I know is the first in the list of these crazy icon vs text things! Leave that one as icons.
2.2 Custom CSS: Make sure "Use layout's stylesheet(s)" is checked.
--- It uses the original Peach 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 bottom module section: Choose as you see fit.
--- NOTE: Don't worry about how big these modules get when it comes to list, I threw on a scrollbar code.
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/1687.html">layout</a> @ <user name="tofuhouse">



OPTIONAL STUFF There's a whole bunch of images here, so I'm gonna go through them by categories.

HEADER BANNER: Underneath your title and subtitle: No need to do much with your header banner, like fancy text, because the journal/community name is there. To insert the code look to the top where I put #header.
0. Make sure your image is 800px wide.
1. Insert the URL where the link already is.
2. Change padding-bottom's value with the image's height value.

And you're pretty much set. I left a default banner there already. The link is here: http://i.imgur.com/mqqiSTJ.jpg
--- Preferably save it and re-upload it somewhere in case it is lost.


PATTERNS: There are three patterns in use here, and unfortunately I can't move them all in the above code because they are used in so many areas. If you wanna replace them:
0. Copy these following links:
--- Black pattern: http://i.imgur.com/SoR6aat.jpg
--- Grey pattern: http://i.imgur.com/1nrciMc.jpg
--- White pattern (one in the bg): http://i.imgur.com/tXJ6eg1.png
1. Get the entire code, add to word processor like Notepad. Something that doesn't autoformat grossly.
2. Go to Find. Or in notepad's case, "Replace": Replace links with your ones. Hit "Replace All" if it's there, even easier.
ALTERNATIVELY: If you're doing it straight from the browser:
1. CTRL+F each of those URLs and replace them as you go.

Once again, should you want to re-upload those images somewhere, feel free to! (Same process applies). Also choose patterns with similar levels of shades if you wanna customise, unless you're going for the full rehaul (go for it!)



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

Post a comment in response:

From:
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.
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

 
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.