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!
Go to the Admin Panel , then navigate to 1) Administration -> 2) Settings > 3) CSS Injector
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.
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.
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.
Adding code to the CSS injector and then saving it to apply the changes.
Results of the changed CSS (enlarge the image to see the background better)
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.
Go to the Admin Panel , then navigate to 1) Administration -> 2) Settings > 3) JS Injector
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.
Just like in the CSS injector segment, we will use the Inspector to locate the specific element we want to change.
1) Activate element picker > 2) Select the element > 3) Find a value to target