saga: (Default)
saga ([personal profile] saga) wrote in [community profile] tofuhouse2015-10-15 12:05 am
Entry tags:

layout (Brittle) - pull me deep


[ click to see full size. live preview (alt) @ [personal profile] deathsight ]


Something with more banners! This is very simple. I feel naked not allowing a header and subtitle. /rubs arms nervously.

Pull Me Deep is named after "When We Were Kids" by Eskimo Joe. I pulled a lyric instead of the song title cos I thought it was too long.

ABOUT THE LAYOUT
It's a simple 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: It's actually fluid, but I'm counting it as fixed because Brittle's widths doesn't take up the entire screen. 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 Banner: recommended between 250px to 500px. 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
- Minimalist purposes with modules
- Browsing on the phone/tablet/small screens without squinting at layouts until DW becomes fully responsive.

HOW TO INSTALL
1. Select Brittle: Rust. (by [personal profile] sforzinda)
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)"
2.2 Modules Part 1: Make sure Navigation is assigned 1 and is in Main Module Section. You can optionally do the same with Custom Text and Links, assigning the numbers after. Actually you can do it with all the modules. You don't have to do this now though.
--- NOTE: But it's recommended you leave "Calendar", "Time Loaded" and "Powered By" at the bottom in "Secondary Module Section"
--- NOTE 2: If you uncheck Navigation module, you will lose access to the banner. It's attached.

2.3 Custom CSS: Make sure "Use layout's stylesheet(s)" is checked.
--- It uses the original Rust 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 Part 2: Choose as you see fit if you haven't already. All of the modules will look fine in either Main (the sidebar) or Secondary (below entries), as long as Navigation is in Main and is first.
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/3306.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.

BANNER: Notice there's an image above your navigation links. The live previews show an alternate version to the default banner I slapped in, which shows how you can customise this layout! To do this:

0. Make sure your image is between 250px and 500px wide. You can go bigger, but it might be too much for your screen size. 250px is obviously for smaller screens, 500px is pushing it, because the side bar modules will start to look too wide. 400px is recommended, and I've tested this on both a huge and small screen.
1. Change "width" value where I labeled it.
2. Insert the URL where the link already is.
3. Change padding-top'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://41.media.tumblr.com/2cc858249297a30212398f2a67f5ac12/tumblr_nejpyyEqLW1sdmbk5o1_250.jpg
--- Preferably save it and re-upload it somewhere in case it is lost, but should be fine, it's on tumblr.

PART 2: The lazy way to getting your image/gif at a size you want (especially the animated gif) if you are lifting an image straight from Tumblr.
I mentioned that any kind of image can be used. Just edit in image editing software, upload image anyway and plug in the URL. HOWEVER, if you grabbed any kind of image from Tumblr (i know) you are able to adjust the width without an image processor! To an extent. This includes gifs.

1. Look at your tumblr image url: the last few numbers before the file type is a size. It's usually "500", which is cool.
2. Change that to either "250" or "400" if you want it smaller, and look at the image. Wow it works! Or at least it should, these are typical tumblr thumbnail sizes. (for the record, sometimes if you want something big, it's 1280, and it only works half the time.)
--- If it doesn't work, then just save the image, edit as you would, and upload it wherever you like. Stuff this lazy ass method.
3. Open the image up in any window/tab, Right-Click and "Image Info", now you know the height and width.
4. Plug those numbers in as well as the url to the tumblr image into the banner, as I instructed earlier.

PART 2 VERSION 2: Uploading the gifs somewhere yourself, but you need to resize it.
[personal profile] isleofapples linked this site that will help resize animated gifs. You can then upload it anywhere you like.
--- 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)


PATTERNS: There is only one pattern used in this entire layout, a white pattern (one in the bg): http://i.imgur.com/tXJ6eg1.png
- Scroll down to "body", you'll find it in there.

Once again, should you want to re-upload those images somewhere, feel free to! You don't have to go for something the same shades, but it's preferable you do.



COLOUR: It's all in grey scale cos it's easier to customise with images, but should you wanna change that ONE COLOUR I got running through for links, find+replace-all this hex code: #7da7d9. I chose it on a whim too.


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

[personal profile] geckoholic 2015-10-14 06:21 pm (UTC)(link)
Using this on my icon community ([community profile] bl00dredskies), thank you for sharing!
geckoholic: (TG: Kyle)

[personal profile] geckoholic 2015-10-14 07:19 pm (UTC)(link)
Thank you! :D
chimp: (cardigan)

