Entry tags:
layout (Brittle) - pull me deep
[ click to see full size. live preview (alt) @
![[personal profile]](https://www.dreamwidth.org/img/silk/identity/user.png){kind=small}
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
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]](https://www.dreamwidth.org/img/silk/identity/community.png){kind=small}
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.
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 (⊙◞౪◟⊙)
no subject
no subject
no subject
no subject
no subject
no subject
Also for what it's worth, this site works pretty well for resizing gifs.
no subject
And thanks for the link, I'll throw that into the post soon as well! (also good for me cos I hate resizing gifs omg, this is incredible.)
no subject
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).
no subject
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!
no subject
Modified a bit per usual. (isleofapples is my ooc journal so instead of making another thread I thought HEY)
Thanks again. <3
no subject
no subject
No seriously though, your layouts are awesome to meddle with, and they help me out a ton.
no subject
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.
no subject
I feel justified because lj forks used to appear and drop like flies :lAlso, I could totally let them use the paper texture. That's sweet. I wish DW pinged you when your username was mentioned :l
no subject
LOL YEAH...a lack of creativity on their part sadly, like dw [and i think ij too?] at least try to differentiateOh man that would be a pretty sweet notification option too.
no subject
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.
no subject
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.
no subject
One small question, I may. Is there a way to make the entry space just a bit wider?
no subject
@media only screen and (min-width: 45em) {
#primary, #tertiary, #footer {
width: 45%;
}
}
no subject
no subject
But it's okay, you don't need to spend more time on it. It's already such a lovely layout. <3
no subject
thanks anyway uwah, it looks nice so far :>
no subject
no subject
no subject
no subject
ETA: nevermind, I figured out the issue-- I was editing the mobile bit, not the non-mobile bit! Sorry for the trouble!
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject
no subject