外观党福利，给条目添加贴纸

dyp1121054136

搞出来了

给条目添加贴纸示例——在图片上添加一个透明文本框
在图片上添加一个透明文本框.png

代码

<style>
.style1{ position: relative; }
.style2{ position: absolute; left: 100px; top: 130px; width:600px;}
</style>

<div class="style2">
   {{图片名称}}
   <div class="style2">
       <$edit-text tiddler="链接的条目标题" field="text" class="tc-edit-overlayeditor" />
   </div>
</div>

dyp1121054136

新建条目加tag
$:/tags/Stylesheet

添加文本框样式css代码

.tc-tiddler-frame input.tc-edit-overlayeditor, .tc-tiddler-frame textarea.tc-edit-overlayeditor {
	width: 100%;
	padding: 3px 3px 3px 3px;
	margin: 4px 0 4px 0;
	border: 0px solid <<colour tiddler-editor-border>>;
	line-height: 1.3em;
	-webkit-appearance: none;
background-color: transparent;
color:red;
font-weight: bold;
}

.tc-tiddler-frame input.tc-edit-overlayeditor {
}

.tc-tiddler-frame input.tc-edit-overlayeditor {
	<<box-shadow "inset 0 1px 8px rgba(0, 0, 0, 0.15)">>
}

.tc-tiddler-frame .tc-edit-tags input.tc-edit-overlayeditor {
	<<box-shadow "none">>
	border: none;
	outline: none;
}

linonetwo

这个技巧不错，掌握 html Style 标签可以做任何事

dyp1121054136

官方中文教程示例：包含 HTML 或 wikitext 内容于 SVG 图像。
第一个例子是透明背景+文字，第二个例子是画一个图形+文字，背景和文字的位置和大小可调。

SVG文字.jpg

!!!示例：
您可以使用 `<text>` 元素包含简单的文本串于 SVG 图像：

<svg width="290px" height="90px" viewBox="200 0 100 300">
<text x="20" y="150" font-family="Verdana" font-size="55">
Hello, out there
</text>
<rect x="1" y="1" width="998" height="298" fill="none" stroke-width="2" />
</svg>

HTML 或 WikiText 内容可以包括使用 `<foreignObject>` 元素于内嵌 SVG 图像中。例如：

<svg width="260px" height="260px">
<circle cx="150" cy="150" r="100" fill="#B1D3E9" stoke="red"/>
<foreignObject x="75" y="95" width="150" height="180">
<body>这里是一段文字，文字会自动换行。这里是一段文字，文字会自动换行。这里是一段文字，文字会自动换行。</body>
</foreignObject>
</svg>

dyp1121054136

@dyp1121054136 在外观党福利，给条目添加贴纸中说：

搞出来了

给条目添加贴纸示例——在图片上添加一个透明文本框
在图片上添加一个透明文本框.png

代码

<style>
.style1{ position: relative; }
.style2{ position: absolute; left: 100px; top: 130px; width:600px;}
</style>

<div class="style2">
   {{图片名称}}
   <div class="style2">
       <$edit-text tiddler="链接的条目标题" field="text" class="tc-edit-overlayeditor" />
   </div>
</div>

增加代码style3，让透明文本框也可以调整位置和大小

<style>
.style1{ position: relative; }
.style2{ position: absolute; left: 100px; top: 130px; width:600px;}
.style3{ position: absolute; left: -20px; top: 40px; width:600px;}
</style>

<div class="style2">
   {{图片名称}}
   <div class="style3">
       <$edit-text tiddler="透明文本框" field="text" class="tc-edit-overlayeditor" />
   </div>
</div>

dyp1121054136

贴纸注释插件网址：
https://annotations.tiddlyhost.com/

Annotations: Pure CSS annotations
$:/plugins/TWaddle/Annotations
1.0.0

dyp1121054136

@dyp1121054136 在外观党福利，给条目添加贴纸中说：

贴纸注释插件网址：
https://annotations.tiddlyhost.com/

Annotations: Pure CSS annotations
$:/plugins/TWaddle/Annotations
1.0.0

我还没看懂，要好好研究一下

dyp1121054136

贴纸注释插件Annotations使用说明

1、新建一个注释汇总条目并命名，加上tag：annotations，如：贴纸注释测试，然后在设置面板 Annotations 选项卡中的 “Active annotations scheme” 的下拉菜单中就可以看到这个空白的注释主题。

2、选中新建的注释主题，开始添加贴纸注释。

3、“Type title of existing tiddler or PAGE for page element” 右侧的输入框可以填需要添加贴纸的条目名称，或者 PAGE，即对页面生效，也可以空着不填。

4、“Element to "hook on" to or custom class e.g .myclass” 的下拉菜单中可选条目元素或页面元素；或者在右侧的输入框添加样式代码，需要自定义名称，如：.class2 。

5、“Annotation” 右侧的输入框填写需要添加的注释文本。

6、下方出现新面板，可以调整注释的位置、字体、文字和背景颜色、阴影、旋转角度等，可以修改注释内容或删除注释。

7、如想在条目内容中间添加注释，可按此格式书写 @@.class2 文本@@ 。

dyp1121054136

附件下载：
贴纸注释插件TWaddle Annotations 2023-12-27.html

dyp1121054136

经测试，贴纸注释插件Annotations添加的是真贴纸，把纯文本转换为图形元素了，如果想要可以复制文本的贴纸，请看楼上的“给条目添加纯文本便签”。

太微中文论坛

外观党福利，给条目添加贴纸