Tessisamess

Layouts, Codes, Tutorials, & Resources

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal

Hey there, I'm Tess!

Welcome to my blog; I make lots of different layouts, codes, tutorials, and other resources for Insanejournal and Dreamwidth RPers! There's a lot to choose from and brand new content goes up every week!

Take a look around, and don't hesitate to ask for help if you need it!

Can't get enough resources? Why not subscribe to my Patreon for exclusive monthly content, or support the creation of more content by leaving a tip on Ko-Fi! ♡

Need an invite?

If you're unable to comment on my journal to ask for help now that anon has been turned off due to serious spam issues, don't worry! Just shoot me an email and I'll send you an invite code for Insanejournal. I've got plenty to spare!
×

August 2019

S M T W T F S
    123
45678910
11121314151617
18192021222324
25262728293031

Please Note:

I do not offer assistance with any sites other than IJ and DW unless it is for general HTML and CSS (ie. custom hosted pages and similar.) I cannot convert a code to a new site's rules because there are a lot of niche RP sites, and I have no way of knowing each one's limitations and caveats. Sorry about that!

Layout By

Powered by InsaneJournal
Previous | Next

How to make a Splash Page


How to make
splash pages!



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 [info]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! ♡

Auction!

Comments

Feb. 26th, 2019 03:21 am (UTC)
Aha! Thank you so much for doing this :)
Mar. 5th, 2019 09:59 pm (UTC)
Yasss, np!
Mar. 2nd, 2019 07:35 pm (UTC)
Okay I am missing something or completely effed something up. Basically I'm trying to get to start point of the minimalist splash from the mod bundle and change things around from there. I have a base layout of aerial w/ sidebar on left. I have the CSS of the minimalist splash placed BEFORE the layout CSS in Custom stylesheet and in the forward dated first entry of the journal I have the html with disable autoformatting clicked and <*div class="mask"> placed before the <*lj-raw> tag which I think is probably not in the right place? It looks bonked. I think I'm definitely reading something wrong here.
Mar. 5th, 2019 09:59 pm (UTC)
Hey! If you still have the code available, I'd love to take a look at that for you. For lj-raw tags you always want those outside of any coding you're doing, so for a splash page you'd have something like:

<lj-raw>

Your coding & content

</lj-raw></noembed>


However, if you're checking the box that says to disable auto-formatting on the entry itself, you won't need the lj-raw tags at all, actually! :D
Mar. 5th, 2019 11:25 pm (UTC)
move it to this journal since I ended up needing the other one

I think I'm missing something with the notes or sidebar, but I'm not sure which one as this post has something in the sticky notes and the mod bundle mentions the sidebar?
Mar. 19th, 2019 10:41 pm (UTC)
Oof, I think I missed the email for this comment, I'm sorry! Did you still need help?
Apr. 7th, 2019 08:47 pm (UTC)
Gosh, this was invaluable, ngl.
Apr. 10th, 2019 06:44 pm (UTC)
I'm so glad it helped; looks like you've got one going really nicely on this account! ♥
Apr. 10th, 2019 10:17 pm (UTC)
lol alex is making me post it, so I guess I'll post it as soon as I stop feeling like a fraud.