Files

T

Zef Hemel 34557e0575 Update documentation for consistency and clarity

- Revised multiple documentation files to correct references and improve clarity, including updates to the Command Palette, Document Editor, and various Markdown files.
- Removed outdated references to "Slash Templatese" and replaced them with "Slash Templates" for consistency.
- Enhanced explanations regarding meta pages and shortcuts, ensuring accurate guidance for users.

2025-04-17 12:04:20 +02:00

2.7 KiB

Raw Blame History

#level/hardcore

Space Style is Space Lua’s stylish sibling. It enables you to add your own styling to SilverBullet with space-style Markdown/Fenced Code 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 ${widgets.commandButton("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.7 KiB Raw Blame History Unescape Escape

Examples

2.7 KiB

Raw Blame History