stranger Posted April 13, 2008 Report Share Posted April 13, 2008 I just finished up modifying the skin for the WebUI ... and here is a screenshot..............................................................I was mainly trying to create something that would actually go with a darker theme...and possibly match my uTorrent program after modifying it......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/?m02wf0zmvz3MULTI-LANGUAGE WEB UI package...http://www.mediafire.com/?mybzzmdju1mInstructions are as follows: ( Close uTorrent and Browser )1) Download original uTorrent WebUI. This can be Multi-Language or Normal...Install2) 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)... Link to comment Share on other sites More sharing options...
GTHK Posted April 13, 2008 Report Share Posted April 13, 2008 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. Link to comment Share on other sites More sharing options...
Ultima Posted April 13, 2008 Report Share Posted April 13, 2008 Making µTorrent black is all a matter of Windows themes. Modifications of the webUI files are, indeed, permitted. Link to comment Share on other sites More sharing options...
jewelisheaven Posted April 13, 2008 Report Share Posted April 13, 2008 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 Link to comment Share on other sites More sharing options...
stranger Posted April 13, 2008 Author Report Share Posted April 13, 2008 Okay I would have had this up sooner but my e-mail server decided to go down last night...Multi-Language WebUI Dark SkinLINK IN FIRST POSTI 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. Link to comment Share on other sites More sharing options...
GTHK Posted April 13, 2008 Report Share Posted April 13, 2008 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? Link to comment Share on other sites More sharing options...
stranger Posted April 13, 2008 Author Report Share Posted April 13, 2008 Actually look up at the post again, I must have been editing it while you posted.. LOL Link to comment Share on other sites More sharing options...
GTHK Posted April 13, 2008 Report Share Posted April 13, 2008 Thanks, do you provide support for your WebUI though? My text is black, I'm sure you know what this means . 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. Link to comment Share on other sites More sharing options...
stranger Posted April 13, 2008 Author Report Share Posted April 13, 2008 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. Link to comment Share on other sites More sharing options...
GTHK Posted April 13, 2008 Report Share Posted April 13, 2008 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. Link to comment Share on other sites More sharing options...
stranger Posted April 13, 2008 Author Report Share Posted April 13, 2008 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... Link to comment Share on other sites More sharing options...
GTHK Posted April 13, 2008 Report Share Posted April 13, 2008 Nah it's fine, you tried/trying . I just wish black arrows would be gray on my system :/. Link to comment Share on other sites More sharing options...
stranger Posted April 13, 2008 Author Report Share Posted April 13, 2008 Updated.... Link to comment Share on other sites More sharing options...
eduardomb Posted April 13, 2008 Report Share Posted April 13, 2008 the text on here stay black, anyone knows why? Link to comment Share on other sites More sharing options...
GTHK Posted April 13, 2008 Report Share Posted April 13, 2008 Changing font color in Firefox works, don't know about doing it in the WebUI itself. Link to comment Share on other sites More sharing options...
stranger Posted April 13, 2008 Author Report Share Posted April 13, 2008 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... Link to comment Share on other sites More sharing options...
GTHK Posted April 14, 2008 Report Share Posted April 14, 2008 Definitely better, still have that white space bug though. And the AMANA theme doesn't let you set font. Is FOUR 08 better/different? Link to comment Share on other sites More sharing options...
stranger Posted April 14, 2008 Author Report Share Posted April 14, 2008 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... Link to comment Share on other sites More sharing options...
jewelisheaven Posted April 14, 2008 Report Share Posted April 14, 2008 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. Link to comment Share on other sites More sharing options...
GTHK Posted April 14, 2008 Report Share Posted April 14, 2008 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? :3And could you overview your method like jewel suggests? I wanna make various themes for others, and a theme for myself. Link to comment Share on other sites More sharing options...
stranger Posted April 14, 2008 Author Report Share Posted April 14, 2008 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... Link to comment Share on other sites More sharing options...
GTHK Posted April 14, 2008 Report Share Posted April 14, 2008 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! Link to comment Share on other sites More sharing options...
stranger Posted April 14, 2008 Author Report Share Posted April 14, 2008 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... Link to comment Share on other sites More sharing options...
jewelisheaven Posted April 14, 2008 Report Share Posted April 14, 2008 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.) Link to comment Share on other sites More sharing options...
stranger Posted April 14, 2008 Author Report Share Posted April 14, 2008 Multi-Language ..implemented SEE FIRST POST FOR UPDATED LINK Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.