mistojen: (Default)
mistojen ([personal profile] mistojen) wrote2016-10-30 11:00 am

Minimalistic Navigation Journal Layout

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 [personal profile] mistojen1

To Install:

  1. Create a new journal entry. Set the date to December 31, 2037. Paste this in:
    • 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.
  2. 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.
  3. 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.
  4. 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.
  5. 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.
  6. 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.
  7. In the Modules tab, uncheck all modules. None should be turned on for this layout.
  8. In the Custom CSS tab, uncheck the box next to Use layout's stylesheet(s).
  9. 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.
  10. Paste the following into the Use embedded CSS box:
  11. 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.
  12. 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.
  13. Credit [personal profile] 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).
  14. 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!
  15. While I'm not sharing this code on [community profile] dreamwidthlayouts, you are welcome to share it with your friends by linking them here.
  16. 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.
  17. Enjoy!
bettedaviseyes: (Default)

[personal profile] bettedaviseyes 2016-12-02 03:48 am (UTC)(link)
I'ma toss her around on bakerstreet and stuff cause I miss playing her afreakinglot!
leighis: (Default)

[personal profile] leighis 2017-01-12 10:08 pm (UTC)(link)
Used it for [profile] leghis. It works beautifully on Firefox 50.1.0

I used Cinzel Decorative and Alegreya for the fonts.
willingtopaytheprice: (Default)

[personal profile] willingtopaytheprice 2017-01-13 03:38 am (UTC)(link)
You're welcome! I also did it on [personal profile] 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.
givefar_more: (• I am very amused)

[personal profile] givefar_more 2017-01-15 05:06 am (UTC)(link)
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.

everybody_shutup: (→ mind palace?)

[personal profile] everybody_shutup 2017-01-15 08:25 pm (UTC)(link)
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
provable: © mine dnt (Default)

[personal profile] provable 2017-04-05 03:42 pm (UTC)(link)
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.
Edited 2017-04-05 15:54 (UTC)
santello: © mine (Default)

[personal profile] santello 2017-04-05 04:05 pm (UTC)(link)
Oh! I forgot one: Bea

This layout is simply amazing and I...will probably abuse it every chance I get xD
cleverist_witch: (Default)

[personal profile] cleverist_witch 2017-07-28 08:33 pm (UTC)(link)

Used it here for Hermione. I am very pleased with the look.
Edited 2017-07-28 20:33 (UTC)
buttleslikearockstar: (Default)

[personal profile] buttleslikearockstar 2017-07-30 03:38 am (UTC)(link)

I used it here, but how do I get it to space out between his name and the stuff?
cykedelic: (they didn't teach me things i didn't kno)

[personal profile] cykedelic 2017-09-04 11:13 pm (UTC)(link)
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.
cykedelic: (a sudden motion made me skip)

[personal profile] cykedelic 2017-09-05 09:28 am (UTC)(link)
Np! Thanks for posting the code to begin with ♥