Oct. 15th, 2015 12:05 am

layout (Brittle) - pull me deep

saga: (Default)
[personal profile] saga posting in [community profile] tofuhouse

[ 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 (⊙◞౪◟⊙)
Tags:
Flat | Top-Level Comments Only
Date: 2015-11-09 08:43 am (UTC)

saga: (denmark || edvard munch's masterpiece)
From: [personal profile] saga
Ahhh thank you!! I really like seeing how they get tweaked too, I tend to think like "God they look more amazing". Shhhh this is how I make my layouts tbh, also because the original stylesheet means I can leave them sort of mobile friendly. It ends up being so much easier weh.

Oh man this too! With how tumblr's been acting, also being able to upload and delete as you like after you make your edits, ahh...you're a lifesaver!
Date: 2015-11-15 12:05 am (UTC)

theweaver: (Default)
From: [personal profile] theweaver
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
Date: 2015-11-15 06:32 am (UTC)

saga: (badtouch || SEXY POUTS YEAH)
From: [personal profile] saga
WHOA ALL GOOD, IT'S SUPER GORGEOUS OMG. your edits are the best?!
Date: 2015-11-15 06:54 am (UTC)

theweaver: (Default)
From: [personal profile] theweaver
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.
Date: 2015-11-15 10:18 am (UTC)

saga: (england || PISSING THE NIGHT AWAAAAY)
From: [personal profile] saga
AHAHA it's well deserved because you really do beautiful things, whoa! The last one inspired a user too :>

But really it's no prob! I try to make it as customisable as possible as possible (or at least the css is in order weh) cos I know that same feel of wanting a base to turn your dream layout into a reality!!! And technically i'm kinda doing the same with the default layouts already in dw haha.
Date: 2015-11-15 10:28 am (UTC)

theweaver: (Default)
From: [personal profile] theweaver
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
Date: 2015-11-15 01:29 pm (UTC)

saga: (dategumi || FOR GONDOOOOR)
From: [personal profile] saga
LOL YEAH tbh i found that it was easier for me to get used to dw classes cos i translated one old lj layout into the dw layouts (and found out that dw classes were common throughout all of the styles now whoa) BUT YEAH I haven't messed around with tabula rasa cos the layout of the html doesn't suit what I want to mess with? So I just end up using these other styles (since all classes are practically the same) and alter them slowly...though to be fair, tinkering with them with the CSS check box still on actually makes it mobile friendly so it's not terrible. LOL YEAH...a lack of creativity on their part sadly, like dw [and i think ij too?] at least try to differentiate

Oh man that would be a pretty sweet notification option too.
Date: 2015-11-16 06:17 am (UTC)

theweaver: (Default)
From: [personal profile] theweaver
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.
Date: 2015-11-16 06:26 am (UTC)

saga: (ookurikara || template)
From: [personal profile] saga
LOL yeah cos of the new ones, the closest equivalents to Flexible Squares (and Mixit) is "Five AM", and for Smooth Sailing it's "Tectonic" (although Tectonic can be for the first two too) but all of them share the same id's and classes. tbh, after my first layout I've had the same base code I've been tinkering on for all the new layouts despite the different styles, so it doesn't take that long anymore.

lol yeah it's actually that exact same reason why I started with layouts, cos i found LJ's layouts starting to get frustrating to use over in DW cos of how DW is moving away from LJ, and found it easier after like the first translation (it's also how I found out about the equivalent layout settings). now i can be like STRETCHES, READING PAGE ACTUALLY WORKING WITH ME HERE.
Flat | Top-Level Comments Only

Profile

tofuhouse: (Default)
Tofu House

May 2023

S M T W T F S
 12 3456
78910111213
14151617181920
21222324252627
28293031   

Links

Most Popular Tags

Page Summary

Some Lyrics in Custom Text

Just last night I felt a fright
Like a thousand arms were holding on too tight
I tried to reach for you
My hands were closed but you fell right through

DROWNING IN THE FEAR
[ ESKIMO JOE ]

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 30th, 2025 05:22 am
Powered by Dreamwidth Studios