Jump to content

WebUI Dark Skin

stranger

By stranger
in Web API

Recommended Posts

  • Replies 79
  • Created
  • Last Reply
stranger Advanced Member

stranger

Posted
  • Author
Posted

LOL.. you can remove the flags for the normal skin ..LOL

and yes.. The error you got earlier was because there is added code in the index.html for the multi-language file which also references the script.js file in the ML UI. In the normal one the script.JS file is different and the index.html has less code.

@jewelisheaven - I would say that being a .cz site they have adopted the multi-language WebUI to avoid issues. The original WebUI is still available the Stickied thread.

Link to comment
Share on other sites
stranger Advanced Member

stranger

Posted
  • Author
Posted

To specifically answer your question GTHK this code in the index.html...

<script type="text/javascript" src="./lang/langs.js"></script>

..and this part

<body><div id="preload"></div><div id="cover"><div id="msg"><script type="text/javascript"> document.write(WUILang.Loading); </script></div></div><div id="modalbg"></div><div id="dragmask"></div><div id="tadd"> <a href="javascript:Hide('tadd');" class="h"></a><div id="tadd_h"><script type="text/javascript">document.write(WUILang.torrent_add);</script></div><div class="cont fxcaret">
<form action="./?action=add-file" method="post" enctype="multipart/form-data" target="uploadfrm" onsubmit="return CheckUpload(this);"><p /><label>
<script type="text/javascript"> document.write(WUILang.Torrent_file); </script>:</label> <input type="file" name="torrent_file" id="torrent_file" class="Textbox" /><br /> <label></label><input type="submit" value="Add File" id="add_button" class="Button" /></form><hr /><br /> <label>
<script type="text/javascript"> document.write(WUILang.Torrent_URL); </script>:</label> <input type="text" id="url" class="Textbox" /><br /> <label>
<script type="text/javascript"> document.write(WUILang.Cookies); </script>:</label> <input type="text" id="cookies" class="Textbox" /><br /> <label></label><input type="button" id="add_url" value="Add URL" class="Button" onclick="javascript:utWebUI.addURL();" /></div></div><div id="stg"> <a href="javascript:Hide('stg');utWebUI.loadSettings();" class="h"></a><div id="stg_h">
<script type="text/javascript"> document.write(WUILang.uTorrent_settings); </script></div><div id="stg_c" class="fxcaret"></div></div><div id="dlgRss" class="dlg-window"> <a href="javascript:Hide('dlgRss');" class="dlg-close"></a><div id="dlgRss-header" class="dlg-header">
<script type="text/javascript"> document.write(WUILang.RSS_Downloader); </script></div><div id="dlgRss-content"></div></div>
<div id="dlgProps" class="dlg-window"> <a href="javascript:Hide('dlgProps');" class="dlg-close"></a><div id="dlgProps-header" class="dlg-header">
<script type="text/javascript"> document.write(WUILang.Torrent_properties); </script></div><div class="content fxcaret"><fieldset><legend>
<script type="text/javascript"> document.write(WUILang.Trackers); </script></legend> <textarea id="prop-trackers"></textarea></fieldset><fieldset><legend>
<script type="text/javascript"> document.write(WUILang.Bandwidth_sett); </script></legend><div><input type="text" id="prop-ulrate" />
<script type="text/javascript"> document.write(WUILang.Max_upl_rate); </script> (
<script type="text/javascript"> document.write(WUILang.kbs); </script>
): [0: 
<script type="text/javascript"> document.write(WUILang.unlimited); </script>
]</div><div><input type="text" id="prop-dlrate" />
<script type="text/javascript"> document.write(WUILang.Max_down_rate); </script> (
<script type="text/javascript"> document.write(WUILang.kbs); </script>
): [0: 
<script type="text/javascript"> document.write(WUILang.unlimited); </script>
]</div><div><input type="text" id="prop-ulslots" />
<script type="text/javascript"> document.write(WUILang.Number_ul_slots); </script></div></fieldset><fieldset><legend>
<script type="text/javascript"> document.write(WUILang.Seed_while); </script></legend><div><input type="checkbox" id="prop-seed_override" onchange="javascript:linked(this, 0, ['prop-seed_ratio', 'prop-seed_time']);" /><label for="prop-seed_override">
<script type="text/javascript"> document.write(WUILang.Override_default); </script></label></div><div id="lbl_prop-seed_ratio" class="disabled">
<script type="text/javascript"> document.write(WUILang.Ratio_is); </script>: <= <input type="textbox" id="prop-seed_ratio" class="Textbox" /> 
<script type="text/javascript"> document.write(WUILang.or_time_is); </script>:
<select id="prop-seed_time"><option value="0" selected="selected">
<script type="text/javascript"> document.write(WUILang.Ignore); </script></option><option value="5400"><= 
<script type="text/javascript"> document.write(WUILang.nin_min); </script></option><option value="7200"><= 
<script type="text/javascript"> document.write(WUILang.two_h); </script></option><option value="10800"><= 
<script type="text/javascript"> document.write(WUILang.three_h); </script></option><option value="14400"><= 
<script type="text/javascript"> document.write(WUILang.four_h); </script></option><option value="18000"><= 
<script type="text/javascript"> document.write(WUILang.five_h); </script></option><option value="21600"><= 
<script type="text/javascript"> document.write(WUILang.six_h); </script></option><option value="25200"><= 
<script type="text/javascript"> document.write(WUILang.seven_h); </script></option><option value="28800"><= 
<script type="text/javascript"> document.write(WUILang.eight_h); </script></option><option value="32400"><= 
<script type="text/javascript"> document.write(WUILang.nine_h); </script></option><option value="36000"><= 
<script type="text/javascript"> document.write(WUILang.ten_h); </script></option><option value="43200"><= 
<script type="text/javascript"> document.write(WUILang.twelve_h); </script></option><option value="57600"><= 
<script type="text/javascript"> document.write(WUILang.sixteen_h); </script></option><option value="72000"><= 
<script type="text/javascript"> document.write(WUILang.twenty_h); </script></option><option value="86400"><= 
<script type="text/javascript"> document.write(WUILang.tw_four_h); </script></option><option value="108000"><= 
<script type="text/javascript"> document.write(WUILang.thirty_h); </script></option><option value="129600"><= 
<script type="text/javascript"> document.write(WUILang.thirty_six_h); </script></option><option value="172800"><= 
<script type="text/javascript"> document.write(WUILang.forty_eight_h); </script></option><option value="216000"><= 
<script type="text/javascript"> document.write(WUILang.sixty_h); </script></option><option value="259200"><= 
<script type="text/javascript"> document.write(WUILang.sev_two_h); </script></option><option value="345600"><= 
<script type="text/javascript"> document.write(WUILang.nin_six_h); </script></option></select></div></fieldset><fieldset>
<legend>
<script type="text/javascript"> document.write(WUILang.Other_sett); </script></legend><div class="props-spacer"><input type="checkbox" id="prop-superseed" /><label for="prop-superseed">
<script type="text/javascript"> document.write(WUILang.Initial_seed); </script></label></div><div class="props-spacer"><input type="checkbox" id="prop-dht" /><label for="prop-dht" id="lbl_prop-dht">
<script type="text/javascript"> document.write(WUILang.Enable_DHT); </script></label></div><div class="props-spacer"><input type="checkbox" id="prop-pex" /><label for="prop-pex" id="lbl_prop-pex">
<script type="text/javascript"> document.write(WUILang.Peer_ex); </script></label></div></fieldset><div class="aright"><input type="button" id="ok1" value="   OK   " class="Button" onclick="javascript:utWebUI.setProperties();" /><input type="button" id="Cancel1" value=" Cancel " class="Button" onclick="javascript:Hide('dlgProps');" /></div></div></div><div id="dlgAbout" class="dlg-window"> <a href="javascript:Hide('dlgAbout');" class="dlg-close"></a><div id="dlgAbout-header" class="dlg-header">
<script type="text/javascript"> document.write(WUILang.About); </script></div><div class="content"> <b>
Developer</b>:<br />   Carsten Niebuhr (Directrix)<br /><br />
<b>Contributors</b>: (in alphabetical order)<br />   Firon<br />   icleolion<br />   <a href="http://www.ignorantcow.net/">Ignorantcow</a><br />   shawnz<br />   Ultima<br />   Ze Beta Testers<br /><br /> <b>Bug Tracker</b>:<br />   <a href="http://utbugs.leetwebhosting.com" target="_blank">http://utbugs.leetwebhosting.com</a><br />   - Provided and hosted by Asskick</div></div><div id="dlgLabel" class="dlg-window"> <a href="javascript:Hide('dlgLabel');Hide('modalbg');" class="dlg-close"></a><div id="dlgLabel-header" class="dlg-header">Enter Label</div><div class="content fxcaret"> 
<script type="text/javascript"> document.write(WUILang.Enter_label_prom); </script>:<br /> <input type="text" id="txtLabel" class="Textbox" /><br /> <input type="button" id="ok2" class="Button" value="   OK   " onclick="javascript:utWebUI.createLabel();Hide('dlgLabel');Hide('modalbg');" />  
<input type="button" id="Cancel2" class="Button" value=" Cancel " onclick="javascript:Hide('dlgLabel');Hide('modalbg');" /></div></div><div id="dlgDelTor" class="dlg-window"> <a href="javascript:Hide('dlgDelTor');Hide('modalbg');" class="dlg-close"></a><div id="dlgDelTor-header" class="dlg-header">
<script type="text/javascript"> document.write(WUILang.Remove_torrents); </script></div><div class="content"> 
<script type="text/javascript"> document.write(WUILang.Rem_torrents_prompt); </script>?<br /> <input type="button" id="ok3" class="Button" value="   OK   " onclick="javascript:utWebUI.doRemove();Hide('dlgDelTor');Hide('modalbg');" />   <input type="button" class="Button" id="no1" value="   No   " onclick="javascript:Hide('dlgDelTor');Hide('modalbg');" /></div></div>
<div id="rs"></div><div id="sel"></div><div id="sc"><ul><li onclick="javascript:SelectSE(this, 'http://www.mininova.org/search/?utorrent&search=');" class="se_act"><div>Mininova</div></li><li onclick="javascript:SelectSE(this, 'http://search.bittorrent.com/search.jsp?Submit2=Search&query=');"><div>BitTorrent</div></li><li onclick="javascript:SelectSE(this, 'http://thepiratebay.org/search.php?q=');"><div>The Pirate Bay</div></li><li onclick="javascript:SelectSE(this, 'http://torrentspy.com/search.asp?query=');"><div>TorrentSpy</div></li><li onclick="javascript:SelectSE(this, 'http://isohunt.com/torrents.php?ext=&op=and&ihq=');"><div>IsoHunt</div></li><li onclick="javascript:SelectSE(this, 'http://bt.point-blank.cc/?search=');"><div>PointBlank</div></li><li onclick="javascript:SelectSE(this, 'http://google.com/search?q=');"><div>Google</div></li></ul></div><div id="lng" style="display: none;"></div><div id="al"><div id="ermsg"></div><a href="javascript:hd('al');" class="h"></a></div><div id="t"><a id="mnu_add" href="javascript:utWebUI.showAdd();" title="Add Torrent..."><div id="add"></div></a><div class="TB_Separator"></div><a id="mnu_remove" href="javascript:utWebUI.Remove();" title="Remove"><div id="remove"></div></a><div class="TB_Separator"></div><a id="mnu_start" href="javascript:utWebUI.Start();" title="Start"><div id="start"></div></a><a id="mnu_pause" href="javascript:utWebUI.Pause();" title="Pause"><div id="pause"></div></a><a id="mnu_stop" href="javascript:utWebUI.Stop();" title="Stop"><div id="stop"></div></a><div class="TB_Separator"></div><a id="mnu_rss" href="javascript:utWebUI.showRSS();" title="RSS Downloader"><div id="rss"></div></a><a id="mnu_settings" href="javascript:utWebUI.showSettings();" title="Settings"><div id="setting"></div></a><div class="TB_Separator"></div><a id="mnu_lang" title="Language" href="javascript:ShowLangs();" title="Language"><div id="lang_selector" style="background:transparent url(./images/en.png) no-repeat center;"/></div></a><div id="sb"><a id="mnu_search" href="javascript:ShowSearch();" title="Search"><div id="search"></div></a><input type="text" class="Textbox" id="query" onfocus="javascript:Hide('sc');" /></div></div>
<table id="maincont" cellpadding="0" cellspacing="0"><tr> <td class="uicell"><div id="CatList"><ul><li id="_all_" onclick="javascript:utWebUI.switchLabel(this);" class="sel">
<script type="text/javascript"> document.write(WUILang.All); </script> (<span id="_all_c">0</span>)</li><li id="_dls_" onclick="javascript:utWebUI.switchLabel(this);">
<script type="text/javascript"> document.write(WUILang.Downloading); </script> (<span id="_dls_c">0</span>)</li><li id="_com_" onclick="javascript:utWebUI.switchLabel(this);">
<script type="text/javascript"> document.write(WUILang.Finished); </script> (<span id="_com_c">0</span>)</li><li id="_act_" onclick="javascript:utWebUI.switchLabel(this);">
<script type="text/javascript"> document.write(WUILang.Active); </script> (<span id="_act_c">0</span>)</li><li id="_iac_" onclick="javascript:utWebUI.switchLabel(this);">
<script type="text/javascript"> document.write(WUILang.Inactive); </script> (<span id="_iac_c">0</span>)</li><li><hr /></li><li id="_nlb_" onclick="javascript:utWebUI.switchLabel(this);">
<script type="text/javascript"> document.write(WUILang.No_label); </script> (<span id="_nlb_c">0</span>)</li></ul><div><ul id="lbll"></ul></div></div></td> <td class="uicell"><div id="HDivider"></div></td class="uicell"> <td class="uicell"><div id="List"></div></td></tr><tr> <td class="uicell" colspan="3"><div id="VDivider"></div></td></tr><tr> <td class="uicell" colspan="3">
<div id="tdetails"><ul id="tabbar"><script type="text/javascript">tdTabs.draw();</script></ul><div id="tdcont">
<div id="gcont"><table cellpadding="5" cellspacing="2" width="100%"><tr><td colspan="3" class="Header">
<script type="text/javascript"> document.write(WUILang.Transfer); </script></td></tr><tr><td width="33.3%">
<script type="text/javascript"> document.write(WUILang.Time_el); </script>: <span id="et"></span></td><td width="33.3%">
<script type="text/javascript"> document.write(WUILang.Remaining); </script>: <span id="rm"></span></td><td width="33.3%">
<script type="text/javascript"> document.write(WUILang.Share_ratio); </script>: <span id="ra"></span></td></tr><tr><td>
<script type="text/javascript"> document.write(WUILang.Downloaded); </script>: <span id="dl"></span></td><td>
<script type="text/javascript"> document.write(WUILang.Down_speed); </script>: <span id="ds"></span></td><td>
<script type="text/javascript"> document.write(WUILang.Down_limit); </script>: <span id="dll"></span></td></tr><tr><td>
<script type="text/javascript"> document.write(WUILang.Uploaded); </script>: <span id="ul"></span></td><td>
<script type="text/javascript"> document.write(WUILang.Ul_speed); </script>: <span id="us"></span></td><td>
<script type="text/javascript"> document.write(WUILang.Ul_limit); </script>: <span id="ull"></span></td></tr><tr><td>
<script type="text/javascript"> document.write(WUILang.Seeds); </script>: <span id="se"></span></td><td>
<script type="text/javascript"> document.write(WUILang.Peers); </script>: <span id="pe"></span></td><td>
<script type="text/javascript"> document.write(WUILang.Wasted); </script>: <span id="wa"></span></td></tr>
<tr><td colspan="3" class="Header">
<script type="text/javascript"> document.write(WUILang.Tracker); </script></td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.Track_URL); </script>:</td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.Track_status); </script>:</td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.Update_in); </script>:</td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.DHT_status); </script>:</td></tr><tr><td colspan="3" class="Header">
<script type="text/javascript"> document.write(WUILang.General); </script></td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.Save_as); </script>:</td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.Tot_size); </script>:</td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.Created_on); </script>:</td></tr><tr><td colspan="3">
<script type="text/javascript"> document.write(WUILang.Comment); </script>:</td></tr></table></div>
<div id="FileList"></div><div id="lcont"></div></div></div></td></tr></table><iframe name="uploadfrm" id="uploadfrm" src="" width="0" height="0" scrolling="no" frameborder="0" onload="US();"></iframe>
<script language="javascript" type="text/javascript">
document.getElementById("add_button").value = WUILang.add_button;
document.getElementById("add_url").value = WUILang.add_url;
document.getElementById("ok1").value = WUILang.ok1;
document.getElementById("ok2").value = WUILang.ok2;
document.getElementById("ok3").value = WUILang.ok3;
document.getElementById("Cancel1").value = WUILang.Cancel1;
document.getElementById("Cancel2").value = WUILang.Cancel2;
document.getElementById("no1").value = WUILang.no1;

