Custom Tomato look/theme

Discussion in 'Tomato Firmware' started by boteeka, Jan 3, 2008.

  1. boteeka

    boteeka LI Guru Member

    Hi everyone!

    I was wasting my time messing around with the custom theme-ability of Thomato, and surprisingly :biggrin: I come up with a new theme which IMO is quite pleasant to the eye. I decided to share with you the result of my work.

    You can download the necessary files here, or from the attachement.

    I'll try to attach a screenshot too.


    I'm assuming that if you want to use an external theme file, you have configured and enabled CIFS1 and/or CIFS2.

    Once you get the archive, unpack it to your CIFS location. There should be two files: custom.css, and tomato.png.

    Now, go to Administration->Scripts in your router's web interface, and put the following code on the "Init" tab:
    (replace "cifs1" if needed according to your config)

    mkdir /var/wwwext
    cp /cifs1/custom.css /var/wwwext/custom.css
    cp /cifs1/tomato.png /var/wwwext/tomato.png
    Click "Save".

    Now in order to take a look at the new theme, you either need to restart your router (easiest way - recommended) OR login via telnet or SSH and execute the code above, line by line.

    When the previous step completes (the one you've chosen), you an simply change your theme at Administration->Admin Access->Color Scheme by selecting "Custom (ext/custom.css)" and clicking "Save".

    Hope I was clear enough.

    Attached Files:

  2. der_Kief

    der_Kief Super Moderator Staff Member Member

    Nice one :wink:
  3. MiseryQ

    MiseryQ Network Guru Member

    Looks Good.
  4. u3gyxap

    u3gyxap Network Guru Member

    I like it :)
  5. Mastec

    Mastec Network Guru Member

    AWESOME JOB!!! Using it now and looks sweet.
  6. eRd12

    eRd12 LI Guru Member

    Because you didn't see a bluedream skin by Slig from forum (in my mother tongue - Polish) :biggrin:

    This is beautiful ! there is also a wan up script which auto download and set the skin after rebooting the router (you must choose in gui skin "custom" in administration) by morpheouss

    if [ ! -e /var/wwwext ]; then
    logger Updating Tomato theme...
    mkdir -p /var/wwwext
    wget -O - > /var/
    unzip /var/ -d /var/wwwext
    rm -rf /var/
    I think they wouldn't be angry on me because of putting this here. Open soft is open for everybody and we have to share it
    Much thanks for them for their hard work ! :halo:
  7. boteeka

    boteeka LI Guru Member

    I'm glad you like it :). I felt like I need to do something about the look of my Tomato, and finally I came up with this one. There possibly are bugs in it, and also the css file is not cleaned up at all (actually it is a mess now :tongue:), but I think it is still better than the originally built-in ones. I will clean it up later if I will have the time.

    Feel free to submit your opinions/wishes/critics here :biggrin:.
  8. Talon88

    Talon88 LI Guru Member


    Nice Work!
    But can anyone fix the "Select Box" Problem...?




  9. boteeka

    boteeka LI Guru Member

    That "uglyness" is caused most likely by your OS theme, but it can be fixed. I'll have a look when I'll get time.

    Glad you like it :biggrin:
  10. Talon88

    Talon88 LI Guru Member


    No special theme, just pure Vista Aero....
    Everythings standard..... Thanks...!


  11. z00100

    z00100 LI Guru Member

    That's a great theme!!

    Very well designed.
  12. ajua

    ajua Addicted to LI Member

    That bluedream is great, although i don't like that much the left menus...
    has anyone got a link to other layouts/themes?

    i will try to customize my own later this weekend. i just bought a WRT54GL today and install Tomato in the morning. I have been playing with it...
  13. ajua

    ajua Addicted to LI Member

    I just tried both bludream and enlightened. I must say that enlightened suited me better.

    Im running Vista with aero and everything default. The theme looks perfect, nothing wrong with it.

    I use firefox.
  14. blackrhino

    blackrhino LI Guru Member

    For those who may be interested...

    I've used the Firefox extension 'Stylish' to theme Tomato. No need for running a script on the router and no limit on the size of the custom style. This is a browser based solution that you router doesn't even need to be aware of. You can find my creations here... If you don't already have the Stylish extension, you can get it here...
  15. tijaune

    tijaune LI Guru Member

    Here is a modication that I made to another custom found somewhere.

    Attached Files:

  16. danix71

    danix71 LI Guru Member

    I saved my custom.css into the new created /var/wwwext. Going back to web-gui, selecting (from Administration-page) /ext/custom.css (last option in themes mini-window)...everything OK!

    UNTIL I've rebooted the router. Checking what happen' I saw there is no new-created directory, nor the files inside (duh!).

    Anybody knows why's that? How can I permanenlty have what I've created?
  17. bokh

    bokh Network Guru Member

    Read the first post of this thread. The answer is there... (put it in the init-script).
  18. danix71

    danix71 LI Guru Member

    Read it. Again.
    The question was if I could create that folder on the router's flash enabling the ssh and the write onto flash, in ''var'' directory (create a new dir named ''wwwext'').
    NOT through init script.

    And then, if created (because I was succesful creating it)...why being erased at reboot?

    The ONLY way is through init script? The first and only method?

  19. cspot

    cspot Network Guru Member

    Nice....going this route for blue.
  20. fyellin

    fyellin LI Guru Member

    The only thing that is saved across reboots is the contents of ROM and NVRAM. Everything else is rebuilt from scratch at startup. Everything you see in /var and /etc is re-created at startup from info stored elsewhere.

    Enabling jffs2 lets you create a very small file system out of spare nvram that survives reboot.
  21. danix71

    danix71 LI Guru Member

    Noww I undestood! :)

    Thank to Scarabaeus I did just that:

    Script via gui into Administrative/Scripts/Init tab:

    mkdir /var/wwwext
    sleep 5
    cp /jffs/custom.css /var/wwwext/custom.css
    sleep 5
    cp /jffs/green_tomato_top.gif /var/wwwext/green_tomato_top.gif

    Enabling jjfs2, copying with winscp into jffs the two files (green tomato) and...voila'!

    Thanks to you, those who made me undestood one more about this wonderfull firmware...
  22. absolon

    absolon Addicted to LI Member


    Recently, thanks to taddy_bear (forum member) all we can use Tomato with USB support. So I thought it would be nice to refresh Tomato look.
    And here is my theme "Tomato USB" :biggrin:
    I used great theme from first post as start point. I hope boteeka doesn't mind. I tested this theme on Firefox 3 (Win) only.

    version 0.1
    - initial release

    version 0.2
    - tested on IE7
    - drop-down menu - fixed height issue (IE7)
    - select element - removed border (IE7)

    version 0.3
    - changed tomato.PNG graphic - fixed problem (IE7)


    Attached Files:

  23. spicoli

    spicoli Network Guru Member

    Updated way to add? (I am LOST :c)
  24. absolon

    absolon Addicted to LI Member

    Do you mean how to apply custom theme? It's described in first post this threat.
    But since USB support you have other possibility. You don't need use CIFS1.
    You can put files in shared folder on your drive (pendrive etc) attached to router.
    You just need change path to folder where you put files (in example shown below this folder is "css")

    sleep 20
    cp /tmp/mnt/disc0_1/css/custom.css /var/wwwext/custom.css
    sleep 5
    cp /tmp/mnt/disc0_1/css/tomato.png /var/wwwext/tomato.png
    sleep 5
    cp /tmp/mnt/disc0_1/css/bg.png /var/wwwext/bg.png
  25. occamsrazor

    occamsrazor Network Guru Member

    The theme looks very nice indeed... Will it only work for the USB mod versions of Tomato, or all versions? Also can you explain how to install the theme? Thanks in advance...

    (EDIT: Sorry I posted this while the last post was being written, I see the instructions for installation are in the first post of this thread...)

    Is it possible to store the theme in JFFS2, instead of CIFS?
  26. absolon

    absolon Addicted to LI Member

    I didn't test on official (non-modded) version. But I hope it will work as well.
  27. Low-WRT

    Low-WRT LI Guru Member

    Scroll up to the first post on this page (by danix71).
  28. occamsrazor

    occamsrazor Network Guru Member

    I seem to be being particularly dumb today :)
    Thanks! Will try it later when I'm home....

    So for Absolom's USB theme (which contains the files custom.css, bg.png, tomato.png), would I be correct in saying the script would be:

    mkdir /var/wwwext
    sleep 5
    cp /jffs/custom.css /var/wwwext/custom.css
    sleep 5
    cp /jffs/tomato.png /var/wwwext/tomato.png
    cp /jffs/bg.png /var/wwwext/bg.png
  29. Low-WRT

    Low-WRT LI Guru Member

    Looks correct to me.

    After rebooting, use winscp to put the 3 files into jffs and you should be good to go.(you may have to reboot)
  30. occamsrazor

    occamsrazor Network Guru Member

    I finally got a chance to install this theme... looks really great - thanks!
    The only thing I'd say is the text and boxes seem larger than the default theme, resulting in a need to scroll up and down a lot to access all the settings.
    Is there an easy way to change these in the css file? Thanks...
  31. Victek

    Victek Network Guru Member

  32. occamsrazor

    occamsrazor Network Guru Member

    With all credit to boteeka and absolon for creating this great "tomato usb" theme, I changed the icon in absolon's theme to one I prefer.
    Posting it here in case anyone else likes it...

    Attached Files:

  33. Beftus

    Beftus Network Guru Member

    Cool Tomato USB theme! I couldn't get it to work using the init script though... The files didn't get copied somehow. So I used Telnet to copy the files, which worked OK.

    Thanks for this great GUI theme, much better than the standard color schemes!
  34. Chilling_Silence

    Chilling_Silence Addicted to LI Member

    Is there any way that after running this I can have the Web GUI automatically apply the Custom Theme (Without using JFFS)? I want to demo Tomato to some pepole with this theme, but know that it'll auto-apply the stock red theme after Ive rebooted, presumably because the custom files were missing on boot?

    Many thanks

  35. fyellin

    fyellin LI Guru Member

    The above script doesn't use /jffs. It downloads the files to /var/tmp on each reboot. As long as your machine has internet access, and you set "color scheme" to custom.css, you'll be okay.

    Remember that tomato has no permanent memory other than ROM and NVRAM. /jffs is a fake file system built on top of spare NVRAM. Everything else gets wiped out and rebuilt after a reboot. custom.css and the other files either have to be rebuilt, redownloaded, recopied from /cifs, or live in jffs.
  36. Chilling_Silence

    Chilling_Silence Addicted to LI Member

    I understand what the script *does*, but the problem is when I reboot, it seems to loose the color scheme for some reason and revert back to the default Red one :-/

    Ive tried in the WAN UP script, as well as the init script, still have the same issue.

    I know that one way around that downloading each time would be to store the jpg files in jffs and have the custom.css just point to them stored there instead, but I'd prefer not to have to do that, but ideally like to figure out why its not keeping its setting of the custom theme. I must manually go in and change it back to Custom after its been rebooted for some weird reason.

    Using an Asus WL-520gU
  37. fyellin

    fyellin LI Guru Member

    This may be a stupid question. Are you clicking "Save" after changing the color scheme?

    When you change the scheme using the GUI, Tomato will show the current page in the new scheme, but will promptly forget about it unless you "Save" the change.
  38. Chilling_Silence

    Chilling_Silence Addicted to LI Member

    Haha, no thats actually a good question, best to have all bases covered right ;)

    Yes, I am, and can browse around for a while with it saved. Its only after a reboot that it loses it :(
  39. fyellin

    fyellin LI Guru Member

    The only two possibilities that I can imagine are:
    1. The NVRAM variable web_css isn't getting set or saved correctly.
    2. The files are not being downloaded correctly. Perhaps the script is being run a bit too quickly?
    Almost every piece of html that tomato outputs is generated from files that start with
    <link rel='stylesheet' type='text/css' href='tomato.css'>
    <link rel='stylesheet' type='text/css' href='<% nv('web_css'); %>.css'>
    i.e. include the default tomato.css file, and then possibly override that with the .css file named by the web_css variable.

    If you can telnet or ssh to the router after a reboot, it may be worthwhile to try typing "nvram get web_css", and also to see what is in /var/wwwext.
  40. Chilling_Silence

    Chilling_Silence Addicted to LI Member

    They're definitely being downloaded, as I can go in and manually change it to Custom as soon as its booted and its happy as larry, no re-downloading it or anything... but yeah :-/

    Will have a look shortly at the other thing you suggested, thanks for your help :thumbup:
  41. dwoz

    dwoz Addicted to LI Member

    New theme for tomato with USB support [asus]

    Created a new theme for the tomato firmware, asus routers with USB support:


    Attached Files:

  42. Low-WRT

    Low-WRT LI Guru Member

    Great work!
  43. eegorr

    eegorr Network Guru Member

    Very nice, but for those of us with Linksys routers I took the liberty of modifying your header file (see attached logo.png). I could do a better job if I had the original graphic, but it looks pretty good, I think.

    Also, I made a couple of minor color changes in the custom.css file to the areas adjacent to the graphics - the original color was noticeably lighter and did not match the graphics as well, at least on my system:

    body {
    background-color: #851b09; /* was 901d0a; */
    background-image: url(bg.png);
    background-repeat: repeat-x;


    #header {
    border-bottom: 2px #851b09 solid; /* was 901d0a; */
    background-image: url(logo.png);
    background-repeat: no-repeat;
    background-position: right center;
    background-color: #851b09; /* was 901d0a; */
    padding: 27px 15px;


    Attached Files:

  44. Pay87

    Pay87 Addicted to LI Member

    Brownlight v1

    My first contribution to this project :)
    Its time for a light theme, so here it is :thumbup:

    I hope you guys like my theme. :biggrin:



    For those who don't like the tomato image you can also use the icon pack!

    Attached Files:

  45. premudriy

    premudriy LI Guru Member

    Hi guys! Will "Absolon" theme work with Tomato 1.25?
  46. darthboy

    darthboy LI Guru Member

    u've 500+ MB RAM on the asus?
  47. Pay87

    Pay87 Addicted to LI Member

  48. Dashiell

    Dashiell Network Guru Member

    Great themes, Pay87!
  49. TVTV

    TVTV LI Guru Member

    The modern looks great, but i'm not sure about that tomato in the upper-right corner.
  50. Pay87

    Pay87 Addicted to LI Member

  51. ledan

    ledan Addicted to LI Member


    Mixed buffalo and absolon with a few changes.

    Attached Files:

  52. ledan

    ledan Addicted to LI Member

    Was unable to use JFFS2, so I used ftp to store custom files and used this script in wan-up.

    logger start
    mkdir /var/wwwext
    test -f /var/wwwext/custom.css
    while [ $? -gt 0 ]  
        logger echo $?
        logger while
        sleep 5  
        SITE="" #url WITHOUT ftp://, like "" or "IPADDRESS"
        logger ftp
        ftpget  -u $USER -p $PASSWORD $SITE /var/wwwext/custom.css /custom.css
        ftpget  -u $USER -p $PASSWORD $SITE /var/wwwext/buffalo.gif /buffalo.gif
        ftpget  -u $USER -p $PASSWORD $SITE /var/wwwext/buffaloback.gif /buffaloback.gif
        test -f /var/wwwext/custom.css
    logger done
  53. robinio

    robinio Guest

    Nice theme.

    Noob question but where do I put this file for theme to work? It is just one file inside this ZIP.

    Best regards,
  54. tmr250z

    tmr250z Network Guru Member

    I know that you can use WinSCP on Windows to change the theme and it works very well. But what client should I use on OS X to change the theme, since WinSCP is Windows only?
  55. atomicrabbit

    atomicrabbit Addicted to LI Member

    awesome theme! Thanks!
  56. Pay87

    Pay87 Addicted to LI Member

    Red-Modern v1.1

    I did a little update on my theme:
    -Textbox highlights added
    -Cleaner look

    Of course you can replace the "top-right" icon!
    I added some alternatives to the asus icon into the icon pack.

    Just rename the icon-file to "tomato.png" and replace the existing one before uploading to the router.



    Enjoy! :smile:

    Attached Files:

  57. Aiko

    Aiko Networkin' Nut Member

    There are several options (starting with the terminal / bash) but Cyberduck seems a good start. Check it out at
  58. occamsrazor

    occamsrazor Network Guru Member

    Interesting. I never realised Cyberduck did SCP transfers, according to this it does but falls under the SFTP protocol listing.
    I've always used the somewhat old but seems-to-work-fine Fugu application.
  59. Aiko

    Aiko Networkin' Nut Member

    Hey I like Fugu, but it's been a while since I last used it.

    It was very stable though.
  60. teddy_bear

    teddy_bear Network Guru Member

    There were a couple reports recently about some minor inconsistencies in the USB theme:

    @absolon (or anyone else with CSS skills): could you please take a look and let me know what needs to be changed to fix this?
  61. texnnyc

    texnnyc Serious Server Member

    Hi all - complete noob to tomato so please excuse the stupid question ... (just getting my feet wet with Shibby's mod on a Linksys E2000) - the first thing mentioned here is enabling CIFS1 and/or CIFS2 ... how do I do that? Am I right in assuming that these are filesystems saved in NVRAM?

    Step 1 would be mounting the systems and loading the files into them to store them on the router.
    Step 2 (above) would be making the /var/wwwext directory in RAM and then copying the files into it.

    Thanks in advance!
  62. m3g4

    m3g4 Addicted to LI Member

    using JFFS on my RT-N16 as shown here
  63. Mudza

    Mudza Serious Server Member

    Hi, I have create a new theme for the tomato firmware, the theme name is "Nadi" and designed with clean and minimal. I hope you like
    I don't know how to attach zip file in this forum, so i was upload in my own site here the link for download :
    m3g4 likes this.
  64. rs232

    rs232 Network Guru Member

    My feedback: beautiful, without doubt the best theme I've seen so far.

    If I can give you an advice would you create 4 or 5 different one based on the very same model changing e.g. only the button colour (green/red/black/a.s.o.)? I'm asking as administering multiple tomato, be able to distinguish which is which from the colour theme it's rather important.

    keep up the good work!

  65. Mudza

    Mudza Serious Server Member

    Thanks for your nice kind words, ofcourse I consider to make a some variations color on next update, again thanks for your support :)
  66. occamsrazor

    occamsrazor Network Guru Member

    Hi Mudza, your theme looks really nice! Could you or anyone else kindly explain how to install it?
  67. Riddlah

    Riddlah LI Guru Member


    You can use one of the following methods to use the theme

    If Using JFFS:

    1. Copy all files to JFFS
    2. Enter the following commands under Init for Scripts

    *replace 'custom.css', 'bg.png', and 'tomato.png' with the name of the files
    cp /jffs/custom.css /var/wwwext/custom.css
    cp /jffs/bg.png /var/wwwext/bg.png
    cp /jffs/tomato.png /var/wwwext/tomato.png
    If Using A USB:

    1. Copy all files to a USB
    2. Enter the following commands under Init for Scripts

    *replace '/tmp/mnt/Cruzer/Themes/RedModern/' with the path to your USB and the folder you copied
    **replace 'custom.css', 'bg.png', and 'tomato.png' with the name of the files
    sleep 20
    cp /tmp/mnt/Cruzer/Themes/RedModern/custom.css /var/wwwext/custom.css
    sleep 5
    cp /tmp/mnt/Cruzer/Themes/RedModern/tomato.png /var/wwwext/tomato.png
    sleep 5
    cp /tmp/mnt/Cruzer/Themes/RedModern/bg.png /var/wwwext/bg.png
    Note: sleep commands may not be necessary but I found it didn't apply the themes properly if it wasn't used
  68. occamsrazor

    occamsrazor Network Guru Member

    @Riddlah - Thanks a lot for that I'll give it a go. Just a thought though, rather than have code to copy each individual file, is it not possible to have all the theme files in a folder and then have a single line of code to copy the contents of that folder? Or can you not do that? I know very little about Linux...
  69. chaohua27

    chaohua27 Serious Server Member

    Good looks!
  70. tismon

    tismon Serious Server Member

    Well, I was going to try to install this manuall from jffs, but I just upgraded to Shibby's 105.1 and see that there's the new feature of TTB support. What's more is that Mudza's theme is already up there! It looks great and is easily the best overall looking theme I've found.

    And since you don't have a way to donate on your site, I'll just have to thank you here Mudza.
  71. klara31

    klara31 Serious Server Member

    I can not get the TTB automatic theme working! I have selected 'Online from TTB' and theme name 'usbred'.
    When telnetting in the router, I do see the file /var/wwext/ but this theme is not activated. I have rebooted, tried other themes, but no luck at all. I did notice that I do not have the command 'unzip' on the command line.

    My device is a WNR3500L, running on Shibby's MIPSR2-106 K26 Max.

    Can anyone help me out???
  72. shibby20

    shibby20 Network Guru Member

    Max build has not build-in unzip tool. I will fix it in next release.

    btw why did you install Max (without USB support) build on WNR3500L?!?!?!?!? Just install K26USB image.
  73. M0g13r

    M0g13r Network Guru Member


    i fixed/added a lot of stuff in nadi theme

    . a opkg list in tools/system does not more "destroy" the theme .... its a bit harder to read ... but looks good :p
    . under qos/graphs also
    . complete theme is a bit smaller for lower resolutions
    . gfx is a lot smaller (by same quallity)
    . active txtareas are highlighted (border changes collor)

    now the prob. ..... the author of the theme does not response to my mail :\

    what should i do ?
  74. rs232

    rs232 Network Guru Member

    Hum... the theme is his, I guess the best thing you can do is to create you own theme based on nadi's one and send me a copy (change background logo whatever you feel). I will create a new theme for you on TTB if you let me know the name. Once your theme is up and running you could also post a comment on nadi's theme (on ttb) pointing reader to your theme you've created doing a fork of his and the problems you've solved.
  75. M0g13r

    M0g13r Network Guru Member

    ok .... i thinks its done ;)


    Attached Files:

    Elfew likes this.
  76. rs232

    rs232 Network Guru Member

    I'll post it on ttb for you. Two things:

    1) the archive is not ttb compatible I did change the custom.css into w0rm.css for you and upload it on the ttb site for immediate usage.
    2) the archive you posted doesn't have any orange, e.g. ip traffic in the image above is blue (as per original nadi theme) and not orange as the image you posted.

    3) I know I said two but...: I'll move this conversation into the TTB thread.

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice