How to get borders on your dynamic cut tags

[sophie]

The new AJAX-y cut tags are great, but one thing about them is that they don't by default show up with any borders. That's great if you like it the way they are, but if you want to be able to distinguish between open cuts and the rest of the post, it's not easy to tell where the end is.

Thankfully, however, an open cut tag has its own CSS class, so you can customise it on your journal and reading page. Go to the Custom CSS section of the Customize area, and paste this into the box:

.cuttag-open {
  border: 1px dashed black;
  margin: 0.5em;
  padding: 0.5em;
}

Or however you prefer - for example you might prefer a red or black border. But after saving this CSS and refreshing your journal or reading page, you should find that any open cut tags will now have dashed boxes around them. :D

This only works for the dynamic part of the cut tags, unfortunately; going to an entry directly won't allow you to do this. (but maybe I should suggest that as a feature! Mmm, that'd be good.)

Comments

[florahart]

There's an open suggestion from yesterday about making the cuts uncollapsible without scrolling back up to the triangle; in the comments there is a discussion of making it clear where the end is as part of that and perhaps making a left border or something. Just, you know, in case you'd like to chime in there. :)

[allen]

I seriously had the reply window open in that thread and

.cuttag-open {
border-left: 1px solid;
margin: 1px;
padding: 2px 2px 2px 4px;
background: #ccc;
}

in my paste buffer, but decided I'd see if there was anything new in my reading page first...

[phoenixsong]

So this will shade the background of the cut-tag area? Awesome!

[elfin]

*is enthralled*

Thank you for this!

[gblvr]

Oh, this is awesome -- thank you!

[scruloose]

That is nifty.

[jerico_cacaw]

Agree. Really nifty. Thanks, sophie!

[montuos]

w00t! You are TEH AWESOME! Thank you! :)

[katieastrophe]

Thankyou so much for this :)

[hermitsoul]

Thank you!

[pne]

Thank you!

[sam_bluesky]

Oh, nifty! Thanks for this.

[jeeps]

perfect! thank you.

[nakuru]

Wonderful! Thank you~

[turlough]

Cool!!

I was vaguely wondering yesterday what the class of the cuttag area was but now I don't have to find out myself :-)

[valiha]

I just tried it, and loved it! I did replace dashed with dotted because I like that better. Thank you!

[lanark]

Nice, now I don't have to look for the class. Thanks!

To style the expander itself...

[marahmarie]

.cuttag {display:inline-block!important; padding:0px!important;border:1px solid #333;
}

Also, .cuttag-open will not encase the numbers or bullet points on lists broken up by a cut - see here (I've added the CSS you gave purely to show the effect on lists broken up by cuts).

Both that and this is something I need to report to DW directly, but on lists broken up by cuts, like that one, the cuts have the effect of also re-numbering the lists.

So, if I show, say items 1-5, then hide the next items, 5-10, behind a cut, the hidden items aren't counted; instead, the next item in the list (say, item #6) becomes item #5, and so on, until you expand the cut - then the list magically re-orders itself correctly. The cut also has the effect of breaking the HTML for the lists...but only when you expand the cuts, not in view-entry mode.

Yeah: Wheeeeeeeee!

Re: To style the expander itself...

[sophie]

Yeah, there's not a whole lot that can be done about that. The reason the numbers don't go in the box too is because the browser just sees <li> tags without a corresponding <ul> to indent them. :/

Re: To style the expander itself...

[marahmarie]

Arrrrrrrgggggghhhhhhh:

.cuttag-open li {margin-left: -30px!important; padding-left: 30px; list-style-position: inside!important;}

*ahhhh, OK, that's better*

I don't think I'll use that CSS, since I don't really like it, but just in case anyone else runs into a similar dilemma and has that itch to do something about it, I guess that code is better than nothing - it cleans it up a little - but maybe someone else can come up with something better. :)

[silverhare]

Ooh, hurrah. Thanks for this. :)