Tessisamess

Custom Locked Account Alerts!

Preface

Okay, so, let's talk about this tutorial. It's really short, and I guess it's not a tutorial so much as a... look at this cool trick I worked out the other day. Alright, so it's just a few lines of code; you got me!! But I wanted to explain what it does and why it works. I have to be honest: At this point in things, it's pretty exciting when I end up needing something for IJ layouts that I haven't already made in some form over the years, and I didn't entirely think it was something I'd be able to do on a free account. Anyway, it was really fun to have a new layout feature to create; let's move on!

Okay, so what is it??

Does it bug you how off-balance a journal looks when it's empty, or appears to be empty to people you don't have friended? Same. Every. Time. I always wish I could have something filling the space for those people, but not cluttering things up for myself and the people I have friended. Typically, this happens in cases when my account doesn't need a public contact entry. I finally got so sick of it that I figured out how to placate my weirdly specific needs.

And it's actually so simple that I wish I'd done it sooner.

So what are we making here? Essentially, a very fancy error message or alert that only shows up when no entries are visible on your journal. For example, if you have a PSL that isn't open to new people, or an account that's just for you and your friends to look at, and you have no need for a way for them to get ahold of you, but you still want a message displayed so that they know it's private and not just a ghost town.

You can see a live example at my playlist account, vinyltap, which is just a self indulgent little account I use to display my cover art for my spotify playlists and link to them. Since all of my entries are friends only, and I had no need for a contact entry, this is exactly what I wanted.

How it works!

We're targeting #alpha-inner #column-footer:first-child and what this is doing is saying: In the #alpha-inner container, if #column-footer is the first element inside of it, style it this way. This works because the only time #column-footer will be the first element inside #alpha-inner is when there are no entries on your main journal, because entries render before this element. This won't mess up your tags or calendar page, because they have other content by default.

But it will display a custom message to people who don't have access to your posts, and only those people.

So, let's see how we render that message! First, we need to make sure it only shows up in the context that we want it and nowhere else. We'll do that by setting #column-footer to display:none; by default and then overriding it only in the instance that it's the first element. (Don't worry; disabling this element will not affect your layout in any way.)

#column-footer{clear:both;display:none;}
#alpha-inner #column-footer:first-child{display:block;}
Now let's add the message with an :after element. Since we're attaching it to #column-footer it will only show up if that element is visible—which we just ensured it will only be if it's on Recent and it's the first element inside the entry container.

#column-footer:after{content:"YOUR_MESSAGE";}
Note that, while I usually use single quotes in my coding, I've used double quotes here. This is only so that single quotes are usable inside your message, so words like "you're" won't break the content. Feel free to use apostrophes in your messages!

Full base code:
#column-footer{clear:both;display:none;}
#alpha-inner #column-footer:first-child{display:block;}
#column-footer:after{content:"YOUR_MESSAGE";}
Now all you need to do is style the text and you're set!

The best part? This is basically plug and play. You can drop this line of code into any S2 Complete Style layout that has working entries on the Recent page (so any layout without a page mask!)

Let's make it cute.

You didn't think I was letting you leave without anything ready to use, did you?!


This is the coding I use on my playlist account.You'll just want to replace the font color with something a little darker than your page background to achieve the inset "letter press" look. Additionally, since I wanted very large text, I added max-width:500px; to collapse the message onto multiple lines. This is just an aesthetic choice, and you can remove that if desired.

INSET TEXT:
#column-footer{clear:both;display:none;}
#alpha-inner #column-footer:first-child{display:block;max-width:500px;margin:0 auto;text-align:center;color:#151515;font-size:70px;font-weight:bold;text-shadow:-1px -1px 1px rgba(0,0,0,0.4), 1px 1px 1px rgba(255,255,255,0.1);}
#column-footer:after{content:"YOUR_MESSAGE";}

In this one, we'll use an image as a background and position it above the text we want rendered. Then, we'll set the background image height and add top padding to the container so that the text sits underneath it.

IMAGE & TEXT:
#column-footer{clear:both;display:none;}
#alpha-inner #column-footer:first-child{display:block;margin:0 auto;background:url(YOUR_IMG)center top no-repeat;background-size:auto 60px;padding:80px 0 0 0;text-align:center;color:#fff;font-size:20px;}
#column-footer:after{content:"YOUR_MESSAGE";}

No written message content needed for this one!

IMAGE ONLY:
#column-footer{clear:both;display:none;}
#alpha-inner #column-footer:first-child{display:block;width:100%;margin:0 auto;background:url(YOUR_IMG)center top no-repeat;background-size:auto 100%;height:200px;}

♡ You're Done! ♡