diff --git a/website/Space Style.md b/website/Space Style.md index 44d8931c..33722bae 100644 --- a/website/Space Style.md +++ b/website/Space Style.md @@ -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... - # + # ...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: # */ .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; */ }