How to style your WISP panel

WISP provides you with the ability to add your own style sheets to your panel. This can range from changing colors to even keyframe animations from CSS!

Accessing the CSS injector

Navigate to the Admin CP, then navigate to: 1) Settings > 2) CSS Injector

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/8a5d3bcc-ffb4-4b4b-8d0f-250ddc0393bf/css_injector_nav.png

How to find CSS elements on the panel

To find the elements on the game panel, you're going to need to use Inspect Element. Pretty much every browser comes equipped with it (sometimes aliased as Inspect).

You can access this tool by Right-Clicking anywhere on the panel and clicking on Inspect Element.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/994925a0-b662-4043-97f4-1af6e6815bb7/inspect_context_nav.png

Now you're going to want to find out which elements are on which parts of the site. The inspector makes this super easy by simply clicking the little Cursor icon.

This handy tool is the Element Picker. You can now hover over each element, and it'll tell you which one it is. Clicking will navigate to the specific code in your Inspector.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/a4df0fd7-7925-44ef-a3fa-6488eb2815aa/inspect_selector.png

Conclusion

That pretty much concludes how to operate the CSS injector. If you need more information on using CSS, you'll need to learn that yourself on a site like w3schools. However, we'll give you a little snippet of how some CSS looks and how it affects the panel in the image below.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ec2f8ea4-aa7d-4d62-9008-4e89283d4f37/css_injector_saving.png

Adding code to the CSS injector then saving it to apply the changes.

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9a629167-b147-4ef9-8647-0259af4427b0/css_injector_results.png

Results of the changed CSS (enlarge the image to see background better)


How to script the front-end of your panel using JS

JavaScript is a powerful front-end scripting language that allows you to do anything to the front-end pretty much. (Please note to always escape any user inputted strings such as usernames if you make a script for such a thing!)

We cannot tell you about using this injector as the uses are very cast. We can give a couple of use cases, but that's about it.

Accessing the JS Injector

Navigate to the Admin CP, then navigate to: 1) Settings > 2) JS Injector

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0c9d05c8-e7ce-4036-b87b-fe10e63434c0/js_injector_nav.png

Example: Using JS to shape the front-end

You can use the JS injector to change the front-end elements, such as removing/adding a class to a <div> block. In the example below, we will go through finding the element and removing a specific attribute that is hard-coded into the panels' HTML.