USR8054 webinterface restyling

From RygirWiki

For everyone who uses the USR808054 802.11g Wireless Turbo Router, this guide presents you with a way to make it's webinterface as modern as you want. Even better, you don't have to do anything to the firmware or put your USR 8054 wireless router at risk in any way. In fact you can do this with any router or indeed any webinterface you think needs fixing, from a usability or visual standpoint that is. I'll tell you in advance that without complex scripting you're pretty much stuck with whatever HTML code you're given. The good news is this example guide demonstrates how a bit of creative CSS selector use allows you to target any and every element all the same.

[edit] The rationale

What we're going to do is give it a neat visual upgrade that changes it from a fixed-width website into an elastic layout.

For normal webdesign, you would just use id attributes and classes to target elements directly and unambigiously in any case, but since we don't have control over the document structure, we're going to use the more powerfull selector statements for CSS. The drawback is that your CSS code gets larger, and would be harder to maintain for a real website, but since we're doing this for static webinterfaces that are very unlikely to change in any meaningful way (in the case of the USR 8054, it's last official update is from 2005 and the only update that changed anything added 1 tab which works just fine with the CSS tweak we're about to apply). This means that we can put all our effort into building exact selectors, much like crafting select statements for SQL for those of you that are familiar with relational databases or perhaps a more familiar comparison is describing a criminal to the police so they have the best idea possible of who to try and catch.

Afterwards, you can get your creativity go wild, but I restrained myself and just made better use of my screen real estate.

[edit] The teaser

We're going to take the webinterface of the USR 8054 from this :

...to this:

[edit] The plan

And here's how it's done : user styles! I used stylish for Firefox because I think it's a very convenient way to do it, but most browsers support it, in fact all the common browsers such as Firefox (supports it natively, the Stylish extension merely makes it more convenient), Internet Explorer (yes, even IE knows how to do this) and Opera know how to do this.

There are two restrictions though : You need to implement your user style on every machine that you plan to access the webinterface on if you want to make use of it, since it's not stored on the device. This means that for large networks this becomes a very tedious and impractical solution, but for home networks with a about one to a handfull of computers this works just fine. Especially if there's only one person doing the managing and doing it from one computer anyway. After all this all about making it more comfortable and pleasant to work with the device.

The second restriction kicks IE6.0 out of the water probably, and that's the need for good CSS support. Most of what we're demonstrating here is done through complex selector statements and IE6 tends to ignore them plain and simple. This severely limits your options when using that browser, but now that it's successors (Internet Explorer 7 and 8) have arrived you have more options there too.

[edit] The code

[edit] The full code

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("http://192.168.123.254/status.htm"),
 url("http://192.168.123.254/lan.htm"),
 url("http://192.168.123.254/w_basic.htm"),
 url("http://192.168.123.254/r_static.htm"),
 url("http://192.168.123.254/user.htm") ,
 url("http://192.168.123.254/remote.htm"),
 url("http://192.168.123.254/restart.htm"),
 url("http://192.168.123.254/wizard.htm"),
 url-prefix("http://192.168.123.254/")                {
body
{
    margin:0px                  !important;
/*  padding:0px                 !important;  */
}

body > center > table 
{
/* These are the 3 large main tables */
/*  border:10px solid green      !important; */
    width:100%                   !important;
    
}

IMG[name="Image21"] 
{
/*This is the (imho) useless tutorial button that I never use and always click on accidentally, so I hide it here*/
    border:10px solid green      !important;
    display:none;
}

body > center > table > tbody > tr:first-child
{
/*  background-color:green       !important; */
    background-color:white;
}

body > center > table + table + table > tbody > tr:first-child + tr
{
    background-color:white       !important; 
}
body > center > table + table + table > tbody > tr:first-child + tr IMG
{
    visibility:hidden;
    display:none; /* If you leave this line out there's more whitespace at the bottom, but it didn't seem useful or more comfortable to read so this line of code collapses the space.*/
}
body > center > table + table + table > tbody > tr:first-child + tr +tr > *
{ /* This is the copyright notice at the bottom. Without the asterisk it selects the row, and you can't add borders nor padding to rows when the table is on "collapse" mode.*/
/*  background-color:green       !important; */
    padding:.5em !important; 
}  

body > center > table + map + table tr
{
/*  height:100px;  
    background-color:green     !important; */

}
body > center > table + map + table tr > td
{
/*  height:100px;  
    background-color:green     !important; */
    
}

body > center > table + map + table tr > td[width="189"], 
body > center > table:first-child + table tr > td[width="189"]
{/* This is the "help" button on the right*/
/*  height:100px;  
    background-color:green     !important; */
   width:auto                  !important;
    
}



HTML > BODY > CENTER > TABLE:first-child > TBODY > TR:last-child > TD
{
 background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAABvCAMAAAAwhas+AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAAOpgAABdwnLpRPAAAAwBQTFRF/wAA3pR1zc2ZAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIuAJMAAAABh0RVh0U29mdHdhcmUAUGFpbnQuTkVUIHYzLjM2qefiJQAAADBJREFUSEtjYBgFoyEwGgKjIYAjBBixAwYm7GBUHBIuo+EwGg7IOWQ0PYymh5GcHgBMlwv0GA+O+gAAAABJRU5ErkJggg==");

}
                                                      }

Whenever you see something with green in comments, that's a line of code that you can uncomment (remove /* and */) to see what exactly is affected.

The image url is a data url that represents a one pixel wide and about 10 or 20 pixels high image that is used to make the header image "stretch". You could say it's an image encoded as plain text.

[edit] Afterword

Since this was so simple I'd like point out that the user end of the browsing experience allows for far more tweaks. Since as demonstrated above you can target individual elements even without id or name attributes it's possible to theme it with a css layout any way you see fit.

Likewise it's possible to use client-side scripting too, with for example greasemonkey, to create a sleek and modern AJAX-style interactive and responsive interface. In fact you could take this a lot further and create webscripts that sit on your desktop and create a sort of appliance management Window that controls all of your webinterface based devices from a single HTML page that is stored on your computer, but that's for another guide.