What The Heck?

So maybe you've heard that splash pages are all the rage with the cool kids over on IJ right now. So what's a splash page? A splash page is essentially taking a pretty picture made of code and pasting it over the recent entries view of your journal.

tessisamess has written a great tutorial over on IJ that's worth a read. For Dreamwidth, the methodology I'll be adapting is the one that Tess describes under S2 Complete: Version #2, however there are a number of changes worth noting because Dreamwidth's internal coding does differ from Insanejournal's.

Also worth noting is that I'm not a code expert, just a very stubborn gremlin. In fact, you could skip all of this and follow this guide instead, which I didn't find until I had finished writing all of this up!

General Guidance

01. These steps can be used for any layout on Dreamwidth as all themes have access to adding a custom stylesheet.

02. Splash pages are not recommended for use on any journal where the ability to scroll through that journal's recent entries is desired. Such as.. this one! Again, the code is pasting over the recent entries view, so while all those entries still exist, they're hidden beneath your fancy new code picture. Splash pages are ideal for character journals and mod journals that utilize a central navigation post.

03. Because of the issue mentioned above, an ideal splash page includes navigation links to critical items such as your character profile and your dropbox. (In fact, splash pages are referred to as navigation portals on Dreamwidth.) Check out

cecaelian or

magitechnically for an example. (Your keen eyes may notice a brief flash of the layout hiding beneath the splash page as it loads.) An ideal splash page is also designed to be less than a single screen height so as to not invoke page scrolling that may cause the hidden items beneath to become visible.

04. Because splash pages are meant to be viewed on the main journal page, all the elements can be modified via your layout's custom stylesheet. This means custom fonts and pseudo elements such as hover effects are available to you. Hooray!

And Here's The Walkthrough

01. Install the following code into your layout's custom stylesheet. Place this at the end of any existing css.

Essentially, this code hides a bunch of unnecessary elements on the recent view page, pastes your blank canvas on top, and then pastes the navstrip back on top of that. It will not make you see the navstrip if you don't normally, but it's a polite step for those of us who do. The code as written sets a basic gray background, but you can certainly change that, change the background image to tile, etc. A background color is a minimum requirement to effectively paste a blank canvas on top of your recent view page.

/* SPLASH ESSENTIALS */

.page-recent #header, .page-recent #beta,  .page-recent #secondary, .page-recent .page-back, 
.page-recent .footer, .page-recent #footer, .page-recent #sticky-note ~ .entry{display:none;}

.mask{
  position:fixed;
  top:0; left:0; right:0; bottom:0; 
  z-index:3;
  display:flex; 
  align-items:center; 
  justify-content:center; 
  text-align:center;
  margin:0;
  background-color:#eee; 
  background-image: url(IMG1);
  background-size:cover;
  }

#lj_controlstrip{z-index:4;}

02. On the Presentation tab, adjust the Number of journal entries to show on recent entries page down to 1. The noembed code mentioned in Tess's tutorial does not appear to work on Dreamwidth so this step is essential.

03. Now you're ready to install your splash code! As Tess mentions, this utilizes a forward dated post. On Dreamwidth we don't have to bother finding an old post, because we always have the option to not display an entry on people's reading pages. This post must be the most future dated post in your journal.

Just replicate the following images and then post!
Edit Date

Forward Date and Check Don't Show On Reading Page

Sandwich Your Splash Page Code Inside Of A Div Whose Class = Mask

But Wait, What's My Splash Page Code?

It's anything you want. Seriously. The easiest things to install are codes already written to be used in-entry, but html written to be viewed as a webpage is an option too. (Tumblr's RP community has a lot of pretty html pages to peruse through.) Just recall that anything styled to the body element will need to become part of your .mask css instead.

I've tested a variety of codes found in

dreamcodes with success. Some that I particularly like are here (base + regular url), here, here, here (remove everything after nav), here, here, . Some cute minimalist options are here, here (left side only), and here while this journal has a bunch of complex multi-pages-in-one codes. As for Tess, most of the codes found on this tag would work well. And here's a boatload of Persona inspired codes.

Also the Intimus layout (S2) by Tess comes with a pre-coded splash page. A number of tweaks are needed for DW optimization which I've detailed here.

But if you're just looking for something simple to prove to yourself this even works, here's a very minimalist splash page that plays nicely with all layouts and should be easy to customize. A live preview is available here paired with the Personable layout by

baisemain.

Additional CSS

Splash Page HTML

Troubleshooting

01. How do I edit my entries?!? Edit Entries is your new best friend when you've got a splash page installed. Obviously, you can edit entries this way, but you can also locate page urls for important things like your profile and dropbox. Simply click 'Edit This Entry' for the entry you want the url for, save, and from the Success page you can snag the url via 'View this entry'. Alternatively, now's finally the time to use that /Archive page you never do.

02. It squished things??? Anything that uses max-height or max-width is best converted to height and width for splash page purposes. min-width may also be useful.

03. It squished things, but only on mobile. :( Any layout built off one of DW's base themes (this includes Personable by

baisemain) has viewport scaling enabled (99% of the time, that's a good thing!) so while you won't see any differences on a large screen, viewing on small device screens may result in unexpected scaling changes depending on how the splash page code has been written. (My grid-based codes don't appear to be viewport friendly, as of this writing.) The appropriate solution to this issue is to include mobile view adjustments into the css - which I have done in the sample code I provided above. Installing an S2 layout (such as Complete Style or others) will bypass that particular issue - though S2 layouts come with their own coding quirks.

If you don't use your journal's reading page, but want to install a splash page without fighting viewport, then I recommend installing Complete Style. If you do want to use your reading page as well as Complete Style, then I've slightly tweaked the layer code here to correct a date/time issue.

04. Why are these <br> breaks so huge??? It's a Dreamwidth thing. Change all of those into <br/> and it'll space the way you expected.

05. Where can I get fancy custom fonts??? Google Fonts is absolutely an option. Other resources for custom fonts are here, here, and here.

06. Oh my gosh, I broke everything. Uhhhhh. I can pretend I know what I'm talking about, so feel free to ask questions!

Guide: Splash Pages on Dreamwidth