Small changes Tom

This commit is contained in:
Tom van Woudenberg 2025-04-14 09:18:50 +02:00
parent b4f919d50a
commit d795f3db0f

View file

@ -143,17 +143,9 @@ This content is both highlighted as important and collapsible.
## Custom colours for admonitions
13. It is also possible to use specific colours to customize your admonitions, using built-in Sphinx colour classes. To do so, it is necessary to follow the installation process outlined below:
13. It is also possible to use specific colours to customize your admonitions, using our extension ['Sphinx-Named-Colours'](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html#admonitions). This allow you to use default 'CSS' colours or your own custom colours. To do so, it is necessary to add the extension as shown below:
**Step A: Install the Package**
Install the `sphinx-named-colors` package using `pip`:
```
pip install sphinx-named-colors
```
**Step B: Add to `requirements.txt`**
**Step A: Add to `requirements.txt`**
Ensure that the package is included in your project's `requirements.txt` to track the dependency:
@ -161,11 +153,11 @@ Ensure that the package is included in your project's `requirements.txt` to trac
sphinx-named-colors
```
**Step C: Enable in `_config.yml`**
**Step B: Enable in `_config.yml`**
In your `_config.yml` file, add the extension to the list of Sphinx extra extensions:
```
```md
sphinx:
extra_extensions:
.
@ -177,7 +169,7 @@ sphinx:
.
```
14. Once the installation is done, we can experiment with custom-coloured admonitions! Go ahead and look at the available [CSS Named Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and pick a desired colour.
14. Now we can experiment with custom-coloured admonitions! Go ahead and look at the available [CSS Named Colours](https://developer.mozilla.org/en-US/docs/Web/CSS/named-color), and pick a desired colour.
15. Once you have chosen a colour, coloured admonitions can be generated in two ways, depending on how you'd like to structure your content. The first method is by adding the name-colour via `:class:` to an existing `admonition` or `dropdown` type block, similar to what was done above. This can be done as follows:
@ -201,18 +193,15 @@ This is a green-styled custom admonition.
```
````
18. For the second method using named colour admonitions, a new class is also introduced for titleless admonitions: `show-bar`. This forces printing of the title bar. If a title is given, the title will be printed too and adding the class `show-bar` is redundant. Try this out using the code above with an omitted title, and this added class.
18. For more details, see the documentation of this extension in [our manual](https://teachbooks.io/manual/external/Sphinx-Named-Colors/README.html). This also describes how to add your own custom colours!
19. For both methods, you can also combine classes here, for example, `:class: darkblue dropdown` to make it collapsible and coloured. Test this out, building on the above examples.
19. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button.
20. Add a commit message.
20. When you are ready, commit your changes to the repository by clicking on the green `Commit changes` button.
21. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting).
21. Add a commit message.
22. To see your changes, go to {octicon}`play` `Actions` - The most recent workflow run `overview.md / the commit message of the commit you just made` - Wait for it to finish - In the summary, click on the link of your book shown in the table `Branches deployed` and under `Primary book at root` (getting bored of waiting? There'll be exercising on doing this locally which prevents you from waiting).
23. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page.
22. Do you see your change? If you don't see it click `CTRL`+`F5`/`Control`+`F5`to refresh the page.
```{admonition} Check your understanding
:class: note