WebUI Dark Skin

[jewelisheaven]

I get

The µTorrent WebUI does not seem to be installed. Click here to try to install it, or see the guide for more details.

:/ I must have broke my WebUI lol. Note the custom, original webui.zip you made works, so I imagine it's something about the hooking for the languages?

[stranger]

LOL.. sorry ... Must be changes in the CSS files as well... I used the original current multi language and updated the CSS and image folder with flags... I'll take a quick look but I am not going to promise anything tonight... I did remove the flash ui components as well..

The reason I removed the two flash components was because I get a script error that is "slowing down Adobe Flash and may result in browser locking up"... When I was going over the files in Dreamweaver, ( this happens to be because of a bad action script within the SWF of some sort )

Here is the link with the flash component...just in case

LINKS UPDATED ... SEE FIRST POST...

LINKS UPDATED APRIL 14, 2008

[jewelisheaven]

Hey, it loads now Popup menu for the languages and everything. BUT only the toolbar up top and the column headers are showing black. Perhaps you didn't override all occurrences of the white/greyish background colouring.

For the record, I DO NOT have flash installed so I don't think that's the ultimate cause. FYI incase you were doubting your coding.

[stranger]

OMG.. You are right.. LOL

PLEASE REDOWNLOAD from one of the links I had one of my five WebUI files crossed when I was prepairing it and did not get in the right CSS file..Sorry..

LINKS UPDATED ... SEE FIRST POST...

[jewelisheaven]

Schweet. Not bad for 26 hours of realtime. Now at your leisure if you wanted to tidy those changes to the CSS up for others to provide a template for more styles I think that's it.

Or leave it as-is, heh. I'm still hoping we'll see the sanctioned update sometime soon.... not sure how thoroughly "incorporated" it will be, but this is definitely good practice for whoever is looking at making this customizable.

Small placement glitch which I'm assuming must be in the original but is more prominent with White-On-Black... for configurations with > 8 labels, you see them "peek" out from behind the details pane of the WebUI. If I counted correctly, right about #24 is where you can click on the label on a 1280x960 resolution.

*Whoops... if you click the language button, it shifts the whole UI down the length of the "pop up" menu.... something isn't being called correctly anymore

[articuno1au]

Hey Stranger,

The interface is looking quite nice so far and you have certainly been hussling with development, but I cannot get your WebUI to work properly.

When i use the UI, i cannot see the detailed view of my torrents, also the left hand divider doesn't fill out properly.

http://i227.photobucket.com/albums/dd108/articuno1au/webui.jpg <- screenshot of the problem.

(p.s. the names of the torrent work properly, i have just covered them over )

Good job so far

[stranger]

Well I am actually surprised that you have it running in IE7... I tried it in IE8 Beta 1 ( emulating IE7 ) and it would not even connect...

The modified UI that is in this thread is compatible with Firefox 2.0.0.13, and seems to be working properly in Opera 9.27...Safari and IE compatibility issue are solved by downloading the particular version for your browser in the FAQ thread, I believe for the WebUI, each one is different. I believe that this may be the actual problem you may be having...

Updating the UI should be an easy task and I should have something for you by tonight... The details problem I have actually had since the first WebUI I had installed.. SO on that I am not for sure...if its the browser or the code.( that was with Firefox )

I am pretty big on having cross-browser/platform compatibility to anything I do, and I will accomplish this providing I have the tools I need...and I believe the supplied fixes will probably allow me to do just that.

EDIT: UPDATE RELEASED TODAY FOR MULTILANGUAGE, if I read the thread correctly it will now be cross browser/platform compatible...Which means that I will now have to re-work the ML UI to reflect the new Dark SKin UI... The last one actually took me a total of four hours work...26 hours of working through various issues on different systems, so I would imagine that this will be accomplished for everyone sometime this evening... I am planning on getting rid of the EN only one and replacing both files with the new compatible one...The drop down menu should be fixed as well as this was more than likely a CSS issue on my part.

LINKS WILL BE DEAD UNTIL THIS MOD IS IMPLEMENTED... Thank You for your patience...

LINKS UPDATED ... SEE FIRST POST... APRIL 14, 2008

Who wants to be the first guinea pig.. from testing this UI with all the BIG FOUR browsers... and for the skin?

* EXTRA FOLDER IN TREE when I compressed... FIXED

* ALL LINKS REMOVED .. ONE LINK now in first post

Thus far I have found the new UI to be compatible with Firefox 2.0.0.13, Opera 9.27, Safari 3.1 ( 525.13 ) for Windows ( exception of 'LOADING...' dialogs ), but I cannot check IE7 as I have IE8 beta 1 installed, which has actually been able to load the WebUI when emulating IE7.

