Content Styling

popup-js provides numerous quality of life features to make writing popup content as simple as possible.

Reduced Element Formatting

If you want to include a link in your popup content, you can do so using the {a-<href>}[<display text>] syntax.

Example:

...
content: `
    Click {a-https://example.com}[here] to learn more.
`,
...

A button can be defined using the {btn-<class>}[<display text>] syntax.

Example:

...
content: `
    Reset Progress     {btn-reset}[Reset]
`,
...

Non-breaking Spaces

If you want a gap within a content line, simply using multiple consecutive spaces will do the trick, as they automatically get converted to non-breaking spaces if necessary.

Example:

...
content: `
    This sentence           has a large gap.
`,
...

Line properties

The library also provides useful methods for styling an entire line.

A line with a larger upper margin would be defined using the big-margin§<text> syntax.

Example:

...
content: `
    This line has the default margin.
    big-margin§This line has a larger margin than usual.
    This line also has the default margin.
`,
...

You can also make elements within the line align left and right respectively, for example for a settings popup, using the space-out§<element 1><element 2> syntax.

The elements can be text and a button, two buttons, or anything else, however bear in mind you will have to isolate the text in a <span> element if you want both elements to be text.

A practical example is shown below, along with an image of how such popup content would look.

...
content: `
    space-out§Color Scheme{btn-colorSchemeButton}[Toggle]
    space-out§Clear Storage{btn-clearStorageButton red-button}[Clear]
`,
...

Space Out content style showcase

Text Styling

The library also provides a handful of text styling options. All of these are applied using the {<properties>}[<text>] syntax.

Here is a complete list of provided styles:

white
black
red
green
blue
bold
shadow

Examples:

...
content: `
    {red}[This text is red.]
`,
...
...
content: `
    The word {white bold shadow}[banana] is white, bold, and has a shadow.
`,
...

Button Styling

There is also basic button coloring support available, with the Reduced Element Formatting syntax, where the button style is the class. The options are red-button, green-button and blue-button.

Example:

...
content: `
    This is a {btn-blue-button}[Blue Button].
`,
...

Custom Styles

You can add custom styles to parts of the popup content using the Text Styling syntax, with a selector as the style property which you can then pass in the css parameter.

Consider the following example:

new Popup({
    content: `
    This part of the text will have {custom-style}[custom styling].`,
});

Adding a custom style to the isolated part of the content is as simple as:

new Popup({
    content: `
    This part of the text will have {custom-style}[custom styling].`,
    css: `
        .custom-style {
            /* whatever custom styles */
            font-variant: small-caps;
        }`,
});

Find out more about popup selector hierarchy in Custom Popup Styles.

To apply custom styles to an entire line, you can use the Line Properties syntax with the same CSS code as above.

Example:

...
content: `
    custom-style§This entire line will have custom styling.
`,
...

To override default styles, use the method from Overriding Popup Styles.