document.getElementById("mnu_add").title = WUILang.mnu_add;
document.getElementById("mnu_remove").title = WUILang.mnu_remove;
document.getElementById("mnu_start").title = WUILang.mnu_start;
document.getElementById("mnu_pause").title = WUILang.mnu_pause;
document.getElementById("mnu_stop").title = WUILang.mnu_stop;
document.getElementById("mnu_rss").title = WUILang.mnu_rss;
document.getElementById("mnu_settings").title = WUILang.mnu_settings;
document.getElementById("mnu_search").title = WUILang.mnu_search;
document.getElementById("mnu_lang").title = WUILang.mnu_lang;

I will not cover the script.js as I am not fluent enough in script.. However when the call is made to the script file for various aspects within the index.html part as shown above...You start getting error message in the the Error console and the WebUI is not shown correctly...Making the skin invalid for the Normal UI. Therefore you have to support each differently.. Having two packages for each UI type.

*NOTE - safest things is to use the two different templates. Little to no effort for editing the Normal after constructing Multi-Language.

Link to comment
Share on other sites
stranger Advanced Member

stranger

Posted
  • Author
Posted

Well they do, however when they code Safari for windows, just like the differences you get when coding for FF and IE.. You are going to have a browser that works just like it does on a MAC.. So then you get differences in how it emulates scripts and CSS, as well as the fact that even with one screwed up tag, that will show in E and even FF, it will cause things to not show as they should. Safari actually rates the highest in compliance on the Acid3Test, yet since it is a new browser for Windows coders to consider there will be changes that have to be made to make sure that end user accessibility for MAC users who run Safari are considered. In some cases things that have not been considered or double-checked before because everything seemed fine... They do use a WebKit...lol but I think it may be different from what you may be thinking. With the ML UI I have a few dialogs that will not come up and The buttons do not work, however when I right click on the torrent it will work from the menu available, and it shows up correctly.