[articuno1au]

I know how to force IE7 to open it . Simply refresh the page 3 times and it will eventually push through.

With regards to what browser we should be using, i'm happy with whatever you suggest. I have Opera 9.27, Firefox 3 beta and IE8 Beta all installed on the my computer. If you need anything tested out, just post it here and ill come get it

I checked with my IE8 beta, the issue seems to be related to the beta (confirmation for the win).

So far:

IE8 Beta 1= Fails

IE8 Beta 1 (7 emulated) = Fails

IE7 = Works.. Kinda

Firefox 3 Beta 5 = Fails

Firefox 2.5 = Fails (although this mite be unique to me)

Opera 9.27 = Works

[stranger]

Actually you may want to check it again because I just started up my system after shutting it off for awhile ( OMG..lol ) and I made sure that I put in the 'HTTP://localhost:8080/gui' properly... When I hit refresh it, loaded... I did make a change to Internet options earlier allowing active content to run in the files on my computer earlier...and upon load I got a small message at the top of my browser stating that the Intranet settings where now turned off...So I am guessing there was a problem with something...but it runs now...Make sure you aren't blocking any form of script, like the NOSCRIPT extension.. Also checking to make sure you are up too date with the most recent version of Java would be a good idea too.. ( If using Sun Java systems, Control Panel applet will allow you to check for updates... ) Not saying that it will definitely be the cause but a good idea to check..

Your version of Firefox, is it 2.0.0.5, or 2.5? I am up to date with mine and at version 2.0.0.13, and I think that double checking it with 3 beta 5 is probably pointless as I have seen more than one instance where the beta version will not properly load certain websites and various web applications...But I will..lol

I am back in Beta 5, uhmm which is working!

[articuno1au]

Wow, I am completely flabberghasted o.O

I checked with all the above browsers and only opera worked properly. I'm running the latest version of Java on both computer, scripts are NOT disabled in IE, and the intraweb settings option is an irrelevancy for this (but being a good bug buddy i checked with both options). I'll go and check all of them again now that i have more time to do it properly.

And i'll redownload the UI in case i buggered it up or something O.o

<EDIT>

I redownloaded the webui from the new link you provided and it works great sorry about that o.O I wonder what i had done wrong.

It's working on all of them

P.s. I love the interface should probably mention that at some point

</EDIT>

[jewelisheaven]

With the new download, the pop up is indeed fixed.

Now being the lame coder I am I accomplished making the multiple styles show up in guest.html with multiple

<link href="./stable.css" rel="stylesheet" type="text/css" title="LIGHT UI"/>

<link href="alternate stylesheet" rel="stylesheet" type="text/css" href="./darkstable.css" title="DARK UI">

... but I don't know what the @import "./style.css" block does... it didn't work when I duplicated the import block for my "./darkstyle.css" I'm presuming you know what this means.

Edit: I will say the MAIN reason I started with guest.html .. 968 bytes

[stranger]

I will have to follow up on this as I have never loaded the guest.Html but I did edit the background and border colors...

I am a little unsure about what it is your trying to accomplish exactly, but nevertheless will load the guest.html and see if I can't figure it out... are you trying to make a switchable color theme?

Loaded and mine appears to be showing correctly...but...if it isn't in yours then let me know.

Stable.css actually is needed for anything that is inside the torrent area or ( stable ).

Style.css controls all of the rest.

Guest.html uses background color and border colors

images folder takes care of all UI images, table images, toolbars, flags, arrows, toolbar backgrounds and so on, and all of these are indicated within the Style.css for various parts of the UI. Some script would probably come into play and a link to switch and reload the UI. This would include the original style.css having pointed to a folder with all of the original image files inside. Without this portion of the UI considered you will still get a dark theme with white CSS elements. Then you have the issue of trying to actually switch the background and border colors..So if I am catching on here I would say that though it may seem simple what you are trying to do may indeed become a little complicated...doable but with a few advanced skills.. When it comes to writing script I am at a loss.. I have reference books and can read some but not a fluent scripter, yet..

@articuno1au - Thank You very much for helping me out with all of that...Too cool .. I am glad you like it and that it is working for ya..

[jewelisheaven]

Oh I know it's not simple. I'm trying ... in the limited capacity I know how, to help your theme can be the first of MANY alternate WebUI themes. Basically what I'm thinking is... people can either 1) package their own style including any changes they make to style.css stable.css or the icons like you did... and 2) pop it into a zip as say .\DARK 3) open up existing guest.html and index.html and include

THIS CODE

