Applying custom styles to the sidebar?

#1

I have a template featuring the tag macro, transcluded into the sidebar. I want set the opacity of the tag pill body to 0.5, without changing the opacity of the dropdown.

Here is what I currently have, which is the result of placing the tag macro within a span, and styling it. If you click on one of the sidebar tags you will see that the style has also been applied to the dropdown, which I don’t want.

I can override .tc-tag-label to change opacity of just the tag pill body, but affects every tag pill in the wiki:

<style>
.tc-tag-label {
opacity: 0.5;
}
</style>

So I’m stuck :frowning: Can anyone help?

#2

To limit the custom style to the sidebar, use CSS specificity with the containing class .tc-sidebar-scrollable, like this:

.tc-sidebar-scrollable .tc-tag-label { opacity: 0.5; }

You might also want to add a “hover” effect so that when the mouse is over a tag, that tag will get full opacity:

.tc-sidebar-scrollable .tc-tag-label:hover { opacity: 1; }
1 Like
#3

I will just add, if you use the <style> tag not only is specificity importiant or it will apply everywhere, but it is only applied when they style tags are displayed (only the result is visible) so they are useful during design but not a lot of use otherwise. Placing them in a tiddler with a stylesheet tag makes it clears that to work you need to add specificity.

#4

While @TW_Tones’s suggestion of placing the CSS into a separate tagged with $:/tags/Stylesheet is generally true and is the recommended way to apply custom CSS, you CAN use the “inline” <style>...</style> syntax in certain situations.

As @TW_Tones noted, the <style>...</style> syntax is only applied when it is currently being rendered. Thus, for your specific use-case (custom sidebar content), if the <style>...</style> syntax occurs within the custom sidebar content itself (i.e., within the tiddler that is tagged with $:/tags/Sidebar), then you can be assured that the styles will be applied whenever the custom sidebar content is displayed.

The advantage of this limited method is that the CSS is contained in the same tiddler that applies it, so it doesn’t create a dependency on another tiddler. As a result, when installing your custom sidebar into another TiddlyWiki you only have to import the one tiddler, without worrying about importing a separate stylesheet tiddler.

-e