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.

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.

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

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

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.