Files

T

TR StaakeandGitHub 2020e85a6f Update how tags are rendered to allow for custom styling (#1179 )

* Updated how tags are rendered to allow for custom styling via space-styles

* Wrapped the existing span for a tag with an anchor element <a> to
improve ux for screen readers
* Added data-tag-name attribute to tags so that given a tag `#my-tag` it
will have the attribute `data-tag-name="my-tag"` added to the new `<a>`
element wrapper allowing for end users to target tags for styling with a
css selector such as `.sb-hashtag[data-tag-name="my-tag"]{...}`

* Updated Docs

2024-12-14 09:57:46 +01:00

2.6 KiB

Raw Blame History

#level/hardcore

Space Style is Space Script’s stylish sibling. It enables you to add your own styling to SilverBullet with space-style Blocks.

This can be used to achieve various things, such as overriding the default editor font or setting wider page widths. It is also possible to develop custom themes this way.

To apply the updated styles, either reload the client or run the {[System: Reload]} command.

Many styles can be set with variables but not everything is covered. You’ll have to reverse-engineer those parts, unfortunately.

Examples

All the actual CSS in these examples is commented out as to not affect this very website.

html {
  /* Changes to the default theme */
  /* Such as the accent color */
  /*--ui-accent-color: #464cfc;*/
}

html[data-theme="dark"] {
  /* Changes to the dark theme */
  /*--ui-accent-color: #464cfc;*/
}

html {
  /* Uncomment the next line to set the editor font to Courier */
  /* --editor-font: "Courier" !important; */
  /* Uncomment the next line to set the editor width to 1400px */
  /* --editor-width: 1400px !important; */
}

/* Choose another header color */
html {
  /*--top-background-color: #eee;*/
}
/* Or modify the element directly */
#sb-top {
  /*background-color: #eee !important;*/
}

/* You can even change the appearance of buttons */
button {
  /* align-items: center;
  background-color: #fff;
  border-radius: 6px;
  box-shadow: transparent 0 0 0 3px,rgba(18, 18, 18, .1) 0 6px 20px;
  box-sizing: border-box;
  color: #121212;
  cursor: pointer;
  display: inline-flex;
  flex: 1 1 auto;
  font-family: Inter,sans-serif;
  font-size: 0.6rem;
  justify-content: center;
  line-height: 1;
  margin: 0.2rem;
  outline: none;
  padding: 0.3rem 0.4rem;
  text-align: center;
  text-decoration: none;
  transition: box-shadow .2s,-webkit-box-shadow .2s;
  white-space: nowrap;
  border: 0;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation; */
}

button:hover {
  /* box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0; */
}

/* Add custom styling to a specific tag 
--> Example Tag: #my-cool-tag */
.sb-hashtag[data-tag-name="my-cool-tag"] {
  background: purple;
  color: limegreen;
  font-weight: bolder;
}
/* --> Example Tag with angle brackets: #<my cool tag> */
.sb-hashtag[data-tag-name="my cool tag"] {
  background: purple;
  color: limegreen;
  font-weight: bolder;
}
/* Custom Styling to all tags
.sb-hashtag[data-tag-name] {
  background: yellow;
  color: goldenrod;
  border: 2px dashed goldenrod; */
}

Another example can be found in Page Decorations#Use case: pimp my page

2.6 KiB Raw Blame History Unescape Escape

Examples

2.6 KiB

Raw Blame History