Skip to content

CSS Style

Jakub T. Jankiewicz edited this page Jan 1, 2022 · 19 revisions

Custom Properties

.terminal {
    --color: green;
    --background: white;
    --link-color: darkblue;
}

Size

.terminal {
    --size: 1.5;
}

You can change the size depending on the size of the terminal (browser window) using media queries.

See Responsive Font Size

Style just cursor

.cmd-cursor {
    --original-color: white;
}

Check this Codepen demo to see the styling of a different parts of the terminal.

Glow

From version 2.29.0 there is css variable that can be easily used to enable glow effect:

.terminal {
    --color: rgba(0, 200, 0, 0.99);
    --animation: terminal-glow;
    --glow: 1;
}

From version 2.31.0 you don't need to change animation to have glow on the cursor.

See Glow Demo

Using custom properties with formatting

You can use custom properties on a single piece of text that you render using echo.

See Attribute Formatter.

Creating Terminal that fits into 3D image

You can use CSS transform to fit the terminal into any image. An example image of a computer or laptop. Here is a demo that shows how to calculate the matrix needed for transformation.

Clone this wiki locally