Tessisamess

What's the deal with splash pages?

A splash page is essentially a page mask for your journal. You can do them on any page view, but most commonly they're used to more or less wipe out the recent/home page of your journal and replace it with... pretty much whatever you want, whether that be a background image and a title with links, or something more involved. As long as it's within the site and the style system's base limitations, you're pretty free to make whatever you want! Which is great for instances when you want your game information to look more like a website, or you don't need your journal to look like a classic journal.



Now that we've established what we're going to learn how to make, let's get started! Please make sure you give the S1 Generator instructions a read-through before moving on to S2 Complete Style, as I explain things needed for both options in this section. (And no, you don't need a paid account to make these. Rad.)

S1 Generator

Generator makes it extremely easy to make splash pages. I briefly went over this a few years ago in my Generator documentation, and that's the same coding I'll be referring to when discussing how to make an S1 Generator splash; you can reference it here!

To make a page mask you're following the same basic rules as making a custom sidebar or topbar, which also means you're not limited to making a mask only on Recent. You could do a single mask on one page view, Recent or otherwise, and a standard sidebar view setup on all the rest—or you could make a different mask for each page view even, if that's what you need.

A custom element for S1 Generator (sidebars, topbars, masks, etc.) need three things to work: An ID, visibility, and positioning.

#mask{visibility:visible;position:absolute;}

• The #mask ID can be any title you want it to be. This is just the label to link your CSS for the custom element to the HTML for the custom element.
  
• Your visibility:visible; declaration is vital. If you don't have this, your custom element isn't going to show up because of a conflict with other elements in the Generator layout that house your custom coding, so reversing it for your custom element is not optional.
  
• The positioning, in this case position:absolute;, can be either absolute or fixed.

Now that you have the bare minimum, you need to tell the custom element where to sit on the page. This is where a mask vs a sidebar vs a topbar differs. Your positioning will be different depending on where you want each type of custom element, and some custom elements will need widths and heights depending on the type of element they're meant to be. A page mask does not need a width or height, in most cases.

#mask{visibility:visible;position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;}

What we're doing here is telling the mask to take up the whole page. The z-index isn't always needed, but I recommend including it to avoid layering issues later since there's no adverse effect to having it in if you don't need it. You will also want a background color or image for this custom element, or everything behind the mask will show right through.

Please Note: If the type of mask you're making is intended to be scrollable, I wouldn't put bottom:0; in the positioning, and would instead use min-height:100vh; to make sure it's always at least the height of the page instead.

Alright, so we've got our base CSS nailed down! What's next? The HTML!

<article id="mask">
CONTENT_HERE
</article><noembed>

• The article could also be a div, but I like using HTML5 elements instead where I can, because it means you don't have to set a bunch of span tags to display:block; in the CSS. (Please see my Generator tutorial for information on what I'm talking about in that regard.)
  
• Your content is literally whatever you want. Any text, any coding, etc. Design whatever you want as long as it's inside your mask.
  
• Your noembed is vital. It keeps the real content of the page hidden and prevents things like overspill and double scrollbars.

Now let's talk about where the HTML is supposed to go. Again, I'm working under the assumption that you're using my cleaned documentation, because I can't account for unknown variables and there is no other base stylesheet for S1 Generator available on the site, so please reference that page if needed.

You have four pageviews where you can add a custom sidebar. A common issue you see with a lot of S1 Generator layouts is that there's a sidebar on the recent entries page and the rest of the pageviews don't have them and don't work correctly. This is because three of those four pageviews have been neglected.

You can add your mask to either LASTN_WEBSITE<=, FRIENDS_WEBSITE<=, DAY_WEBSITE<=, or CALENDAR_WEBSITE<= (where a sidebar is specified to go), depending on which page you want it to show up on. You can do whatever you want for the other pageviews!



You're all set from there to make whatever you like!

S2 Complete Style

There are some reasons you may not want to use Generator for your splash page, like the desire to have a good looking tags view, archive, or a sidebar that enables tags. If you need one of these things, or you just prefer Complete Style, not to worry! There are actually two ways to make a splash in this layout type. Let's look at them!

Important Note: You CANNOT use a custom ID in S2 custom elements. Classes are the only option here, so #mask would be .mask instead. You can, however, use div tags freely, unlike in Generator. The inability to use custom IDs for your custom elements prevents some tricks and methods, like anchor-based elements and anchor-based popups, so if you need to be able to use these I'd opt for Generator instead.

S2 Complete: Version #1

The first option is for if you do not need your journal to be navigated by tags (ie. you have some entries tagged as 'custom' and want people to be able to click that and view all entries with that tag.) For this option, we'll put our custom coding into the sticky note custom text box.



So how do we make this work? The first part is fairly similar to the S1 Generator CSS:

.mask{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;}

And make sure you've got a background color or image specified! But from here we have a few extra things we need to do to make sure the mask works as intended and doesn't have weird overflow, and doesn't show up on pageviews we don't want it to display on. First we make sure the custom element is not visible on any pageview except for Recent!

.mask{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;display:none;}
.lj-view-recent .mask{display:block;}

Next we need to disable some other elements only on Recent so that we don't have any unintentional overspill:

.lj-view-recent #header, .lj-view-recent #beta, .lj-view-recent #sticky-note ~ .entry{display:none;}

In this section, we're telling the Recent page to hide the header, the sidebar, and all entries after the sticky note. From here you should be all set to code whatever you like within the style system's limitations inside of your mask class!

Please Note: When using the sticky note option lj-raw is not an option, so manual line breaks will register. I recommend coding in a code tester and then putting your HTML into the sticky note text box afterwards, removing the manual line breaks only when you're finished.

S2 Complete: Version #2

But say you want to be able to use your tag navigation. I outline most of how to do this here on modbundle, but those instructions work under the assumption that you're using a premade splash page, so it's missing half of the info needed. Use those instructions in conjunction with the following code in your layout CSS:

.mask{position:absolute;top:0;left:0;right:0;bottom:0;z-index:3;}

From here you'll want to make your mask entry following the linked instructions!



The noembed prevents overspill, and you can disable auto-formatting so that all of your custom coding is separated and easily readable. Remember: The noembed will erase anything that comes after it, so don't tag this entry with anything other entries also have. From here you should be all set to code whatever you like within the style system's limitations inside of your mask class!

Notes

There are a lot of things you can do with splash pages, and I mean a LOT. It's usually just a matter of putting whatever you want inside of the bare minimum coding you need to make a splash page work and going hog wild from there.

Still not sure if you can make what you want to make? Ask below! But, as long as it's not specifically stated above as a limitation, you probably can so I suggest giving it a try first!

♡ You're Done! ♡