[personal profile] chimp 2015-10-15 08:17 pm (UTC)(link)
Another lovely layout from you! I love this one's smoothness, it's very neat :)
isleofapples: (disney // ariel (flirty))

[personal profile] isleofapples 2015-11-09 01:14 am (UTC)(link)
Hey! This is a lovely layout, so thanks! I'm using it on [community profile] tintagel, though I've tweaked a few things slightly.

Also for what it's worth, this site works pretty well for resizing gifs.
isleofapples: (moa // morgaine (priestess))

[personal profile] isleofapples 2015-11-09 07:17 am (UTC)(link)
Thanks! I really like tweaking your layouts. They're pretty. also despite knowing how to code css I am so lazy so I just edit the fonts of layouts and stuff to my preferred settings. oops.

NP! I thought it was pretty great, too. And it doesn't rely on tumblr behaving! (and you can do other edits to make it suit a little more which is really nice).
theweaver: (Default)

[personal profile] theweaver 2015-11-15 12:05 am (UTC)(link)
Hey, I also am using this for my games comms and mod journal. :)

Modified a bit per usual. (isleofapples is my ooc journal so instead of making another thread I thought HEY)

Thanks again. <3
theweaver: (Default)

[personal profile] theweaver 2015-11-15 06:54 am (UTC)(link)
Aha! I think that's the best reply I've gotten to it yet. Thank you so much. I couldn't do it without you. <3

No seriously though, your layouts are awesome to meddle with, and they help me out a ton.
theweaver: (Default)

[personal profile] theweaver 2015-11-15 10:28 am (UTC)(link)
I am a perpetual editor. Like, I wish I was joking but I think up pretty things and I just go 'eh.' until I find something I can tinker with to bastardise it into what I want. Ha. I feel like part of the problem is as far as journal layouts go, I memorised all the LJ classes way back when, and when I came here it was basically just tabula rasa and oh boy that thing was a hot mess of WHY DO YOU ORGANISE LIKE THIS and I just kinda went '...maybe in another life time.' I feel justified because lj forks used to appear and drop like flies :l

Also, I could totally let them use the paper texture. That's sweet. I wish DW pinged you when your username was mentioned :l
theweaver: (Default)

[personal profile] theweaver 2015-11-16 06:17 am (UTC)(link)
I honestly remember tinkering with Tabula Rasa way back when and reconsidering how much I disliked LJ so I could have smooth sailing and flexible squares back. Ha. I believe it's been cleaned up a lot since. I'm sure I could probably manage to edit it from scratch... but I admit to laziness on that account.

Maybe if I used DW for more than rping and storing my icons and stuff so my friends can find them when they need them, but it never got as active over here as it once was on LJ sadly.
fatesdesign: (Default)

[personal profile] fatesdesign 2015-12-07 10:08 am (UTC)(link)
This is really simple and lovely, thank you!

One small question, I may. Is there a way to make the entry space just a bit wider?
fatesdesign: (Default)

[personal profile] fatesdesign 2015-12-08 05:00 am (UTC)(link)
Thanks for the super quick response! I will give it a shot. ♥
fatesdesign: (Default)

[personal profile] fatesdesign 2015-12-09 02:31 am (UTC)(link)
It doesn't seem to be working. D:

But it's okay, you don't need to spend more time on it. It's already such a lovely layout. <3
sovereignscrolls: (Default)

[personal profile] sovereignscrolls 2016-04-27 09:46 pm (UTC)(link)
Hello there! I was wondering if I could enlist your help modifying your layout, just to make the entry column a little wider? Thanks! :)
sovereignscrolls: (Default)

[personal profile] sovereignscrolls 2016-04-28 01:24 pm (UTC)(link)
Got it to work! :) Thank you!
weaponxx: (Default)

[personal profile] weaponxx 2016-11-23 07:16 am (UTC)(link)
Hey! I love this layout but was wondering if it's possible to make the top margin smaller? I tried poking at it myself to no avail-- I'd like for it to be 1% instead of the 5% the css is telling me is there when I inspect element!


ETA: nevermind, I figured out the issue-- I was editing the mobile bit, not the non-mobile bit! Sorry for the trouble!
Edited 2016-11-23 07:18 (UTC)
vdova: (Default)

[personal profile] vdova 2016-11-23 06:12 pm (UTC)(link)
thank you! it's a great layout.
rustykittens: (Default)

[personal profile] rustykittens 2017-04-13 11:50 pm (UTC)(link)
Using this layout, will credit <3