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!

Post a comment in response:

From:
Anonymous
OpenID
Identity URL: 
User
Account name:
Password:
If you don't have an account you can create one now.
Subject:
HTML doesn't work in the subject.

Message:

 
Links will be displayed as unclickable URLs to help prevent spam.