Revision Difference
stylesheets#562739
<cat>UI.Styles</cat>⤶
<title>Using Stylesheets</title>⤶
⤶
# Automatic loading of stylesheets⤶
⤶
If you are using a `.razor` file you can create another file `mypanel.razor.scss` (where `mypanel` is the name of your UI panel) and it will automatically load the stylesheet and apply it to your UI.⤶
⤶
<note>⤶
If you are using a partial class to augment the code of the generated razor class, you will need to change the extension of the file to `.razor.cs` instead of just `.cs` otherwise the automatic stylesheet loading won't work.⤶
⤶
For example: `mypanel.razor` and `mypanel.razor.cs` will load `mypanel.razor.scss`⤶
</note>⤶
⤶
# Manually setting stylesheet⤶
⤶
You can use the `[Stylesheet("path/to/stylesheet.scss")]` attribute to manually set which stylesheet is used.⤶
⤶
# Applying Styles to ⤶
⤶
If your panel is named `MyPanel` (ie. `MyPanel.razor`) then in your scss you can define styles for a `MyPanel` element type in your `MyPanel.razor.scss` file.⤶
⤶
```⤶
MyPanel {⤶
width: 100%;⤶
height: 100%;⤶
}⤶
```cssThis page has been [moved](https://docs.facepunch.com/s/sbox-dev/doc/styling-panels-xo0h4da3vQ).