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

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

From:
( )Anonymous- this user has disabled anonymous posting.
( )OpenID
Username:
Password:
Don't have an account? Create one now.
Subject:
No HTML allowed in subject
  
Message:
 
Notice! This user has turned on the option that logs your IP address when posting.