to get it to load as a switchable style OR 1) download some unofficial "this is the most customized WebUI ever including all mods made to date including multilanguage support multiple css styles AND the kitchen sink"

Indeed the changes I listed get the browsers to recognize the theme but as you said only the changes to stable take effect. I can't get the style.css mod to work I know of less scripting than you do. I used the top three results for http://www.google.com/search?q=alternate+CSS+styles to get that code

[GTHK]

Switchable styles would be nice, I have a few colors I like. My coding sucks though, I didn't get to the CSS portion of the book I was reading, and I need another book .

[stranger]

@jewelisheaven - Dont feel bad about looking it up on the net, its one of the most used resources to date. Take MSDN for example...Lots of coding references..

I think you could rethink and simplify this method however.

* Using index.html, guest.html, style.css, stable.css, and the image folder as templates..

Recreate your style, except index.html would become ( style name ).html, ( style name )guest.html, ( style name )style.css, ( style name )stable.css, and ( style name ) image folder.. and so on.

* In this method any call made to the load CSS, HTML, and Images would have to be changed to the proper file name/path, and you could load it as.. http://localhost:8080/gui/( style name )index.html. The reason that I asume this will work is that the uTorrent program is setup like a server, a server can serve a default page, ( index.html ) along with any other page in the home directory ( much like the way that the flash version of the WebUI works, by calling flash.html ) Therefore, if these files are left to call the needed .js files in their location no change should need to be made besides calling the specific directories ( /( stylename )images/image.png, and asking for the right default file ( style name )index.html, (style name )guest.html; in which method, you would code into your files the call to the appropriate CSS file ( style name )style.css, ( style name )stable.css...and so on.

* The script files would need to be gone over to make sure that no changes would have to be made to them as well, but I think that this method would allow you to work around loading multiple style sheets and having issues when calling the particular style in question.

* This would allow a user to take files downloaded as a style, un-zip, or unrar them, then simply drag and drop them on the webui.zip, updating the compressed file. No other files would be disturbed if done correctly and you would always have your default, with notification if any of these files are about to be over-written.

This was kind of why I was wondering, and while yet my idea may sound good in theory...as a solution, it needs to be tried tested and approved...

I think that it is a good idea, however malicious coding, and/or standards for such files would need to be set and moderated, which of course would indeed require man-power and willingness from uTorrent Forums and involved parties... Though it may not be hundreds a day or something it would be something that I think would need to be looked after. I, at this point, am not sure of the vulnerability factor of the WebUI or if any exists but it is a thought.

@GTHK - I will try and see if I have a book on CSS stylesheets, or find one of good recommendation to you...

[articuno1au]

CSS is a fairly easy one, though i will admit it confused the fork out of me while i was at Uni. I find the easiest way to learn is to get a hold of a working style sheet (.css file) and then compare the website (what it looks like), source code and the css together. It should be fairly easy to see patterns.

If you find something in the CSS you don't understand then Google it I've got an IT degree and Google is still my home page and i still use it at least once a day for work things i have forgotten

Assuming my web server is still running

http://pontings.homedns.org

http://pontings.homedns.org/style.css

Look at those and see if you can't learn some stuff, and on the upside you can shoot questions at me if you need the help

(and sorry to the mods if i'm not allowed to do the above o.O)

[stranger]

Looks like an update is up for the WebUI again...

LOL.. Okay time for some sleep.. LOL ..

EDIT: The recent updates have prompted me to do this.. So I stayed up and got this done..NOT TESTED..

LINKS UPDATED AND NOW IN FIRST POST

Instructions are as follows:

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

2) Download my file from the link above...extract to a location or folder of choice.

3) Select all files extracted from DarkUI Experimental.zip 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:8080/gui/darkindex.html and darkguest.html

6) Test UI, if working; THOROUGHLY - Post here with your results..

*BIG Four Browser test would be nice too.

This is an experimental trial of an idea presented above by jewelisheaven.

Hopefully this will be a nice work around for updates to the Language files and for the WebUI itself until major updates are performed.

Hope to be reading your feedback soon..

[GTHK]

Downloaded the UI in the forum, downloaded this an' stuck 'em together. The method was interesting, I was hoping to use the files as a template with my limited coding, but it doesn't work in Firefox, and whatever version IE I have installed (what's the latest stable?). Can't get a pic, DEP is being triggered, something is really wrong with paint.exe on my computer . A lot of text is missing though, the torrent category names (not numbers), labels in the general pane (details still appear though).

[stranger]

Okay I will check it and I appreciate the heads up.. Meanwhile if you dont mind...can you edit out the MILE long error console.. after I check it its cool... But just take forever to scroll down .. Thanks..

[GTHK]

Just waiting for your confirmation .

