Show transclusions in specific format

1

I want to make all transclusions appear with border (and/or specific background colour) so that it can be seen that they are a transclusion and not part of the tiddler’s own text.

Can anyone suggest some CSS or plugin that does this? I would accept a plugin that accomplished this, among other features.

I know some CSS but I could use some help knowing what class to apply it to.

Thank you!

2

Hi Mike – Welcome!

The main problem here is, that transclusions don’t create a “container element” that can be styled. So you need to create your own template.

I did add a JSON file, that you can drag and drop from you file-browser into a test-wiki.

It contains 4 tiddlers.

  • to-be-transcluded … A tiddler to be transcluded.
  • test-transclusion … the test tiddler with the transclusion
  • tt-style .. The CSS definition with a 2px blue border
  • tt … the template. It’s short for less typing.

tt looks as follows. It contains the “container” div with a class definition and the transclude widget for maximum flexibility.

<div class="my-transclusion">
<$transclude mode="block"/>
</div>

Using the template looks like as follows. For more info see: https://tiddlywiki.com/#Transclusion%20in%20WikiText

{{to-be-transcluded||tt}}

I hope that helps … If not, just ask :wink:

-Mario

visible-transclusion.json (622 Bytes)

The result looks like this:

image
image1584×1211 37.4 KB

3

Welcome @Mike

Keep in mind the idea of having a box style apply to all transclusions, may seem tempting on the surface, but in fact transclusions are used all over the place for many different reasons, and if you could do so it may be a mess.

It is thus perhaps useful to use a template as @pmario suggested and use it to rule in the circumstances where it applies. Additional solutions could be found if;

  • You wanted this to extend into nested transclusions
    • CSS selectors may be set to inherit the box
  • If you want to do this a lot with the say the editor excise button, or applying boxes in content etc… we can create new editor toolbar buttons to make this easy, or run your transclusions through a macro.
4

You may also want to check out parts of this thread on
modifying how transclusions show up (in story river):

6

You may look at the translink macro. According to docs, it does just what you ask for:

returns a frame with the title and transcluded text of a chosen tiddler. The title links to the transcluded tiddler.