Safari is actually a really good browser.

Link to comment
Share on other sites
stranger Advanced Member

stranger

Posted
  • Author
Posted

Okay if this is in the input boxes and you are using a normal windows theme the text will be the system colors, not the color of the text indicated within the UI, this will be the same color text that you will see when logging into a site. Also if you have any colors or text settings set in your browser that over rides normal websites this will take the place of the coding in the CSS...

I can't duplicate the problem...and the image you are talking about (col.png)is used in the properties menus only. It is a plus and then a minus. Double check your files and see that they have been updated with your changes. Make sure your restart uTorrent, and clear the cache. It sounds like your browser isn't clearing the cache and temp files when you are doing the changes. You have to sign into the webui again...because of all the cleared info.

* some notations that you would assume are pointing to certain parts of the pages that are being viewed..do not necessarily mean the areas that they describe... True of any code you read...

Link to comment
Share on other sites
GTHK Advanced Member

GTHK

Posted
Posted

It's a very nice skin, and I'm going to keep it, just wanna make sure everything is ok. Plus, if no one else does so before me, I hope to make a few different colors for others to use, and a second color scheme for personal use in addition to this one. My mistake though on what I posted (I did clear the browser though, odd..), however, what's with the white area in the top left? It looks weird.

inconsistencyrw5.th.png

