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

November 2020

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
2930     

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

Styling lj-cut tags!

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. (&nbsp; 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;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! ♡

Using on DW?

Comments

Aug. 15th, 2020 10:11 pm (UTC)
I was wondering about this while I was working on a layout akdsjldsd thank you so much!
Aug. 15th, 2020 10:34 pm (UTC)
So was I! Good timing, lmao. I think I've done a styled lj-cut before at some point and thought "I should do a tutorial on that," and then naturally immediately forgot to. 😂
Aug. 15th, 2020 10:38 pm (UTC)
Yeah because I was fiddling with styles and kept wondering if there was a cut specific one lol. Anyway I am a doof who doesn't remember anything so I couldn't tell where I keep messing up and accidentally switching link styles but hey!
Aug. 16th, 2020 05:52 am (UTC)
I'm p sure I've done this in entries before by span style= blab blah blah then the cut?
Aug. 17th, 2020 05:50 pm (UTC)
Definitely something different! You can't style the parentheses and the link text separately from each other without being able to single out the link from the tag as a whole, which you wouldn't be able to do inline because of the way the tag is written before it renders on the page.
Aug. 26th, 2020 02:06 am (UTC)
yeah probably honestly i have the worst memory lol
Aug. 17th, 2020 02:47 pm (UTC)
Aug. 17th, 2020 05:51 pm (UTC)
Aug. 18th, 2020 05:07 pm (UTC)
I might be missing something suuuuper obvious, but is there a way to do this in the entry by styling the cut there itself in the html, instead of CSS in a layout to apply to all cuts? Like, if I wanted to use multiple styles of cuts in one entry but style the cuts all differently?
Aug. 22nd, 2020 12:36 am (UTC)
You can probably still achieve that in the CSS since you're using a span class. Just name .cut into different names. For the sake of an example, let's say you have three characters and you want to use a different styled lj-cut for them. Just rename the cut code for them like this: .cut-mickey, .cut-minnie, and .cut-goofy.
Aug. 24th, 2020 09:56 pm (UTC)
+1 this is exactly what I would suggest too. Ty!