Skinning the PIA app?

UltraHumaniteUltraHumanite
in Software and System Updates
The interface of the Settings section of the PIA application is just html and css. I was wondering if anyone had tried to skin it before? I took a quick look at the files and it looks like it's quite easy to modify. Thoughts?

Here is what I got so far. Keep in mind I'm not a UI designer.

image

Comments

  • UltraHumaniteUltraHumanite
    I made another revision. So far everything is working. I'll probably style the check boxes and tweak some other things.
    image
  • KharizKhariz
    Nice! Great idea.
  • UltraHumaniteUltraHumanite
    Here is a short video of the skin in action. Everything is working fine.

    https://vimeo.com/153166206
  • Peter_BrownPeter_Brown
    That;s a alot better than the standard UI.

    I known you posted the video but do you have info on the actual skinning .ie what files need modding and the process you did.

    Also PIA should emply you.
  • UltraHumaniteUltraHumanite
    Peter_Brown said:
    That;s a alot better than the standard UI.

    I known you posted the video but do you have info on the actual skinning .ie what files need modding and the process you did.

    Also PIA should emply you.
    I have done all my modding on OS X so that’s all I can talk about here, I suspect that things are similar on windows but I don’t know.

    Here is a short tutorial:

    Start ‘Finder’ and press Shift+Command+G type the following into the ’Go to the folder:’ window “~/.pia_manager/“ this is a hidden directory.

    You’re now in the ‘~/.pia_manager/‘ directory, locate the ‘pia_tray’ file right click on it and choose ‘Show Package Contents’ from the dropdown menu.

    You’re now inside ‘pia_tray’ navigate to Contents>Resources (while here notice the tray-mac-xxx.png files these are the PIA status bar icons, if you want to modify the look of the PIA status bar icons those are the files you need to edit/replace.

    In the Contents>Resources, settings.html contains the html layout of the PIA’s Settings panel, the designs.css file located in Contents>Resources>css directory is the stylesheet for settings.html those are the two files you’ll need to edit to change how the PIA Settings panel looks.

    To change the dimensions of the PIA’s Settings panel window(the application window that is displayed on on the desktop) you need to edit main.js which is located in Contents>Resources>javascript

    That’s it. If you’re familiar with HTML/CSS the whole process is very straight forward and essentially identical to designing/editing a webpage.
  • Peter_BrownPeter_Brown
    Thank you very much
  • tomewormtomeworm
    @UltraHumanite, nice work! What are your thoughts on making a skin that looks and feels like a Mac app? Consider it a request. I'd definitely use it.
Sign In or Register to comment.