Minimalistic Navigation Journal Layout

[mistojen]

Minimalistic Navigation Journal Layout

This is a very minimalistic journal layout and you'll need to have at least some HTML/CSS editing prowess to work with it. It also allows and encourages importing Google Fonts for varied aesthetics. You'll be able to use your reading page, although you may or may not actually like how it looks, and your entries will be in default view, rather than matching your journal's style. This layout isn't for everyone, but I figured that I might as well share.

Please note that I have not tested this in Firefox-based or Opera-based browsers and it doesn't look good on mobile, because it's not terribly responsive.

Live Preview on mistojen1

To Install:

1. Create a new journal entry. Set the date to December 31, 2037. Paste this in:
   • <center><div style="margin: 200px auto 50px auto; font-family: 'CHARACTERFONT', cursive; font-size: 110px; text-align: center; color: #fff; text-shadow: -3px 3px 5px rgba(0, 0, 0, 1);">CHARACTERNAME</div> <div style="margin: -120px auto; font-family: 'LINKFONT', cursive; font-size: 55px; text-align: center; letter-spacing: 5px; font-weight: bold;"><a href="URL" style="text-shadow: -2px 2px 5px rgba(0, 0, 0, 1);text-decoration: none; text-transform: uppercase; padding: 0 10px;">LINKTEXT</a><a href="URL" style="text-shadow: -2px 2px 5px rgba(0, 0, 0, 1); text-decoration: none; text-transform: uppercase; padding: 0 10px;">LINKTEXT</a><a href="URL" style="text-shadow: -2px 2px 5px rgba(0, 0, 0, 1); text-decoration: none; text-transform: uppercase; padding: 0 10px;">LINKTEXT</a><a href="URL" style="text-shadow: -2px 2px 5px rgba(0, 0, 0, 1); text-decoration: none; text-transform: uppercase; padding: 0 10px;">LINKTEXT</a></div></center>
   • Replace CHARACTERFONT, CHARACTERNAME, LINKFONT, and all instances of URL and LINKTEXT. In this example, there are four links, but you can add more or remove some as needed. You're going to probably need to do this in two steps, since you'll be collecting your fonts later on, so it might be easiest to keep this entry open for editing.
NOTE: You may need to play with the font sizes depending on your font of choice. You may also want to fiddle with the margins to make sure that the spacing and placement of your title and navigational links are where you want them on the page.
2. Go to Google Fonts and choose the fonts you'd like to import for your title and link text.
   • You can test the fonts by clicking where their sample font is and inputting your own. To select them, click the plus sign.
   • Once you've selected your two, click on the little minus sign at the bottom. See here.
   • Now that your selection is expanded, keep this window open, because you're going to need it in a moment.
3. Go to Manage Account Settings: Display and uncheck the box marked Entry Page Default: Your Journal. Also, remove any sticky entries you have, because they'll ruin your layout.
4. Go to Customize Options and change your theme to Tabula Rasa Plain. Make sure you're set to 1 column, modules on the bottom; no sidebar.
5. In the Presentation tab, under basic options change your number of Number of journal entries to show on the Recent Entries page to 1. You can decide whatever number you want for your reading page.
6. In the Modules tab, uncheck all modules. None should be turned on for this layout.
7. In the Custom CSS tab, uncheck the box next to Use layout's stylesheet(s).
8. In the Custom stylesheet(s): line, you're going to import your fonts. So go back to your Google fonts tab and copy the href of your fonts. See here. Then, paste that into the custom stylesheet(s) line. Notice how, at the bottom of that image, you'll see where it says Specify in CSS; this is the part you'll need to fill in the CHARACTERFONT and LINKFONT in the entry you've made from the instructions above.
9. Paste the following into the Use embedded CSS box:
   • body{ background: url('BACKGROUNDIMAGEURL'); background-repeat: no-repeat; background-attachment: fixed; background-position: center; background-size: 100%; } #primary{ width: 85%; margin: 0 auto; } a, a:active, a:visited{ transition: color 1s ease; color: #fff; } a:hover{ color: #bc2424; } .page-recent #header, #secondary, #footer, .module-navlinks, .entry .header, .userpic img, .poster.entry-poster, .entry .footer, li.page-back, li.page-forward{ display: none; } /*---NAVIGATION MODULE----*/ ul.module-list{ background-color: #000; position: fixed; width: 100%; bottom: 0px; text-align: center; margin: 0; padding: 0; } ul.module-list li{ display: inline-block; padding: 20px; margin: 0 auto; font-size: 20px; } ul.module-list li a{ color: #fff; text-transform: uppercase; text-decoration: none; font-weight: bold; } /*--- Control Strip ---*/ table#lj_controlstrip { background: #bc2424; border-bottom: 1px solid #000; color: #000; opacity: 0; transition: opacity 1s ease; } #lj_controlstrip:hover { opacity: 1; } #lj_controlstrip input { background: #ffffff; border: 1px solid #333333; color: #333333; } #lj_controlstrip a { color: #000; } #lj_controlstrip_statustext { color: #000; } #lj_controlstrip .ljuser a b { color: #000; } .has-userpic div.entry div.userpic, .has-userpic div.comment div.userpic { float: right; margin-top: -60px; width: 100px; height: 100px; } .has-userpic div.entry .header { margin-right: 135px; } .has-userpic div.comment .header { margin-right: 135px; } /*----READING PAGE------*/ .page-read #primary { background-color: rgba(255,255,255,.7); padding: 10px; font-size: 13px; line-height: 1.2em; } body.page-read li.page-back, li.page-forward, .entry-title, div.userpic, span.poster.entry-poster, .datetime, .page-top{ display: block; } .page-read ul.icon-links li, ul.entry-interaction-links li{ display: inline-block; padding: 10px; } .page-read a, a:active,{ color: #000 font-weight: bold; } .page-read a:visited{ color: #000; } .page-read a:hover{ color: #bc2424; font-weight: bold; }
10. Replace BACKGROUNDIMAGEURL with the url to your background image. You'll want this image to be at least 1286x724 in size, but it can be larger so long as you stick to the 16:9 aspect ratio. Be aware that Dreamwidth does some funky stuff with placement in spite of my code, so your image should be centered vertically (ie, the important stuff you want seen should be in the middle of the image vertically with some space you don't mind losing on the top and the bottom). You can make your own image or use wallpapers you find online for this; if you use the wallpaper option, you're going to want to choose something made for a 1366x768 resolution to get the correct aspect ratio.
11. To change the accent color (see the hover effect on the links and the background color of the controlstrip in the live preview), you'll want to CTRL+F or Command+F #bc2424 and replace that with whatever color you want in there. I recommend ColorPicker or pulling a color from your background image with the Photoshop or Paint program dropper tool.
12. Credit mistojen in your profile page or add a link in your navigation with a link back to my journal (for a less intrusive look, I'd recommend wrapping a link around a copyright symbol which can be created by typing & copy ; without the spaces on either side of the word).
13. Please drop a comment here with a link to the journal you're using this on, because I love seeing what other people can do with this layout!
14. While I'm not sharing this code on dreamwidthlayouts, you are welcome to share it with your friends by linking them here.
15. If you have any questions, as always, drop me a comment and I'll do my best to help you fix it as soon as possible.
16. Enjoy!

Comments

[bettedaviseyes]

I might have did a thing, Jen!

[mistojen]

Awww Cori! ♥

[bettedaviseyes]

I'ma toss her around on bakerstreet and stuff cause I miss playing her afreakinglot!

[mistojen]

You should, she's so fun!

[leighis]

Used it for leghis. It works beautifully on Firefox 50.1.0

I used Cinzel Decorative and Alegreya for the fonts.

[mistojen]

Oh awesome, that looks great! Thanks for dropping me a line! :D

[willingtopaytheprice]

You're welcome! I also did it on willingtopaytheprice with Rock Salt and Old Standard TT for the fonts. I needed to adjust the margins/font sizes so there wasn't a huge space on top and used breaking space tags to make the star be in the center.

[mistojen]

Ooohh, I really like that Rock Salt font! This is awesome, thank you so much for sharing! I'm glad you like it :)

[givefarmore]

Absolutely amazing layout and so easy to use. Thank you for sharing it <3

I've used it for my Viking here and also for my personal journal. I also plan to use it for my BBC!Sherlock, which I'll show off the link for tomorrow lol.

[mistojen]

You're super welcome and thanks for sharing your uses, they look amazing! I'm looking forward to seeing the next one, as well!

[everybody_shutup]

Thank you! Here's the finished product for Sherlock's journal!

I don't think I'll be changing anything on any of the 3 for a long time xD

[mistojen]

Nice! I'm really glad you like the code and seriously thanks for sharing ♥

[provable]

When I first saw this gorgeous minimalistic layout I mentally waved my hands to tptb and snagged it immediately. I, however, didn't remember to come back and slap down where I was using it! Oops.

Using it for Ethan, Papyrus, & Erend, and will most likely use it for a layout update for Danny.

I love this layout so much.

[mistojen]

Ohh, those look great! Thanks so much for coming back to show me, I love seeing what you guys do with it! ♥

[santello]

Oh! I forgot one: Bea

This layout is simply amazing and I...will probably abuse it every chance I get xD

[mistojen]

Oh that's really pretty, too! I'm glad you like it and please, by all means, do! Just make sure you link back so I can be nosy about it and see what you came up with for it when you do! ;)

[bookishlioness]

Hi!

Used it here for Hermione. I am very pleased with the look.

[mistojen]

Nice!

[buttleslikearockstar]

hey!

I used it here, but how do I get it to space out between his name and the stuff?

[mistojen]

Hey!

You'll have to adjust the margin for the links section to your liking. Right now, it's set to -120px auto. Just make that 120 A smaller number and you'll create more space between the links and the name. :)

[buttleslikearockstar]

there

[mistojen]

Looks good! If you need even a little more space, I tested it at -75px and it looks like this, just for another option. :)

In other news, Ianto is my faaaaaave from the Whoniverse!

[cykedelic]

Using it here! I actually combined it with another nav code though as I struggled to work out using font stylesheets. It still works p well like this, I think.

[mistojen]

That looks awesome! Thanks for sharing!

[cykedelic]

Np! Thanks for posting the code to begin with ♥

[mistojen]

You are so welcome :)

[eights_and_aces]

I want to say thank you, I do like this layout a lot. It is still a work in progress with some tweaking but it is eights_and_aces

Thanks again!

[mistojen]

Glad you like it! You're so welcome!