wushenghua/plainleaf
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix comments in Space Style.md (#1484)

Browse Source
This commit is contained in:
Lennart Ochel
2025-08-02 13:44:01 +02:00
committed by GitHub
parent 037b596428
commit db366ab238
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
website/Space Style.md
+13 -13
View File
@@ -1,6 +1,6 @@
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.
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.
@@ -12,7 +12,7 @@ You can tweak the CSS load order style by including a `/* priority: number */` c
```space-style
/* priority: 10 */
somestyle {
}
```
@@ -23,11 +23,11 @@ query[[from index.tag "space-style" order by _.priority desc]]
```
# Tag Styling
You can add custom styles to a tag by leveraging the `data-tag-name` attribute, [CSS Attribute Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) and custom [[Space Style]]'s. Every tag gets an attribute added to it called `data-tag-name` that is set to the tag name with the `#` symbol stripped out. So given the tag #my-cool-tag the `data-tag-name` attribute would look like:
You can add custom styles to a tag by leveraging the `data-tag-name` attribute, [CSS Attribute Selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors) and custom [[Space Style]]'s. Every tag gets an attribute added to it called `data-tag-name` that is set to the tag name with the `#` symbol stripped out. So given the tag #my-cool-tag the `data-tag-name` attribute would look like:
data-tag-name="my-cool-tag"
This allows us to do things like change the color of the #my-cool-tag
This allows us to do things like change the color of the #my-cool-tag
to have a purple background, limegreen text and bold font by adding the following [[Space Style]]:
```css
@@ -40,7 +40,7 @@ to have a purple background, limegreen text and bold font by adding the followin
Additionally tags written using angle brackets, such as...
#<my cool tag>
#<my cool tag>
...can be styled via [[Space Style]] like this:
```css
@@ -51,7 +51,7 @@ Additionally tags written using angle brackets, such as...
}
```
# More examples
All the actual CSS in these examples is commented out as to not affect this very website.
All the actual CSS in these examples is commented out as to not affect this very website.
```space-style
html {
/* Changes to the default theme */
@@ -112,22 +112,22 @@ button:hover {
/* box-shadow: #121212 0 0 0 3px, transparent 0 0 0 0; */
}
/* Add custom styling to a specific tag
/* Add custom styling to a specific tag
--> Example Tag: #my-cool-tag */
.sb-hashtag[data-tag-name="my-cool-tag"] {
background: purple;
/* background: purple;
color: limegreen;
font-weight: bolder;
font-weight: bolder; */
}
/* --> Example Tag with angle brackets: #<my cool tag> */
.sb-hashtag[data-tag-name="my cool tag"] {
background: purple;
/* background: purple;
color: limegreen;
font-weight: bolder;
font-weight: bolder; */
}
/* Custom Styling to all tags
/* Custom Styling to all tags */
.sb-hashtag[data-tag-name] {
background: yellow;
/* background: yellow;
color: goldenrod;
border: 2px dashed goldenrod; */
}