From d18ad1e853202112b8723f88e42610ce5657bd2f Mon Sep 17 00:00:00 2001 From: Marxsal Date: Mon, 8 Jun 2015 11:11:24 -0700 Subject: [PATCH] Update: How to Apply Custom Styles The former instructions didn't explain how class names with special characters could be used in stylesheets. This adds explanation about escaping the % symbol. --- .../howtos/How to apply custom styles by tag.tid | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid b/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid index e3b385b56..821db72ae 100644 --- a/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid +++ b/editions/tw5.com/tiddlers/howtos/How to apply custom styles by tag.tid @@ -1,5 +1,5 @@ created: 20141001132300000 -modified: 20141001132300000 +modified: 20150608132300000 tags: Learning title: How to apply custom styles by tag type: text/vnd.tiddlywiki @@ -26,5 +26,16 @@ Note that tags containing spaces or non-alphanumeric characters will be converte |!Tag |!Generated Class Name | |`$:/mytag` |`tc-tagged-%24%3A%2Fmytag` | -|`one two` |`tc-tagged-one%20two` | +|`Doctor Who` |`tc-tagged-Doctor%20Who` | |`£35.23` |`tc-tagged-%C2%A335.23` | + +Although ~TiddlyWiki will generate these tags, to actually use them in your css, you will need to escape the percent character in your stylesheet, like: + +``` +.tc-tagged-Doctor\%20Who { + background-image: url(./tardis_back.svg); + background-repeat: no-repeat; + background-position: right; + color:#FBFBFB; +} +```