Tips & Tricks

Use the navigation bar on the right to help you navigate this document → → →

Contributing Tips

We are accepting user-written tips!

Do you have a tip that you think should be in here, or would be useful to others? Submit your tip in a discussion under the 'Ideas' section and you will be credited for your contribution!

See:

• tips written by @the-wright-jamie for examples of how tips should be written.
• this discussion for how tips should be submitted.

Using your chosen accent color

by @the-wright-jamie

The accent colour that you pick in the system settings for Tab Nine is available to be used in the custom CSS. In order to make use of it, use var(--accent-color) in place of a color.

For example, the following

.Digital {
    background-color: #00000077;
    border-radius: 100px;
    border: 1px solid #ffffff77;
    color: var(--accent-color); 
    height: 5em;
    width: 12em;
    backdrop-filter: blur(20px);
    font-family: DS-Digital;
    font-size: 120%;
}

.Digital h1 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    filter: drop-shadow(0 0 1rem var(--accent-color));
}

will produce a digital clock effect like this:

(requires this font)

Set font family discreetly from browser font

by @the-wright-jamie

Sometimes, you may want to have Tab Nine's UI be different from the sans-serif font you have set in your browser settings. If so, all you have to do is put the following at the top of your custom CSS:

* {
    font-family: "Comic Sans";
}

Change the font family to whatever font you want that you have installed on your system. Google Fonts, and other similar systems, are also supported (this is standard CSS, so whatever you can do with that, you can do with this).

More tips coming soon!

Please feel free to contribute your own tips using the method described above!