Tessisamess

✂

How to style an lj-cut without hiding it!

Let's learn how to do fancy LJ-Cut text!

Before we start, to clarify, this is not a tutorial on fake cuts. That can be found right here! This, on the other hand, is a tutorial on how to style your real cut tags. 👀 This will work on any layout type, and can look pretty much however you want! This is more for just text, but you can always add images above it. Long story short, this preserves page jumps and gets rid of the text once you're in the entry, since it's a real cut and not custom coding with a link. If this sounds like something you've been needing, read on!

UPDATED Just a tiny update to change the way we target the cut link (and not the cut name) to make it a little more solid haha.

Way can't we style lj-cut itself?

The way the lj-cut tag renders on a page is mostly what this is down to. Though it is a custom HTML tag that doesn't exist outside of this site framework, you technically would still be able to style that as a general rule by using lj-cut{} in the CSS.

The reason you can't here is because the tag doesn't preserve itself once it's on the page. If you have a standard lj-cut on your entry and you use the inspection panel to view it in the HTML, you won't see mention of the tag or a class related to it. Given the age of the framework, that's not too surprising. If something like this were created and implemented now, it would probably add a class="lj-cut" to the rendered content.

What will you see if you inspect a rendered cut? Something like this!

<b>(&nbsp;<a href="http://username.insanejournal.com/1234.html#cutid1">CUT TEXT</a>&nbsp;)</b>

You'll get a bold tag, text parentheses, and a basic link with the cut ID and your cut text. (  is a hardcoded space, btw!) Not ideal for styling, but we can get around that!

The HTML

All you need for this to work in your entry is a standard lj-cut wrapped in a span tag holding the class we're going to style, that way it has a spec to attach itself to. Just like a regular cut—since this is one!—you can still use this inline with regular text if you want it all on the same line.

<span class="cut"><lj-cut text="Cut Text"></span>

That's it! That's all you need in your entry's cut.

The CSS

Now let's style this thing. The span class is to make sure you have control over two things: The non-linked parentheses around the cut link, and the link itself.

.cut{font-size:0;font-weight:normal;} /* resetting the font size */
.cut a[href]{font-size:10px;} /* styling for lj-cut */
.cut a[href]:hover{} /* styling for lj-cut hover */

Let's recap!

.cut This is all you need in this section; it's just to make sure the parentheses don't display and don't take up any unaccounted for room. I've also added font-weight:normal; to offset the default bold style of cut text, but if you want your cut text to be bold you can just delete that.

.cut a[href] This is where ALL link styling should go. You MUST contradict the font reset in the previous spec or your text won't display, but any font size is fine. This is the only requirement for this part.

We're using .cut a[href] instead of .cut a because, after you jump the cut, there's an a name that could get confused with the link itself and take on the same styling, but wonky. This really doesn't apply to most people, but for the few journals that use custom entry pages that match their journal it's an important distinction, so we might as well cover the base right out the gate.

.cut a[href]:hover Your link's hover effects; if you don't need to distinguish this and want it to take on the entry's default cover styling, you can leave this one out.

Basic Usage

Let's look at some examples! Feel free to use these however you like.

.cut{font-size:0;}
.cut a[href]{font-size:8px;letter-spacing:3px;text-transform:uppercase;}
.cut a[href]:hover{letter-spacing:5px;}

Example #1

.cut{font-size:0;font-weight:normal;}
.cut a[href]{display:block;margin:0 auto;text-align:center;font-family:georgia;font-size:11px;font-style:italic;text-transform:lowercase;letter-spacing:5px;}
.cut a[href]:hover{}

Example #2

.cut{font-size:0;display:block;text-align:center;}
.cut a[href]{background:pink;box-shadow:1px 1px 3px 0 rgba(0,0,0,0.1);padding:5px 20px;font-size:12px;color:#fff;text-transform:uppercase;letter-spacing:1px;}
.cut a[href]:hover{box-shadow:3px 3px 3px 0 rgba(0,0,0,0.3);}

Example #3

That's pretty much it!

Put whatever you want before the cut just like usual; whatever images, codes, or text you like. Have fun!

♡ You're Done! ♡