Collapsing rows and Bleeding CSS to next row in a template As it's been noted, using CSS styling in a standard template can be a bit tricky, because the template uses = as a separator in the content rows. But, by some clumsy experimentation, I accidentally managed to break the rows to allow CSS to be applied to the left side of the equation (with a caveat I'll get to). Here's how: First, we make our CSS row - this row needs not have content, though it can have some - what we care about is the end: {{=[placeholder](#" style=" whatever style declarations you want; class="showtip" title=)}} You'll notice the empty tooltip trick at the end - this is important. Next, the content row: {{[the left side, with the CSS styling from above](#)=The right side}} Putting it all together... &{template:default} {{=[placeholder](#" style=" color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet; class="showtip" title=)}} {{[Rainbow](#)=Not Rainbow!}} Ta-dah! The first row has disappeared (or more specifically, collapsed into the second, but the broken link is not displayed - if there's other content on that row, it'll replace the left side of the bottom row, either as a normal left side entry, if left of the =, or as an indented, stylable right-left - I haven't fully explored what you can do with that), and the CSS styling has been applied to the left side of the second row! Now, you'll notice the caveat I mentioned - there's a very noticeable indent on the left side of the template - the left side starts at about the same position as the right would in a normally partitioned template. However, the left side is still fully functional as a row name, meaning you can use overwrite trick to all kinds of clever effects, from hiding the name fields with a display:none; to shifting around the CSS bleed rows, to maybe even more clever things with the row-collapsing trick. Go wild! EDIT: You can even add a tooltip to the left-side field using this trick, by placing the whole tooltip trick before the collapse trick: &{template:default} {{=[placeholder](#" style=" color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet; " class="showtip" title= boop class="showtip" title=)}} {{[Rainbow](#)=Not Rainbow!}} Relatedly, you can daisy chain collapsed rows to turn multiple rows into files on a single row instead, like so: &{template:default} {{[=Let's go![collapser](#" style=" display: none; class="showtip" title=)}} {{[1](#)=first file content goes here[ collapser ](#" style=" display: none; class="showtip" title=)}}{{[2](#)=second file content goes here [ collapser ](#" style=" display: none; class="showtip" title=)}}{{[3](#)=third file content goes here [ collapser ](#" style=" display: none; class="showtip" title=)}} {{[4](#)=fourth file content goes here}} Though the template dimensions can get pushed out of the right side of the chat if there's too many too wide files. If you do not hide the left elements, they appear at the end of the file to the left of its content (think of them as an index starting with 0, with 0 being the empty file at the left). EDIT: I figured out how to solve the indent issue (or rather, how to apply the trick to the actual first row name) - it's as simple as putting the collapser at the end of the name space, like so: &{template:default} {{name=testing stuff[placeholder](#" style=" display: none; class="showtip" title=)}}{{[0](#)=[first file content goes here](#" style=" font-weight: normal; display: block; color: white; text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black; background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet;)[placeholder](#" style=" display: none; class="showtip" title=)}} {{[1](#)=second file content goes here[placeholder](#" style=" display: none; class="showtip" title=)}}{{[2](#)=third file content goes here[placeholder](#" style=" display: none; class="showtip" title=)}}{{[3](#)=fourth file content goes here}} The text defaults to bold in the first file, but you can use CSS styling to make it look however you like - it's content on the left side of the = on its row, so if you like, you can style every single letter differently. This also means you can make a full width text field in a template , where you can style individual segments as you wish. TLDR; this tech 1. collapses a template row (but not the namespace) into the next row 2. applies the CSS declarations to the name (left side) of the next row and 3. allows you to place the content of a row where the name of the row would be, or vice versa, and create extra files in the row.
