zelo72
/
documentation
mirror of https://github.com/mastodon/documentation
1
0
Fork 0
Code Issues 6 Releases Wiki Activity

Update customization guide

This commit is contained in:
Eugen Rochko 2017-05-27 16:51:28 +02:00
parent d94a7d18f4
commit d892b9ff8f
1 changed files with 27 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
Running-Mastodon/Customizing.md
View File

@ -3,20 +3,36 @@ Customizing your instance
## Customizing style
If you create files prefixed with `custom` and suffixed with `.scss`
(e.g. `app/assets/stylesheets/custom.scss`, `app/assets/stylesheets/custom-foo.css`),
the default css will be replaced by their contents.
You can make the application load a different CSS file than the default, you can optionally choose to use that mechanism to adjust variables and re-import the application CSS from your own CSS. Here is what you need to do:
## Changing colors
1. Create `app/javascript/packs/custom.js` with the contents `require('../styles/custom.scss');` - you can call the SCSS file anything you want, actually, it will still be compiled into custom.css because it uses the pack name, i.e. this js file
2. Create `app/javascript/styles/custom.scss` (or whatever you chose). Here you can write whatever SCSS you want.
3. If you just created the custom.js file, you'll need to restart your webpack-dev-server (if you're in development mode) for it to be recognized and start live reloading. Naturally, in production you'll need to compile assets and restart for the changes to take effect.
If you want to customize for example the vibrant color of your mastodon instance, you can put the following code in your
`custom.scss` file :
## Changing colors and other variables
````scss
$color4: #d3d900; // vibrant
See the `app/javascript/styles/variables.scss` file for the full list of available variables used throughout the application styles. You can redefine their values in your own `custom.scss` like this:
```scss
$ui-highlight-color: #d3d900;
@import 'application';
````
```
Don't forget to recompile your assets and restart mastodon(if you didn't have a `custom.scss` file before)
to see the changes.
#### Upgrading custom.scss variables from pre-1.4
Here is a mapping of the renamed variables:
```scss
$ui-base-color: $color1;
$ui-secondary-color: $color2;
$ui-primary-color: $color3;
$ui-highlight-color: $color4;
$base-border-color: $color5;
$simple-background-color: $color5;
$primary-text-color: $color5;
$error-value-color: $color6;
$valid-value-color: $color7;
$base-shadow-color: $color8;
$base-overlay-background: $color8;
```