Skip to content

Commit

Permalink
Merge pull request #1416 from klembot/develop
Browse files Browse the repository at this point in the history
2.7.0
  • Loading branch information
klembot authored Jul 8, 2023
2 parents de3ac43 + 0b724a7 commit 954b0f0
Show file tree
Hide file tree
Showing 87 changed files with 20,342 additions and 22,817 deletions.
2 changes: 2 additions & 0 deletions .github/ISSUE_TEMPLATE/bug-report.yml
Original file line number Diff line number Diff line change
Expand Up @@ -92,5 +92,7 @@ body:
required: false
- label: I have done a search and believe that an issue does not already exist for this bug in the GitHub repository.
required: true
- label: If this problem is occurring with the app version of Twine, it still happens after I remove the `user.css` file from my Twine folder. (You would've added this file yourself. If you don't understand this question, you can safely check this box.)
required: true
- label: I have read and agree to abide by this project's Code of Conduct.
required: true
2 changes: 1 addition & 1 deletion .github/workflows/create-release.yml
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ jobs:
- uses: actions/setup-node@v2
with:
cache: npm
node-version: 14
node-version: 18
- name: Install
run: npm install
- name: Test
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/jest.yml
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ jobs:
- uses: actions/setup-node@v2
with:
cache: npm
node-version: 16
node-version: 18
- name: Install
run: npm ci
- name: Test
Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/playwright.yml
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ jobs:
- uses: actions/setup-node@v3
with:
cache: npm
node-version: 16
node-version: 18
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
Expand Down
4 changes: 3 additions & 1 deletion docs/en/src/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,9 @@
- [Removing a Story Format](story-formats/removing.md)
- [Disabling Story Format Extensions](story-formats/extensions.md)
- [How Twine Manages Story Format Versions](story-formats/versions.md)
- [Customing Twine With Preferences](preferences/index.md)
- [Customizing Twine](customizing/index.md)
- [Setting Preferences](customizing/preferences.md)
- [Advanced Customization](customizing/advanced.md)
- [Limitations](limitations/index.md)
- [Large Stories](limitations/large-stories.md)
- [Combining Stories](limitations/combining.md)
Expand Down
56 changes: 56 additions & 0 deletions docs/en/src/customizing/advanced.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
# Advanced Customization

## CSS

App Twine allows advanced customization its interface by creating a special
file, `user.css`, in your Twine folder. You'll need to create this file outside
of Twine using a text editor.

If `user.css` exists, then app Twine will add the contents of it to the UI as
CSS rules, potentially overriding the default styling. CSS allows changing the
appearance of the application--using different fonts, for example, or
colors--but does not allow changing Twine's functionality or adding new
features.

Here's a sample `user.css` that replaces the graph paper background of the story
map with a plain gray color:

```
.passage-map {
background: hsl(0, 0%, 75%) !important;
}
[data-app-theme="dark"] .passage-map {
background: hsl(0, 0%, 30%) !important;
}
```

`user.css` is only available in app Twine. If you'd like to customize browser
Twine using CSS, browser extensions like
[Stylus](https://github.com/openstyles/stylus/wiki) might help.

Some important things to keep in mind working with `user.css`:

- **The structure of Twine's UI can and will change on every release, even for
patch-level version changes.** Because these changes are often numerous, they
will not be part of release notes.
- The file must named exactly `user.css`--all lowercase. `User.css` will not
work.
- Changes to `user.css` will take effect the next time you start Twine.
- To determine what [CSS
selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Selectors) to
use, you can either use developer tools in browser Twine--the DOM structure is
identical between browser Twine and app Twine--or open developer tools in
Twine itself by going to _Troubleshooting_ under the _Help_ menu, then
choosing _Show Debug Console_.
- You can use the in-app debug console to test your CSS rules. The rules you set
in `user.css` will be listed as _injected stylesheet_ in the developer
console.
- `user.css` must be at the same folder level as your `Stories` and `Backups`
folders, directly below the `Twine` folder.
- If there's a problem loading `user.css`, Twine will load as normal and not
apply any customizations. If any of your CSS rules are incorrectly written,
they will be ignored. Twine will not show a warning in any of these cases.
- In order for `user.css` to [win
specificity](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity),
you might need to add `!important` to the end of your declarations.
3 changes: 3 additions & 0 deletions docs/en/src/customizing/index.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
# Customizing Twine

This section describes how you can customize Twine to fit your needs.
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
# Customing Twine With Preferences
# Setting Preferences

To customize Twine, choose _Preferences_ from the _Twine_ top toolbar tab. This
tab is available throughout Twine. A dialog will appear that lets you change
settings. These changes will take effect as soon as you make them, and Twine
will remember them between sessions.
To customize Twine's preferences, choose _Preferences_ from the _Twine_ top
toolbar tab. This tab is available throughout Twine. A dialog will appear that
lets you change settings. These changes will take effect as soon as you make
them, and Twine will remember them between sessions.

## Changing Twine's Language

Expand Down
12 changes: 12 additions & 0 deletions docs/en/src/editing-stories/editing-passages.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,18 @@ extensions](../story-formats/extensions.md).
Twine automatically saves your changes to a passage after you stop typing for a
moment.

## Leading and Trailing Space in Passage Names

If a passage has leading or trailing spaces in its name (like " Hello" or
"Goodbye "), then Twine will show placeholder symbols in the passage edit dialog
name that look like ␣. These symbols are shown so that you can distinguish
between passages that have these spaces and those that don't. In other words,
Twine treats a passage named "Hello" and one named "Hello " as two unrelated
passages. (And usually, you will want to give your passages names that don't
differ by just spaces.)

These symbols are only visible in Twine, not when your story is played.

## Editing Multiple Passages

If you edit a passage while another is open for editing, the new edit dialog
Expand Down
Loading

0 comments on commit 954b0f0

Please sign in to comment.