CSS Styles for SNW

[TfTHacker]

Overview

All visual aspects of SNW are controlled through CSS classes. This means you can override the default look of SNW, whether its the block counter, side pane or hover views. Please see this linked for all the default CSS settings of SNW:

https://github.com/TfTHacker/obsidian42-strange-new-worlds/blob/master/src/styles.css

Note: while the plugin is in beta testing, these CSS classes are subject to change. Though they should be stable at this point in time.

The SNW plugin has three primary visual elements:

• Block reference count - this is the little number with box around it that displays in your notes to indicate that there is a link with other references.
• When you hover over a block reference, a hover popup window appears.
• When you click on a block reference, the same information that is in the hover popup appears in the side pane

Block reference counts

• Root CSS class for the reference count is: .snw-reference
• For more specific control based on context, whether Obsidian is in edit mode .cm-content or preview mode .markdown-preview-view:

.cm-content .snw-reference {
}

.markdown-preview-view .snw-reference {
   padding-right: 3px;
}

• There are five types of reference counters, each of which can also be targetted to control the specific look using one of the following selectors:
  • .snw-block
  • .snw-heading
  • .snw-embed
  • .snw-embed-preview
  • .snw-link

Hover popup view

Note: The hover popup is built with an open-source library called Tippy.js. This library has its CSS classes not documented in this discussion.

• The main CSS locator is: .snw-popover-container. This is where you can make the popup wider and taller.
  • .snw-ref-title-popover - the title at the top of the popover

Side pane view

• The main container CSS locator for the side pane is snw-sidepane-container.
  • .snw-ref-title-side-pane - title of the side pane

Shared Visual Elements for Hover and side pane

• Both the hover popup and the side pane use several shared classes for controlling various visual elements they display. In fact, the only difference between the hover popup and the side pane is that they show information about a block reference. However, all the contents displayed in either location are the same information.
  • .snw-ref-area - shared CSS locator for both hover and side pane view. This is a wrapper container for where all content lives, no matter where it is shown.
  • . snw-ref-item-container - each reference has its own container to lump all the data for that reference together
  • . snw-ref-item-file - each ref-item has a file associated with it. This CSS class is the title of the reference item.
  • .snw-ref-item-info - information for the reference.

Header counter

• At the top of each document, there is a counter showing the number of incoming links into the current document. This also has a wrapper container: . snw-header-count-wrapper