DualSense (PS5) Skin for GamepadViewer.com

DualSense Skin.css

/* -- PS5 Skin for GamepadViewer | Created by CrazyGrape -- 
HOW TO USE IN OBS:
1. Go to GamepadViewer.com and generate a URL (make sure to USE THE XBOX SKIN or leave the skin blank)
2. Generate your URL once the settings are correct and copy it to your clipboard
3. In OBS, create a new browser source
4. In the URL Screen, paste the link copied from GamepadViewer.com
5. Set the width to 807 and the height to 651
6. Paste the contents of this CSS file into the Custom CSS field
7. Click Done.
8. Enjoy the skin! */
body { 
    background-color: #000000; 
    background-color: RGBA(0, 0, 0, 0); 
    margin: 0 auto; 
    overflow: hidden; 
} .controller.xbox{
    background: url(https://i.imgur.com/fJIyBwn.png);
    width: 807px;
    height: 651px;
    margin-left: 0;
    margin-top: 0;
} .xbox .sticks {
	width: 367px;
    height: 100px;
    left: 220px;
    top: 333px;
}.xbox .stick {
    background: url(https://i.imgur.com/nXaGdI2.png);
    width: 100px;
    height: 100px;
} .xbox .stick.pressed {
    background-position: -102px 0;
} .xbox .stick.right {
    top: 0;
    left: 267px;
} .xbox .abxy {
    width: 181px;
    height: 181px;
    left: 573px;
    top: 178px;
} .xbox .button {
    background: url(https://i.imgur.com/DVqDSsJ.png);
    width: 58px;
    height: 58px;
} .xbox .button.pressed {
  	background-position-y: -59px;
	margin-top: 0;
} .xbox .a {
    background-position: 0 0;
    left: 61px;
    top: 123px;
} .xbox .b {
    background-position: -59px 0;
    left: 123px;
    top: 62px;
} .xbox .x {
    background-position: -118px 0;
    left: 0px;
    top: 61px;
} .xbox .y {
    background-position: -177px 0;
    left: 61px;
    top: 0px;
} .xbox .arrows {
    left: 195px;
	top: 140px;
    width: 416px;
    height: 57px;
} .xbox .quadrant { 
    display: none; 
} .xbox .back, .xbox .start {
    background: url(https://i.imgur.com/YJRVQxC.png);
    width: 27px;
    height: 57px;
    opacity: 0;
} .xbox .start {
    background-position: 27px 0;
    float: right;
} .xbox .dpad {
	width: 144px;
    height: 144px;
    left: 71px;
    top: 196px;
} .xbox .face {
    background: url(https://i.imgur.com/hCmzXWK.png);
    position: absolute;
    opacity: 0;
} .xbox .face.up {
    background-position: 0 -68px;
    width: 52px;
    height: 63px;
    left: 46px;
} .xbox .face.down {
    background-position: -54px 63px;
    width: 52px;
    height: 63px;
    left: 46px;
    top: 81px;
} .xbox .face.left {
    background-position: -108px -68px;
    width: 64px;
    height: 52px;
    left: -1px;
    top: 47px; 
} .xbox .face.right {
    background-position: -175px -68px;
    width: 63px;
    height: 52px;
    left: 81px;
    top: 46px;
} .xbox .bumpers {
    width: 620px;
    height: 35px;
    left: 93px;
    top: 114px;
} .xbox .bumper {
    background: url(https://i.imgur.com/2YssqRT.png);
    width: 110px;
    height: 35px;
    opacity: 0;
} .xbox .triggers {
    width: 619px;
    height: 108px;
    left: 94px;
} .xbox .trigger {
    background: url(https://i.imgur.com/LsxmGBD.png);
    width: 111px;
    height: 108px;
    opacity: 0;
} .xbox .trigger.right {
    background-position: -113px 0;
	transform: rotateY(0);
}
/*
The general design of the DualSense (tm) controller, as well as the PlayStation (tm) logo, are the intellectual property of Sony.
Vectorized design referenced in the images linked above: copyright (c) CrazyGrape 2021
This work is licensed under a Creative Commons Attribution 3.0 United States License. The terms of this license are available at https://creativecommons.org/licenses/by/3.0/us/
*/

How did u fix the wrong readouts? My Buttons are scrambled and my right stick always points upwards.
EDIT: I could fix it with "remap buttons" but not for the d-pad

How did u fix the wrong readouts? My Buttons are scrambled and my right stick always points upwards.
EDIT: I could fix it with "remap buttons" but not for the d-pad

There are two methods you can use, one is to install DS4Windows and use that, it should map properly but then gets recognized as an xbox controller on the computer so may display improper button icons along with a few other side effects. The other method is to install vjoy and UCR (I'd recommend using Jayraydee's PS5 setup if you want to go the vjoy route). The latter method works with fewer side effects, but also means you end up with two 'controllers', one virtual (the dpad) and one physical, after which point you have to add the dpad as a second controller in OBS. I currently don't have a CSS file for the standalone dpad overlay, but if you want to mess around with that before I get around to it, feel free to do so. DS4Windows is probably the easiest if you want it working ASAP, and was what I was using when I first put this exact CSS file together.

You can also follow any updates I make with the controller at https://github.com/CrazyGrape/crazygrape.github.io/tree/gh-pages/gamepadviewer-skin_dualsense, and this gist will probably end up abandoned

Is there a possibility that you could make one for the red dualsense controller?

Hey, i'm having trouble altering the skin you have made and have tried everything i could. I've got all the single assets done and uploaded on Imgur, similar to you but can not get the Controller to show up properly inside OBS. Could you maybe help me?

Hey, i'm having trouble altering the skin you have made and have tried everything i could. I've got all the single assets done and uploaded on Imgur, similar to you but can not get the Controller to show up properly inside OBS. Could you maybe help me?

I wrote this thing a while ago and it may have broken as the gamepadviewer site updated. I'll need more information, also make sure all of the images are direct hyperlinks ending in ".png" or similar (when you click them, it should show you the image directly and not a full imgur webpage).
Does the controller show up properly when un-modified?

It seems like the hyperlink was the problem. Had it linked to the imgur webpage instead. Thank you for your help! Now there are just some minor things like a bit of stick drift to the side but i should figure that out soon.

Thank you for the fast reply, saved my evening with that because i spend like 8 hours on the design itself. :=)

Hello! I saw there's no cosmic red skin and went on and created 1 for myself. Here's my css link. You can check my other repo if you want to alter the colors.
https://lilmegumax.github.io/cosmic_red_dualsense_skin.css

I really love this Dualsense Overlay but i want to ask is its possible to add the function that the PS button and the Touchpad show inputs aswell?
Besides that i have no complaints

I really love this Dualsense Overlay but i want to ask is its possible to add the function that the PS button and the Touchpad show inputs aswell? Besides that i have no complaints

I'm not sure if that is possible. Gamepadviewer has likely changed pretty significantly in the past ~2 years since I made this, and I'm surprised it still works honestly. I'll take a look to see if those buttons can be added easily and, if so, update the files in the main repo for this project. Thanks for reaching out!

I'm not sure if that is possible. Gamepadviewer has likely changed pretty significantly in the past ~2 years since I made this, and I'm surprised it still works honestly. I'll take a look to see if those buttons can be added easily and, if so, update the files in the main repo for this project. Thanks for reaching out!

Hi it's me again I just wanna say I added Touchpad and PS Button support myself and it works perfectly fine, I uploaded the code for it here: https://drive.google.com/file/d/1XqZ02O30NWn6gCBA3eRaQIP5d_H8ebSC/view (I credited myself as the person who added Touchpad and PS Button Support and you can update the main repo to include this version of the project)

Just here to say thanks for the skin <3