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!
×

January 2021

S M T W T F S
     12
3456789
10111213141516
17181920212223
24252627282930
31      

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 custom journal alerts!

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

Using on DW?

Comments

Jan. 4th, 2021 10:09 pm (UTC)
Oh now that is cool! (IDK if it's my eyes but I can't read the one on [info]vinyltap jsyk)
Jan. 4th, 2021 10:35 pm (UTC)
Tyyy! Yeah haha, the one I have up is super low contrast so it might be unreadable on some screens due to contrast variations.
Jan. 8th, 2021 07:11 am (UTC)
Okay, but can we talk about how amazing you are? Definitely going to use this trick!
Jan. 18th, 2021 10:02 pm (UTC)
😭 Tyyyy!