Project Description:
I need a Frontend that will change existing CSS of a website by overriding it with custom one.
Website -> Proxy -> User
Our backend operates on the proxy and inserts a blank CSS file into the datastream. That CSS file will need to be generated by a non-webdesign-person.
When the website is displayed through that proxy to one of our workers, a user-interface, such as Firebug, should be displayed where the worker can easily:
- Select an item (such as a Logo or Menubutton)
- Iterate to its parent (such as the entire Menu), next sibling, and back the way he came.
- OR, instead of selecting a CSS-Path or CSS-id, select the corresponding class (such as ) (solved by radiobuttons or dropdown)
- The currently selected element needs to be highlighted (such as with firebug)
- Hide that element or element-group (e.g. thisOneParagraph { display: none; })
- Adjust hight, width, fontsize and other important options with "up" and "down" arrow-buttons
- Apply a predefined "theme" to that element (e.g.: thisOtherParagraph: { font-size: 12px, color: red; }), solved by dropdown
- An optional text area that shows the CSS for manual input
- the Flag "!important" should be able to be added to most of the commands
There should be an instant preview, and a Upload&Reload Button, that uploads the generated CSS to the server and reloads the website to check the result.
The upload should be implemented via REST or similar, a Backend (either PHP or Ruby on Rails) accepts the file and saves it in the right place.
there already is a similar solution: http://firefile.at/ and https://github.com/tobiasstrebitzer/FireFile/
which could be adapted to be more resiliant (since this sometines doesnt work) and added the buttons and easy-select-features.
this is a prototype for a larger project.
after this, the backend needs to be designed, where a worker can add a new site and open the editor.
the picture is an early draft and can definately be improved upon. the interface can be below OR to the right of the website OR in a seperate window.
Additional Project Description:
01/28/2013 at 1:04 SGT
Website -} Proxy -} User/Worker
01/28/2013 at 2:31 SGT
to clarify: there already is a proxy that does all the work, and some manually written CSS files for certain websites, I just need a generic tool that eases the process for new websites handled by the proxy.
