Best Practices for Configuring Custom CSS

You have the option to modify the Speedtest Custom test interface using the Custom CSS editor. We recommend that you make changes one at a time, and that you use the Preview CSS button to view and verify your changes before you Save & Publish your test.

When modifying your test’s CSS, we recommend that you only modify stylistic properties like `color`, `background-color`, `font-family`, etc. Much of the layout and gauge animations are dependent on other styles throughout the app. While you are able to edit anything within the gauge through the Custom CSS editor, modifying anything other than stylistic properties may result in the test not performing as expected.

Any CSS you add will be scoped to `.stc-wrapper`, though you do not need to target .stc-wrapper. For example:

This will work:

.test {

background: red;

}

This will not work:

.stc-wrapper .test {

background: red;

}

The following are the main classes used to style the running test. The color and background-color of most of these can be controlled via the configuration UI.

Wraps test components:

.test {}

Optionally modify the test background while the test is being performed: