Archived

This topic is now archived and is closed to further replies.

stranger

WebUI Dark Skin

Recommended Posts

I just finished up modifying the skin for the WebUI ... and here is a screenshot..

webuimlff.jpg

webuimlss.jpgblank-1.gifwebuimlos.jpg

................................webuimlie8.jpg............................

I was mainly trying to create something that would actually go with a darker theme...and possibly match my uTorrent program after modifying it...

us.jpg

...If anyone is interested in this mod, I will share it...Permitting that I have permission from uTorrent and all concerned parties...This modification is the current WebUI version as of this posting date...

LINK UPDATED : April 14, 2008

* Most recent version of Multi-Language WebUI

* Compatible with IE7 & 8b1, Firefox 2.0.0.13( shown above ), & Beta 5, Safari (Windows - partially ), and Opera

* FULL WEBUI.zip no longer supported. Implementation of multiple skins through the use of updating the original WebUI, with separate support for Multi-Language, and Normal WebUI. Enable easier updating, multiple skins, and less updates to the skin package files themselves.

NORMAL WEB UI package...

http://www.mediafire.com/?m02wf0zmvz3

MULTI-LANGUAGE WEB UI package...

http://www.mediafire.com/?mybzzmdju1m

Instructions are as follows: ( Close uTorrent and Browser )

1) Download original uTorrent WebUI. This can be Multi-Language or Normal...Install

2) Download the appropriate file from the links above...extract to a location or folder of choice. ( WinRAR can used and is free )

3) Select all files extracted from the link, then drag and drop them onto the original webui.zip in the uTorrent Application Data folder.

4) Start your browser ( fresh start, cleared temp files and cache ), Start the uTorrent program.

5) Navigate to HTTP://localhost:PORT/gui/darkindex.html and darkguest.html. Normal UI Skin can found by navigating normally to 'HTTP://localhost:PORT/gui'. Other skins can be added and called in this manner.

To switch default skins you may extract the index.html file and rename it to whiteindex.html and rename (style name)index.html or darkindex.html in this case to index.html. This will be the skin that loads by default when logging in with a username and password. Then drag and drop the files back onto the webui.zip which will update it. This may also be done for the guest.html, which will make access to the guest account skinned the same as your default.

All original code concerning the function of the WebUI is intact and full credit goes to the original author(s)/contributor(s)...

Share this post


Link to post
Share on other sites

COOOOOOOOOOOOOOOOOOOOOOOOOOOL. Please share, I like black. I believe WebUI mods are ok, there are plenty of other things that take advantage of the web interface. How did you make µT black though? I don't know if that'd be ok.

Share this post


Link to post
Share on other sites

Making µTorrent black is all a matter of Windows themes. Modifications of the webUI files are, indeed, permitted.

Share this post


Link to post
Share on other sites

Not surprisingly those buttons "pop" more on the black background.. I wonder if you only changed the CSS, or was it a full re-code of the UI.... if the former is the case perhaps there can be a "WebUI style thread" a la the "multi language thread" where people can customize the WebUI :D

Share this post


Link to post
Share on other sites

Okay I would have had this up sooner but my e-mail server decided to go down last night...

Multi-Language WebUI Dark Skin

LINK IN FIRST POST

I did not do a complete recode of the WebUI. What I have done is used Corel Draw to edit a few images, replaced the original favicon, I have removed a few images as I seen them unnecessary to the new look, and I have edited the style.css, stable.css, and one color number in the guest.html. I used my limited knowledge of writing code, and image editing to achieve what you see here. I am not sure what the modifications mean for users of other languages, as I have not tested it out on any other system other than my own. I would say that it would be easily transferred over to any language, by simply taking out the images folder and two CSS files which have been edited and update the original webui.zip file for your system, ( you would need to delete the original images folder ) but like I said I am not completely sure about it. The one color number which changed in the guest.html is the background color so that it would match the rest of the design.

Anyway there it is, pretty straight forward... Enjoy :)

Oh almost forgot, inquiry about the Black version of uTorrent Program above ( second image ). This was achieved by using UXTheme Patcher to allow for the the use of visual style files ( .msstyles ) and the style I am using is called AMANA or FOUR 08.. When you apply a style ( which is well done ), it will actually skin all UI components which rely on the original windows shell; thus the effect; I have actually used this to create several custom skins for several programs including Firefox. You can find this style at Customize.org or Deviantart.com. UXTheme Patcher is availabe but I don't have a link to it right now and this will have to be updated with the release of Windows XP SP3. I also made a few changes to highlight colors and changed all of the fonts to AvanateGuard Medium LT.

The Toolbar, tab bar, and status icons came from the skins section. Simple was the name of the tab bar and status, and Noble Black was used for the Toolbar. However the three files along with my new flags.bmp have been modified with very specific inversion, to achieve the altered appearance which allows them to look the way they do instead of the way they originally appear.

Share this post


Link to post
Share on other sites

I'll test it. How'd you make µT black though? Do you use a hacked Windows DLL and a theme? Or some customization program?

Share this post


Link to post
Share on other sites

Thanks, do you provide support for your WebUI though? My text is black, I'm sure you know what this means :P. Maybe because my computer doesn't have that skin yet? There's also white space where there are no torrents listed in the main window, same for files window, files are highlighted black, but empty areas are white.

Share this post


Link to post
Share on other sites

Let me do some checking on mine.. I may have missed something...Would you have a screen shot of yours by any chance? That would help..

EDIT: Make sure after you put the file in to clear all data or restart your browser and uTorrent then reload the WebUI... Your system will cache all of the files and the program will load several files as well that will have to be dumped after copying in the new file.

Share this post


Link to post
Share on other sites

buggybuggyshoechickennuby0.th.png

Edit: Just got the theme, it is a theming issue, well the text is still wrong though, if you could fix it for others that'd be neat, plus I'm not entirely sure I wanna keep this theme, even though I do like it, there are some issues.

Share this post


Link to post
Share on other sites

Well this I guess would be a problem that I will have to work on...The background and font colors are all indicated in the CSS for the WebUI, I thought this would take care of it for the style to be applied and viewed correctly but I guess not. Odd though on my system changing the text and background colors in Firefox seems to have no effect on it, as well as changing back to windows original theme... so at the moment I am a little baffled.

Really sorry for wasting anyone's time here...

Share this post


Link to post
Share on other sites

I actually do know why... I have settings set in my browser and in my theme for windows that automatically indicate the font color. I have updated the file links and greatly appreciate the input on everyones behalf along with your patience in working out the bugs in the style. Give it a good look over and anything you find please post here so that I may address the problem ..

Updated see first post...

Share this post


Link to post
Share on other sites

Definitely better, still have that white space bug though. And the AMANA theme doesn't let you set font. Is FOUR 08 better/different?

Share this post


Link to post
Share on other sites

Actually I believe setting the font can be done by overriding fonts with your browser or by editing the CSS style sheets with the WebUI.zip.

EDIT: AMANA and FOUR 08 are the same... If you look at your start menu you will see tht it has FOUR 08 at the top.. To change these settings for fonts you must right click on your desktop and select Properties > Advanced > and then under each selection that allows for text or font changes, you may indicate another font and change various colors. The only font that will not change is the text within some of the dialogs for Windows, in which if you know the system well enough will not make any difference but they are black and hard to read. Darker themes with dark backgrounds ( welcome change for your eyes ) would be...AXONKOLOR, Grounded, and GSM. Several other visual styles actually change the background colors for windows shell but these I believe are the darkest and of the ones I have found some of the best solutions.

The whitespace I believe can be fixed but I have to see, if I remember correctly there is one entry that will change the background color of this area.. but I have to see.

LOL.. back with another update I hope..I'll see if Dreamweaver can shed some light on the subject...

Share this post


Link to post
Share on other sites

While I'm sure those who know what's what with the web design of this UI, if you overview your method for customizing it may spur more creativity like I mentioned above ;) (Thereby creating the: How to skin WebUI 101)