[stranger]

Where did you download your most recent version of the WebUI at and was it ML or regular?

Okay using the last link in the last post of the ML UI, I get universal support for updating the archive with the files. All four browsers, for both normal UI 'http://localhost:PORT/gui'

and 'http://localhost:PORT/gui/darkindex.html'. Everything seems to work well, and I am getting no errors, besides a few un-related to this mod.. Three to be exact.

I used WinRAR which is free to add the files to the normal webui.zip ( Multi-Language ).

I am now going to check the regular WebUI.. and come back with results.

ERROR DUPLICATED... Incompatible with normal Web UI...

* So I therefore deduce that separate skins would need to be made for single language WebUI packages.

* Multi-Language compatibility confirmed... Which I think I had rather support anyway, given the fact that it is currently cross browser/platform compatible and almost ready for Safari..which I can still control by right clicking the torrent..

I actually believe it would be easy to support the single language WebUI, a few small changes within the index.HTML file would more than likely easily change the call to the missing JS file and basically make the changes that would make it compatible.

ALL LINKS HAVE BEEN UPDATED AND SUPPORT FOR NORMAL AND MULTI-LANGUAGE WEB UI HAS BEEN ADDED. METHOD OF SKINNING WEB UI HAS CHANGED.

April 16, 2008

Further development of the skin..will not be pursued. All files are open for use as templates, and mods.

[GTHK]

I love this UI . Thanks!

Would I be able to just find/replace the color codes and edit the images? Looking for a quick way to do things. Have any recommended books for HTML/XHTML/XML/CSS? I WAS relearning HTML, as well as poking at CSS, but then something happened to the book I was using...

Um, link broken?

[stranger]

Okay...

To make a short tutorial...

You will need five parts to the mod..same for both Multi-Language and Normal.. I would say using my Dark UI as Templates

1) (style name)images folder

2) (style name)index.html

3) (style name)guest.html

4) (style name)style.css

5) (style name)stable.css

Short Tutorial...

Now the first thing that needs to be done is to create and/or modify all needed images for your skin. I would use the /darkimages folder as a template but in this case I have actually removed some images, so you may want to consult the regular WebUI for these images. You will find several that you are able to recognize as to there purpose, others will have to be modified by trial and error. You may also reference the CSS Stylesheets as to which image is being called for what purpose ( advanced knowledge of CSS is suggested ). You will need an image creation/editing software, and filetypes/names should be adhered two. If it calls for a JPG then use a JPG, and keep the name the same. That way it can easily be editing by find and replace command in your editor.

Once you have your images, you will need to edit the (style name)index.html to load the (style name)style.css and (style name)stable.css, (style name)stable.css will also need to be edited with an addition to the background and border colors. This enables the new index.html and guest.html that will be called to load the new style colors, fonts and so on.

(style name)style.css will be the longest of the two CSS files to edit. Colors are issues in HEX format ( #181818 for example ) a color conversion or reference chart would be an advisable tool. Once you begin playing with the color numbers, you will realize that borders, font, and background will be the only entries to watch for. However, there are several of these throughout the file. Changing font is okay, but I would be careful about using custom fonts as not all people have these fonts, they would have to be installed into their system for them to be able to be used. You will also need to do a Find and Replace command on the location of the images folder. Find.. ' /(stylename)images '( or originally ' /images ' ) and replace with ' /(your style name)images '. This will automate several entries saving you lots of time.

(style name)stable.css will also have backgrounds, and border colors that will need to be altered.

That pretty much covers it, there is no easy way to do it, and you do have to get to know the individual files to be able to properly edit them. Make sure you create two versions using the two different templates. (style name)Index.html will differ in the two versions. Therefore you will need to change the HTML file for the other version, make the second package from the files and upload. I recommend making screenshots and testing the skins before finalizing them. The method in which all of this can be done can be used ( probably ) for any change that may come to the WebUI and any future developments, however the templates from my skin may become outdated, therefore using these files from the original WebUI available t the uTorrent site would be the most advisable to do.

I hope this helps...It would be cool to see what this may start for the WebUI...Wish you luck!

[GTHK]

Any recommended image editing freeware? Paint is unreliable on my system for some reason :/. And thanks for the tutorial, I might have something up tomorrow (less then 2 hours till tomorrow for me that's why , gonna study the files now).

[jewelisheaven]

Thank you muchly for that This definitely sounds like a great template for others to follow.... WebUI in all the colours of the rainbow: COMING SOON!!

Not bad for 2 days work.. Could I suggest a notation in the OP "SEE HERE http://forum.utorrent.com/viewtopic.php?pid=322201#p322201 for an overview of what I did... and so can you"