Customizing Bold and Italic colors permanently

#1

I am new to Tiddlywiki so please be patient with me. I have this project I am working on that needs a lot of formatting. I want to set a specific color to bold and italic permanently so that if I hit the hotkey for Bold or Italic, it automatically sets the color I picked. There are thousands of words in this file so I can’t use:

@@color:blue;
Some example text
@@

Is there are way to do that? Thank you in advanced!

#2

Make a new tiddler and set the tags field to $:/tags/Stylesheet

Set the type field to Stylesheet (text/css)

Then paste the following CSS styles:

.tc-dropzone em { color: blue; }

.tc-dropzone strong { color: red; }

Save the tiddler: all italics should be blue, all bolds should be red. This is what I got when I put it in a tiddler named “Custom Format”:

SimpleStyles

1 Like
How to give two different colors for the two syntax for italics in markdown
#3

It worked! Thank you very much for such a detailed explanation. :+1:

#4

I’m curious to the choice of class to use. I know that .tc-dropzone does happen to wrap all visible content, but it still feels like the wrong target here, for semantic if not practical reasons.

Is there a good Tiddlywiki reason to choose this over any of these alternatives?

  • .tc-page-container
  • .tc-page-container-wrapper
  • .tc-body,
  • or simply, body

? Is this target commonplace in TW for universal styling?

#5

It is probably not common at all, but I’ve been using it lately to target styles for overall layout UI.

Since OP wanted the styles to work everywhere I didn’t want them to have to keep adding more selectors if they ever started adding additional UI elements.

I used to write styles that would select the Sidebar, the Tiddler Body and the EditMode Preview pane each, for visual consistency; but I got tired of having to write 3 or more selectors for every general-use style.

So far, I had good luck using .tc-dropzone for elements without any more-specific selectors.

2 Likes
#6

OK, so let me ask the simpler question following up on @Scott_Sauyet : Why not just:

em {color: blue;}

? Wouldn’t that cover everything? Is there some drawback?

#7

You could. The trouble can come when this conflicts with a more specific CSS rule. (If you already understand CSS Specificity, then feel free to move on, as the rest of this is a primer.)

CSS Specificity will dictate that a selector including a class (.tc-dropzone) will overrule a similar one without a class. So if there is already a rule somewhere in tiddlywiki that specifies the color of an emphasis element, especially if this rule includes a class, then em {color: blue;} would lose out to it. (There’s much more complexity to specificity, and counts of ids, classes, and elements are compared in that order, to choose the most specific, with overall ties going to the last selector processed.)

If there are multiple different stylesheets, especially from different authors, etiquette dictates that the earlier authors should use selectors as non-specific as possible to achieve their effect. In TiddlyWiki, that means that the core should be as generic as practical, that reusable components such as plugins should get only slightly more specific, leaving end users to override those parts necessary without writing crazy-deep, super-specific selectors.

Using the selector .tc-dropdown (or one of my alternatives) means that if the core defines a color for em elements, my selector will rule. Even if the core uses .tc-dropdown em, my selector will presumably be applied later, so will dominate. The advantage of using it, even if the core doesn’t now define a color for em, is that nothing would break if an updated version started doing so. Of course .tc-body .tc-dropdown .tc-storyriver em, with three classes would still overrule this, but we can hope that the core never tries that.

2 Likes