Custom Tomato look/theme

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.


Installation

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)

Code:

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.

Looks Good.

I like it

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

Because you didn't see a bluedream skin by Slig from openlinksys.info forum (in my mother tongue - Polish) :biggrin:
http://www.sikorski.org.pl/bluedream.zip

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

Code:

if [ ! -e /var/wwwext ]; then
logger Updating Tomato theme...
mkdir -p /var/wwwext
wget -O - http://www.sikorski.org.pl/bluedream.zip > /var/bluedream.zip
unzip /var/bluedream.zip -d /var/wwwext
rm -rf /var/bluedream.zip
fi

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:

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:.

:::

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

Thanks...!

:::



.

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:

:::

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

:::

That's a great theme!!

Very well designed.

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...

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.

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...http://userstyles.org/styles/6279. If you don't already have the Stylish extension, you can get it here...https://addons.mozilla.org/en-US/firefox/addon/2108

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

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?

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

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?


Thanks.

Nice....going this route for now...in blue.

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.

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
sleep

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...

Hi!

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)

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

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")

Code:

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

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?

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

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

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:

Code:

mkdir /var/wwwext
sleep 5
cp /jffs/custom.css /var/wwwext/custom.css
sleep 5
cp /jffs/tomato.png /var/wwwext/tomato.png
sleep
cp /jffs/bg.png /var/wwwext/bg.png
sleep

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)

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...

Look for the theme already integrated in the RAF version. The theme name is Absolon, in honour to his nick posted.

http://www.linksysinfo.org/forums/showpost.php?p=340851&postcount=560

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...

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!

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


Chill.

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.

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

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.

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

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

Code:

<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.

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:

New theme for tomato with USB support [asus]

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

Great work!
Thanks!:thumbup:

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;
}

and

#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;
}

Enjoy!

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:




Edit:

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

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

u've 500+ MB RAM on the asus?

Red-Modern v1

And here is my redmodern theme v1 :thumbup:

/Edit:

Theme updated, see here:
http://www.linksysinfo.org/forums/showthread.php?p=363459#post363459

Great themes, Pay87!

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

Thanks for comments.
For those who don't like the tomato image you can also use one of these icons:


/Edit:

Theme updated, see here:
http://www.linksysinfo.org/forums/showthread.php?p=363459#post363459

Absolon_buffalo

Mixed buffalo and absolon with a few changes.

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

Code:

logger start

mkdir /var/wwwext

test -f /var/wwwext/custom.css

while [ $? -gt 0 ]  
do 

    logger echo $?
    logger while
    
    sleep 5  

    USER="xxxxxxxxx"
    PASSWORD="xxxxxxxxx"
    SITE="ftpserver.xxxxxxxx.com" #url WITHOUT ftp://, like "mysite.com" 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

done

logger done

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,
rp

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?

awesome theme! Thanks!

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:

There are several options (starting with the terminal / bash) but Cyberduck seems a good start. Check it out at http://cyberduck.ch/.

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.

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

It was very stable though.

There were a couple reports recently about some minor inconsistencies in the USB theme:
http://tomatousb.org/forum/t-276789/
http://tomatousb.org/forum/t-281095/css-error

@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?

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!

using JFFS on my RT-N16 as shown here

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 :

http://www.indonez.com/2012/12/nadi-tomato-router-theme/

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!

Thanks!
rs232

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

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

@occamsrazor

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

Code:

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

Code:

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

@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...

Good looks!

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.

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/usbred.zip 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???

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.

hi

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
. 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 ?

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.

ok .... i thinks its done

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.

Regards