Trailpad
Trailpad is a controller overlay for OBS that's easy to install and customize, and specialized for fighting game streamers and content creators.
Adding Trailpad to OBS
1. Add a Browser source to your scene.2. Enter this as the URL:
https://chrisdejoya.github.io/Trailpad/3. That's it!Tip: Alt-dragging the bounding box handles allows you to trim the margins, making it easier to work with in your scene.Tip: Set your controller to XInput/PC mode for best compatibility.
Basic Customization
Right-click on the overlay and select 'Interact' to start customizing. Left or right-click on the buttons and d-pad to activate them for editing.
| Double-click on Button | Type to edit button text |
| Right-click on Button | Select colors for background and text |
| ↑↓←→, d-pad | Move Up/Down/Left/Right |
| Shift + ↑↓←→ | Adjust Width/Height |
| [] | Increase/Decrease Corner Roundness |
| Shift + [] | Increase/Decrease Font Size |
| Esc | Reset to Defaults |
| Del | Hide the Selected Button |
| Home | Unhide All Hidden Buttons |
Button & Text Colors
Right-click on a button to open the color palette. You can assign colors to both the button background and the font.
Button colors can be customized by setting their background color and text color properties in the Custom CSS field in OBS.Try using this example to give Trailpad a 2XKO-themed color scheme..joystickHead,
.btn[data-btn="A"],
.btn[data-btn="B"],
.btn[data-btn="X"],
.btn[data-btn="Y"],
.btn[data-btn="RB"],
.btn[data-btn="RT"] {
background: #171717 !important;
color: #CEEC73;
outline: 4px solid rgba(255, 255, 255, 0.1);
outline-offset: -4px;
}.btn[data-btn="View"],
.btn[data-btn="Menu"],
.btn[data-btn="LB"],
.btn[data-btn="LT"],
.btn[data-btn="LS"],
.btn[data-btn="RS"] {
background: #242424 !important;
color: #cccccc;
outline: 4px solid rgba(255, 255, 255, 0.05);
outline-offset: -4px;
}
Light and Dark Arrows
The arrow images can't be change directly but can be swapped out with dark versions..btn[data-btn="Up"] { background-image: url("images/up-dark.svg"); background-size: 80%; }
.btn[data-btn="Down"] { background-image: url("images/down-dark.svg"); background-size: 80%; }
.btn[data-btn="Left"] { background-image: url("images/left-dark.svg"); background-size: 80%; }
.btn[data-btn="Right"] { background-image: url("images/right-dark.svg"); background-size: 80%; }
Recoloring the Trail
Add this line to the Custom CSS using whatever color you want, or set it to transparent to hide the effect.:root { --trail-color: #FF5F1F }
:root { --trail-color: #transparent }
No Joystick Input Display
You can block button inputs from being displayed on the joystick by adding this Custom CSS. Change the background color, width and height to whatever you want:.joystickHead {
background: #202020 !important;
color: transparent !important;
transform: translate(-50%,-50%) scale(1) !important;
width: 80px; height: 80px;
}
Save & Load Layouts
Saving and loading layouts is coming soon!In the meantime, feel free to download and run Trailpad as a local file if you need to have configurations for multiple games.Trailpad is provided as unobfuscated code for personal use. Please respect my rights as a creator!
Custom CSS Object References
| Joystick Head | .joystickHead { Insert properties here } |
| Color Trail | :root { --trail-color: #yourcolor !important } |
| A Button | .btn[data-btn="A"] { Insert properties here } |
| Up Button | .btn[data-btn="Up"] { Insert properties here } |
| Down Button | .btn[data-btn="Down"] { Insert properties here } |
| Left Button | .btn[data-btn="Left"] { Insert properties here } |
| Right Button | .btn[data-btn="Right"] { Insert properties here } |
| B Button | .btn[data-btn="B"] { Insert properties here } |
| X Button | .btn[data-btn="X"] { Insert properties here } |
| Y Button | .btn[data-btn="Y"] { Insert properties here } |
| LB Button | .btn[data-btn="LB"] { Insert properties here } |
| RB Button | .btn[data-btn="RB"] { Insert properties here } |
| LT Button | .btn[data-btn="LT"] { Insert properties here } |
| RT Button | .btn[data-btn="RT"] { Insert properties here } |
| LS Button | .btn[data-btn="LS"] { Insert properties here } |
| RS Button | .btn[data-btn="RS"] { Insert properties here } |
| View Button | .btn[data-btn="View"] { Insert properties here } |
| Menu Button | .btn[data-btn="Menu"] { Insert properties here } |
Feature Roadmap
| Saving/Loading Presets | Export and load layouts as .CSS |