Monday, July 16, 2012

PirateBox Design Update

I am getting frustrated by using Kompozer for editing html/css. It has a "feature" of randomly messing up the link between the html and the css file. Now this causes the site to "fall apart". And no matter how I try to import the file again or add the link, it just wont work. I have to manually edit each line of the css by deleting the "#" in front of the line, linking it to the html file and then adding the "#" tags again. Don't know why does this happen, I figured out this "solution" after some sweating, but its still better than having to rewrite everything.

Anyway, I think I will leave the css within the html file and work with the internal style sheet until I'm finished. I will export it to a style.css file when I'm absolutely done with editing, so it won't cause no more headache.


So to make this work quickly and ready to use instead of just showing screenshots I had to simplify the upload form a little. Instead of making a new script and using php for uploading and handling the file, I just included a popup-style upload window that opens in a new page and uploading goes in a separate page without interruption to other processes.

So all the popup does is that it opens a new page to http://piratebox.lan:8080 (droopy) that allows uploading just like before. Sadly this means that there is no upload bar for the moment.

The second step will be to use another iframe for this to merge into the main page but there are some other issues to consider here with sizing and aligning etc. So first it will be a popup-like function. I think its acceptable.

Also forums must be added manually later. I might get a basic design for it, but later only. I first would like to have a working version.

What is included and what isn't

See Sneak-peek at PirateBox Design (new)
The site works at the moment, but as mentioned some functions are just initial and not final versions.

  • Chat, upload, download functions and all pages are loading and working as intended. (if not please report)
  • The design, especially that of the menu will be upgraded with some fancy effects using css.
  • Browser detection will be added in a later stage.
  • Upload progress bar and upload form built-in to the main page will be added later, at the moment it is a popup-style thing.
  • Add your own home.html file (or modify mine) that will be displayed when someone joins.
  • Forum is not included, if you already have your forum, you can add it easily.
  • As soon as my time allows I will write a simple script that downloads my design, unpacks it and copies it over to the www folder.
  • Please note I have not tested this design on my MR3020, just under Ubuntu. Not a fancy design or anything, I just don't know how small routers will be able to handle it.
Also, sorry for the messy file structure, for some reason I got errors when trying to put in a nice file structure. The page didn't load for some reason and the links were broken. I will look into this and try to fix it for next time.





After downloading the tar.gz file unpack it and copy the contents into your www folder, but before that backup your own files!

Download (also available in Download tab)

Also on Github now! (Latest version, use this!)


  1. I just installed this on my TL-WR703N under openWRT. It works well and is a big improvement over the default. The UI looks better, is more inviting, and is easier to use. I hope you continue to work on it.

  2. Thank you very much for the feedback, I am very happy someone uses my design!
    I am on a little vacation now, but I will definitely continue to work on this design and add some other cool stuff.
    I am also open for ideas that would make it even better. So if you have anything, please share.

  3. this looks awesome. im eagerly awaiting the mobile interface. my current hangups are external antenna mods on the 703n. i cant get better signal out of it so far.

  4. Also, you may want to check this out:
    I made an improvement to the local DNS hijack method piratebox uses. The link explains it all.

  5. I red the dns hijack idea on reddit that you linked here and it is indeed a valid point and I understand and know about the issue.
    I remember reading about this on the forums as well, but don't know if there is a solution or workaround other than something similar to what you have mentioned.
    If I will have some extra time I might experiment with this a little.

  6. I like this interface, and I'll be implementing on my WR703N. Is it pretty easy to edit? One of the things I'd like to do is make the appearance less intimidating. When I take it to certain places, I'd like for it to look more inviting.

  7. Yes it is easy to edit. If you are looking forward to edit some text or images, you can simply open up the html file in an editor and change what you like. The layout of the page is done by the css file.
    If you would like to edit colour scheme for example, that has to be done in the css file and not the html.
    What do you exactly mean by less "intimidating?"
    Also, you can have multiple designs on your box, and use them at different places, based on the people you are presenting your box to.

  8. Also I suggest you look at the newer design I have, it is more flexible and generally better.

  9. Thanks for your reply. By intimidating, I just mean that someone might be scared to connect to an unknown network called "Piratebox" and open it up to have a skull and crossbones staring them in the face. Your newest design is really well done, I was just wondering about changing things like pictures, so you definitely answered my question.