Skip to content

Commit

Permalink
docs: Proof-read the styling docs, following PR #2562
Browse files Browse the repository at this point in the history
  • Loading branch information
claremacrae committed Jan 17, 2024
1 parent 1873b8e commit 8b28ed9
Show file tree
Hide file tree
Showing 2 changed files with 19 additions and 6 deletions.
9 changes: 7 additions & 2 deletions docs/Advanced/Styling.md
Original file line number Diff line number Diff line change
Expand Up @@ -121,6 +121,10 @@ The CSS `:has` selector is available with Obsidian installer version 1.1.9 and n

**Grouping rules** will add a `data-task-group-by` attribute to the query container, e.g. `data-task-group-by="due,scheduled"`.

## Buttons

See [[How to style buttons]] for a variety of ways to style the Edit and Postpone buttons in Tasks query results.

## Custom Statuses

Task statuses are represented by a few data attributes, all set on the `task-list-item` `LI` element:
Expand All @@ -134,7 +138,7 @@ These attributes can be used to style tasks according to their status, with the
## Limitations of styling

- The CSS classes and data attributes described here are **not available for markdown in Source and Live Preview modes**.
- Specifically. the CSS classes described here are applied to:
- Specifically, the CSS classes described here are applied to:
- Reading mode,
- Tasks query blocks in Reading and Live Preview modes.
- Styles **cannot access any automatic scheduled date** that is created if the [[Use Filename as Default Date]] option is enabled.
Expand All @@ -158,6 +162,7 @@ The following additional components have the following classes:
> - `tasks-group-heading` was introduced in Tasks 1.6.0.
> - `plugin-tasks-query-explanation` was introduced in Tasks 1.19.0.
> - `tasks-postpone` was added in Tasks 5.3.0.
> - Styling of the Edit and Postpone buttons was changed in Tasks X.Y.Z: see [[How to style buttons]].
## CSS Examples

Expand Down Expand Up @@ -377,7 +382,7 @@ The following organizes the task structure into a 3-line grid, on which:

- the description is in the first line,
- and the various components are on the second,
- the urgency, backlink and edit button are, if displayed, on the third.
- the urgency, backlink, edit and postpone buttons are, if displayed, on the third.

<!-- snippet: resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-plugin-grid-layout.css -->
```css
Expand Down
16 changes: 12 additions & 4 deletions docs/How To/How to style buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@ publish: true
## Motivation and assumptions

In Tasks results, by default each task is displayed with two buttons &ndash;
one to edit the task, and one to postpone the task, using corresponding icons.
one to [[Create or edit Task|edit]] the task, and one to [[Postponing|postpone]] the task, using corresponding icons.
In the current version of Tasks they look they this:

![Task buttons with default style](../images/tasks-buttons-default.png)

At least they look like this on Windows 11 -
icons may appear slightly different on different platforms..
icons may appear slightly different on different platforms.

If you don't like how these icons look, this guide shows how you can modify their appearance.

Expand Down Expand Up @@ -61,7 +61,7 @@ you should choose characters from Unicode 6 that are more widely available.

## More style, please

If you want to make the buttons look more like real buttons and give them some color, this is also possibe, like in [this CSS snippet](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-stylish.css):
If you want to make the buttons look more like real buttons and give them some color, this is also possible, like in [this CSS snippet](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-stylish.css):

<!-- snippet: resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-stylish.css -->
```css
Expand All @@ -88,6 +88,8 @@ This example snippet result in the follow style:

## Back to the roots

This section shows how to recreate the pre-Tasks X.Y.Z appearance of the Edit button.

You can also use your own graphics instead of existing unicode characters, like in [this example CSS snippet](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-svg.css):

<!-- snippet: resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-svg.css -->
Expand Down Expand Up @@ -120,7 +122,9 @@ The CSS snippet above shows the buttons with a similar look as in earlier versio

When using graphics, it is also guaranteed that the icons look the same on all platforms.

And finally, if you prefer simple text-based buttons which would more like links, then [this CSS snippet](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-text.css) shows how to do it:
## Text-based buttons

And finally, if you prefer simple text-based buttons which would look more like links, then [this CSS snippet](https://github.com/obsidian-tasks-group/obsidian-tasks/blob/main/resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-text.css) shows how to do it:

<!-- snippet: resources/sample_vaults/Tasks-Demo/.obsidian/snippets/tasks-buttons-text.css -->
```css
Expand All @@ -144,3 +148,7 @@ And finally, if you prefer simple text-based buttons which would more like links
The CSS snippet above results in the following style:

![Task buttons with text style](../images/tasks-buttons-text.png)

## Related pages

For details on styling tasks with CSS, see [[Styling]].

0 comments on commit 8b28ed9

Please sign in to comment.