WonderPen User Manual

Appearance

Custom CSS ​

Custom CSS lets you adjust fonts, colors, backgrounds, spacing and other styles in WonderPen. It also works with export formats that support CSS. Basic CSS knowledge is required; if the built-in appearance and theme settings meet your needs, start with those.

Note

The app’s interface structure may change in the future, which could cause some custom CSS to stop working.

Create, Enable and Edit Schemes ​

Open Settings → Advanced → Custom CSS to manage schemes:

Custom CSS scheme list
  1. Click Add, then enter a Title and CSS code.
  2. Click Save to continue editing, or Save and Close to return to the list.
  3. Check the scheme in the list to apply it to the interface. Uncheck it to disable it while keeping its code.

To change an existing scheme, click the edit button on the right of its row. Saving an enabled scheme updates the interface; there is no need to uncheck and recheck it.

You can enable multiple schemes at once. Drag the handles on the left to change their loading order. When rules have equal priority and set the same property, the later rule generally wins.

If Add has a lock indicator, check the in-app information and plan comparison for availability.

Example: Change Sidebar and Memo Backgrounds ​

Create a scheme named “Soft Sidebars” and enter this code:

css
[data-role="main-page-frame"] {
  /* Left sidebar background */
  --wp-left-panel-bg: #fee;
  /* Right sidebar background */
  --wp-right-panel-bg: #efe;
  /* Memo background */
  --wp-memo-bg: #efe;
}

The screenshot omits the comments, but the style rules are the same:

Edit the Soft Sidebars scheme

After saving and enabling the scheme, the main window’s left sidebar background turns pale red, while the right sidebar and memo backgrounds turn pale green.

Enabled scheme: a pale red left sidebar and pale green right sidebar and memo

[data-role="main-page-frame"] selects the main window’s interface frame. The three names starting with --wp- are CSS variables controlling the left sidebar, right sidebar and memo backgrounds. See Built-in Theme Styles for more variables and their default values.

Import, Export and Delete Schemes ​

Click Manage below the scheme list to open the management window:

Select schemes to export or delete
  • Export: select one or more schemes, then click Export to save a .wpcss file for backup or transfer to another computer.
  • Import: click Import and choose a previously exported .wpcss file. To apply an imported scheme to the interface, return to the scheme list and check it to enable it.
  • Delete: select the schemes to remove, click Delete, and confirm. To stop using a scheme temporarily, simply uncheck it in the scheme list.

Checkboxes in the management window select schemes for export or deletion. They do not change which schemes are enabled.

Style Exported Documents ​

Create CSS schemes for exported documents here too. In the Export window, choose a format that supports CSS, such as HTML, PDF, Image or EPUB, then select a scheme under Custom CSS. Schemes used only for export do not need to be enabled in the settings list.

The interface and exported documents have different structures: the main-window selector in the example above does not apply to exported text. Refer to Built-in Default Document Styles when writing export styles, and check the preview or exported file for your chosen format.

Find Selectors and Troubleshoot ​

Use developer tools to inspect the target element. Prefer meaningful data-role attributes and CSS variables over generated class names; these attributes and variables may also change between versions.

If a style does not take effect, first check that the code is saved, the CSS syntax is valid, and the selector matches the target. Then check the settings for its intended use:

  • Interface styles: make sure the scheme is enabled in the settings list. If schemes interfere with each other, disable them one at a time to identify the cause.
  • Export styles: make sure the scheme is selected in the export settings for your chosen format, then check the preview or exported file. You do not need to enable the scheme in the settings list.

For more examples, see Custom CSS in the WonderPen Wiki.