Thread: New rutorrent webui theme with install instructions

*Update: Looks like rutorrent has decided to feature my theme in their latest release 3.2!

So i finally broke down, i just couldn't handle how ugly the rutorrent webui. It's a great web front-end for rtorrent with great features but since i spend so much time looking at it it should atleast look descent. I went ahead and developed my own theme and hope that others will benefit from it. It's called "Oblivion", Here is a screenshot to wet your appetite:





Here is a quick disclaimer... I developped this theme myself and you'll notice i gave it the TI feel so we'd all feel at home. One thing to note, i used a fair amount of CSS3 and only tested it on Safari 5 and Chrome (Firefox should be fine...but any others....) in OSX.

*Update: I've fixed the issues with Chrome for PC, it's now confirmed for Safari 4,5 (OSX), Chrome(OSX,PC), Firefox (OSX,PC).

1. Download the following file:
Download

2. Unzip the directory and place the folder into your plugins directory, usually: (your www root)/rutorrent/plugins/
The final path should then be: (your www root)/rutorrent/plugins/oblivion/
Make sure to delete the darkpal theme if you are using it.

3. The theme should work right away but you'll notice a couple issues:

• The scrollbars won't match the theme
• The Download/Upload meters wont have the right color scheme
• The CPU/HDD meters wont have the right color scheme

We can fix these so the theme looks just like the screenshot but you'll need to do a couples little hacks.

1. To get the scrollbars working and the dl/ul color matched you need to add the following 3 lines to /rutorrent/css/style.css
   
   Code:

   .meter-value-start-color { background-color: #E05400 }

   Code:

   .meter-value-end-color { background-color: #8FBC00 }

   Code:

   ::-webkit-scrollbar {width:12px;height:12px;padding:0px;margin:0px;}

2. To get the HDD color meter scheme matching we need to edit the following file: /rutorrent/plugins/diskspace/init.js
   Once you've opened the file you need to change lines 17 and 18 to:
   
   Code:

   plugin.prgStartColor = new RGBackground("#9ADC00");

   Code:

   plugin.prgEndColor = new RGBackground("#F90009");

3. To get the CPU color matching we need to edit the following file:
   /rutorrent/plugins/cpuload/init.js
   Once you've opened the file you need to change lines 87 and 88 to:
   
   Code:

   plugin.prgStartColor = new RGBackground("#9ADC00");

   Code:

   plugin.prgEndColor = new RGBackground("#F90009");

For those of you who would like to continue the customization and are a little web saavy you can have your tracker icons appear in the left hand menu (like in the screenshot) but doing the following:

1. Copy the trackers favicon ico file to the following directory: /rutorrent/plugins/oblivion/images/trackers/
2. Now open the following file: /rutorrent/plugins/oblivion/style.css
3. Go to the very bottom and you'll see where the trackers i've already done are, here is the formula for adding yours, assuming the tracker is mytracker.com you would add the following line to the end of the style.css file:
   
   Code:

   #mytracker\.com {background: transparent url(./images/trackers/mytracker.ico) no-repeat 3px center;}

   Make sure you have the "\" before the period in the id

I hope you enjoy it and i'd love any feedback or comments.

May i ask you which os you are running?

I'm running OSX

Hey, why dont u submit this to the guys over at rutorrent. Im sure they will accept it and add your theme to the theme plugin. Personally, i would use this theme and think many others would do the same.

U done a great job here, but the only thing that they may say to u is to try and get it to work without making changes to the other plugins. I dont know much about css, php or what not, so im not even sure if thats possible or can be done, but im sure there is a way somehow. If u dont want to then i understand.

Im gonna test this out and let u know what i think. Again, great job and im loving the tracker icons. Brilliant!


EDIT : Ok so i tested this theme out on one of my servers and i can say i like it a lot. The only thing that i didnt like was how big the 'Loading' image was when refreshing rutorrent. Other then that i think my original diskspace & cpuload plugins meshed quite well with the theme. Im gonna use this for awhile and will report back any info. Anyway, here is my screenshot of this theme in use on my server :

Here is a screenshot from the theme rendered in Chrome on a PC:



Mike, thanks for the info! I'm reducing the size of the loading text as we speak :)

So this might not bother anyone else but the blue from the favicon that appears in the address bar got too annoying... Here is a replacement if you want it to match the look of the theme:

Preview:


Instructions: Replace the file /rutorrent/favicon.ico with the following file:
http://dl.dropbox.com/u/3731320/favicon.ico

This looks like a nice & cool 3D dynamic theme for rtorrent.. Hope, someday, I can get this type of theme for utorrent too.. :P

Hey lesbleus, how do you get the favicon of the trackers? I mean that small logo on near the address bar? I try to right click copy but it can't be done as there is no copy function. If there is a way, it would be awesome :)

This is great, my only complaint is that the greens aren't exactly the same and I'm not a huge fan of the toolbar or the orange in the diskspace bar, but I'll change that myself.
But, when changing the color of the dl/ul bars you can just edit the colors in the stable.css file instead of adding more lines in style.css


EDIT: Also, when you view rutorrent's settings and go to the BitTorrent tab, some of the text is black on black. Can you tell me where to change text colors?