Main panel

What have we done?

We've created a tool that allows you to:

  • stop programming in stylesheets
  • see your changes real-time
  • make easier CSS modifications to Javascript generated content
  • do the fine-tuning process much faster
  • work in multiple browser environment
  • save with a push of a button
  • without any installation.

Therefore, you don't need any source code editor, FTP client or advanced CSS knowledge.

What are the benefits?

  • Fast and easy editing (even of Javascript generated content)
  • Higher efficiency
  • Productivity boost
  • True WYSIWYG editor
  • No installation needed
  • No footprint on the client's server
    (only 1 small file to upload)
  • Automatic updates

And all these benefits are realised in a real-life tested user-friendly interface.

The editing process compared to the "usual" method:

What is bluePen Editor?

It's an online visual CSS editor and a "must have" web developer tool which makes a difference in styling online content:

  • it runs in a browser ( an online application )
  • it makes you see the changes immediately
    ( Real-time editing )
  • it's a stylesheet editing software ( CSS styling )
  • and it's working with existing stylesheet files.

How does it work?

  • Drag and drop the bluePen Bookmarklet to your bookmarks tab to "install". Now you can edit any website on the internet which is meeting the requirements (see later).
  • While you are browsing your website you can click on the bluePen Bookmarklet any time to make your stylesheet modifications.
  • If you do so, a special snapshot is created from the website in a popup window where you can edit your website completely undisturbed.
  • The editing process is built up from a 3 simple step:
    • Step 1: Select an element you'd like to edit.
    • Step 2: Make your modifications on the bluePen Panels
    • Step 3: If you'd like to continue editing go to step 1. If not click the save button.
  • After you clicked the save button you can enter an FTP connection to save it automatically or download the modified stylesheet file for free.

Note: during editing, all the modifications take effect only in your browser unless you save them.

What are the requirements?

  • Only websites with http protocol are editable
  • The stylesheet files should be on the same server as the website is. CSS files stored on static fileservers are not supported by the saving system.
  • Only external stylesheet files can be modified (Files with ".css" extensions). Inline defined styles are hard-wired into the code and cannot be changed by bluePen.
  • !important markers are not supported yet

What is going on in the background?

  • When you click on the bluePen Bookmarklet a snapshot is created from the current website optimized to edit the stylesheet files in a popup window.
  • After the popup is loaded bluePen Editor starts initializing and gets ready to edit any selector on the website
  • When you select an element to edit, bluePen is looping through all the selectors in the stylesheet files to find already existing codes that defines its style.
  • If there are multiple selectors you could edit the one with the highest specificity value is selected.
  • After you clicked on the "Save" button all the modifications are saved by a difficult saving algorithm on the bluePen Editor server to keep the original stylesheet file as intact as possible.
  • If the modified stylesheet file is created you can choose to synchronize it automatically with the currenct file on your own server (by an FTP connection) or you can download the modified CSS file for free.

What is the bluePen workflow?

1.) Choose something on your website to edit

2.) Style it as you wish

3.) Save the modifications