Additionally since this isn't much of a graphical change like the multi-language webui it won't balloon the size as much... the 14 language file is ~ 3x the size(mainly due to the display flags)... whereas even if there's integration with the (common) style selector with includes for cchanged GFX I wouldn't imagine the size of the WebUI needing to be much increased.

Awww, I was hoping to get an "evolution of skinning" by making diffs, you took down the old ZIPs.

Share this post


Link to post
Share on other sites

The problem I had with the Windows theme was the black arrow pointing down buttons that I couldn't see. I know they're there, but not good enough for me.

If you can get an all black WebUI I will be really ****ing happy. I'll look at those other Windows themes too. Know any Windows themes that are heliotrope/lavender based by any chance? :3

And could you overview your method like jewel suggests? I wanna make various themes for others, and a theme for myself.

Share this post


Link to post
Share on other sites

You may try this file...ALL OTHER LINKS WILL REMAIN UNTIL A FINAL MOD HAS BEEN COMPLETED...

A detailed instruction on the modifications made will take quite some time to do, and I will have to find the time to look into the modifications needed to include a multi-language integration. An understanding of how to write CSS styles, and modify the existing ones, will be needed as well as an understanding of how to create and or edit images. I used two programs to help me make the modifications, Adobe Dreamweaver CS3 and Corel Draw Photo-Paint X4... Other programs may be used, for instance Notepad and WordPad or any text file editor can be used to modify the CSS files, but as far as advanced image editing I am not for sure what programs would be compatible for the necessary changes you or anyone will be wanting to make. I will have to actually indicate which images are used for what, which I actually used a trial and error method for my modifications...Changing one at a time. It takes the two of these methods to change the UI much like writing a webpage or editing a social network profile page. Only two areas, lines of code were added to the original at this point, which where color indications for font and one for a background color. Not a lot has really changed in the original code except several color number changes.

Anyway...

Share this post


Link to post
Share on other sites

I have no idea what you mean exactly. I just want to alter the colors, pointing to the correct files would be enough. I have a... limited understanding of coding. Unless it's more complicated than that? Even if it is, I'd still like to take a crack at it.

Just looked, WebUI is looking GREAT! Just some minor hard to see colors in the settings dialog, but still see able, and I don't even use the settings dialog so it's not a problem for me.

I can't show you a pic though, paint wont open. In fact I think testing attempting to test Outpost caused some problems, system restore it is!

Share this post


Link to post
Share on other sites

I am pretty sure you can do it.. :)

I do have a question however...for jewelisheaven...

In the integration of the other languages, does it implement the Flash UI available only .. because that would well, number one through the skin method completely out the window.. and The two CSS files can be moved into the webui.zip easily and over written to accomplish the coding mod except the guest.html file, which has its own background and font colors that have to be edited. All of the remaining script files (.js) remain untouched in this modification, so technically the only thing left to do would be to delete the images folder and then update the zip file with the modified images folder. Should easily integrate. Providing that the modder starts with the multi-language UI.

Submit first off for Multi-Language in next post...

Share this post


Link to post
Share on other sites

If you hadn't noticed it I am referring to http://forum.utorrent.com/viewtopic.php?id=34079 ;) I don't think a full "everything i did" is necessary, but you did mention "I changed two files here"... Now that [noparse][ol][li][/li][/ol][/noparse] makes numbers you could go step by step 1) think of a color scheme palette 2) open up style.css 3) change XXXX lines to your colours....

I wouldn't imagine YOU need to change anything from the multi-language ZIP, as that's separate... but if you want to integrate your design as the alternate colouring in the CSS through those <link rel="alternate stylesheet" type="text/css" href="localdir\dark.css" title="DARK UI">in the HTML I think it'd be straight forward?

Edit: As you can see for the multilang they added \lang and included the relevant flag, for the drop-down in \images . It sounds like you would need to make separate \DARK and put all changed files in there to make the skinning easier. This would include the button images, as well as the style.

(I hope you're not asking me about coding... I don't do web. I haven't since I used HomeSite 4 a decade ago.)

Share this post


Link to post
Share on other sites