saga: (Default)
h e l p ([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.

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.

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

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="">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:
--- 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:
--- Grey pattern:
--- White pattern (one in the bg):
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 (⊙◞౪◟⊙)
theweaver: (Default)

[personal profile] theweaver 2015-09-14 08:35 am (UTC)(link)
Hey, I just wanted to say that I'm using this layout on my game right now. (This is the mod account.) Thank you, very much.
theweaver: (Default)

[personal profile] theweaver 2015-09-14 08:56 am (UTC)(link)
Thanks! I gave it random header images because I have trouble making choices. It's a really nice little layout. I love it and it's really easy to edit. :)
aetherna: (Default)

[personal profile] aetherna 2015-11-03 04:46 pm (UTC)(link)
Thanks a lot for the layout! I used it on my page as well in the mood of reviving it. Made some (lame) improvements as well. I wish I could do as awesome as [personal profile] theweaver did. How can I give space between header image and entries? I'm also interested in changing the post texture like the torn paper. Thank you in advance! :)
aetherna: (Default)

[personal profile] aetherna 2015-11-04 07:24 am (UTC)(link)
Yes, they definitely help! Thanks a lot for showing me how to do it. Time to do even more customizations! :D
teaandstars: (Default)

[personal profile] teaandstars 2015-12-01 07:16 pm (UTC)(link)
This is so beautiful. Using it now :)
optimusprime1001: (Default)


[personal profile] optimusprime1001 2018-08-09 05:42 pm (UTC)(link)
Hi, how do I get a sidebar to show up on the side I would like to have a sidebar on the side, not at the bottom.