Ignore the two green pointers on the right, it's related to my mistake, I don't use the WebUI often, though I do use it. And even then, I've never actually touched the preferences.

Link to comment
Share on other sites
stranger Advanced Member

stranger

Posted
  • Author
Posted

Okay that white area is made out of about three or four individual little image files...I deleted mine out of the folder to remove it.. What it is originally intended to do is give you the effect of a dashed line that looks like a drop down tree.. If you remove these files..They will not show up at all...I kept the plus, and minus...For expanding the Advanced tree, however. The white check boxes and input fields will be whatever color you have in your system. If you code it and someone chooses to use it with another color scheme that it does not work with then, it is their problem. These areas you are not going to be able to actually change unless you get lot more advanced in the code.. or start changing settings on the users system...So, you kind of have to take that into account..

Link to comment
Share on other sites
jewelisheaven Advanced Member

jewelisheaven

Posted
Posted

It's been my experience black-on-black is coded as a "no-go" in Firefox. Therefore the text is grey. As far as hexcodes.... I thought in all cases where applicable its RGB? See what would be REALLY cool is if in JS or CSS you can just assign a variable to these "system colours" if you will and not have to muck with then 20-odd instances of #131313. Instead you set the foreground=#f0f0f0 background=131313 highlight=CCCCCC</wishful thinking>

