Firebug Extension or JQuery App for live CSS editing, easy buttons, WYSIWG

  • Status Closed
  • Budget $250 - $750 USD
  • Total Bids 3

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: [url removed, login to view] and [url removed, login to view]

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.

Get free quotes for a project like this

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online