Link to comment
Share on other sites
GTHK Advanced Member

GTHK

Posted
Posted

What I meant was, I'm documenting from the normal UI, what hex code changes what. I wanted to know if that would apply to the multilang UI.

OT: Also, anybody else having trouble with Fx .14 update? I'm seeing my posts twice, and was only able to read jewelisheavens post by going to the "post a reply" section where it lists the latest posts. Some posts are also missing from the forum.

Link to comment
Share on other sites
stranger Advanced Member

stranger

Posted
  • Author
Posted

Okay what I did for the CSS files was take the Multi-Language...Code all the borders, and colors..I used Find and Replace after I had thoroughly examined the file to make sure I did not screw up something I would have to track down later... I Dreamweaver CS3, it will find anything your type, all instances... Like if I type in ' background-color : ' It will show all instances of that text in the file.. Then I can check them all find out what they are, by a combination of changing them to a Bright color to stand out.. and by using what understanding I have of it.. Then I can use the same dialog to find all instances and replace the text... The reason i chose the ML UI was because it had all the coding for both...and to my surprise with changes in that skin..I created skins that enabled more compatibility in the Normal UI, Like that of the ML. I thought that was cool. ( though Safari is still left out :( ) You only have to change the index.html for the normal UI. This is the method I used. Anything else would be up to you.

As far as what HEX code changes what, the only two things I can tell you is that the UI is black and white...Using shades of each.. Therefore looking up the appropriate color number... like #000000 = black, #ffffff = white. You can also use the call for ' border ' to search or find all instances of the input. I really suggest going through each one. Once you think you have it all worked out get someone to test it for you.

EDIT: I forgot your looking at mine.. not the original...o not exactly black and white anymore..LOL.. Going with color number will only give you a color change of the way I changed the UI, ( minus your images ) so it really kind of stops you from becoming fluent with the files enough to be more creative on your own.. Some stuff I ripped out of the original - still there but hidden with my numbers...You will get this I know you will.

The cold hard truth of the matter is this GTHK, this is how to code..its work... ;)

OT: Also 2.0.0.14 has updated just fine.. when i tried to get to your post to respond today I could not..But with my experiences in the past I would say that it was MAINTENANCE...

Backup on the server or something.. code updates or fixes ..that can make various seemingly unconnected things timeout or not redirect.. Good to see it back..

@jewelisheaven - You are right RGB is the current compliant, but this UI was created with HEX which was used previous to. I chose to stay with the original structure as I could do all and both, plus convert. I wanted to change as little as possible with the original code.

Link to comment
Share on other sites
jewelisheaven Advanced Member

jewelisheaven

Posted
Posted

Cool. Regarding the RGB it's still technically that even though it's in hex, #XXYYZZ right, where each hex byte is from 00 to FF.

Man FF 2.0.0.14 already? It must be a security patch. Yup JS crash :( Man I just updated too, lol.

Thanks again for the overview stranger. :D I definitely like this turn-around time of wanting some darker WebUI, then doing it over a couple days. It definitely fits in with my Radium-themed (green on black) uT forum theme choice that's for sure.

Link to comment
Share on other sites

Archived

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

Go to topic listing
×
×
  • Create New...