InstallationCSS-eXplorer1.0

Introduction

CSSExplorer plug-in allows easy navigation and edit of CSS files with Notepad++.

Main Features:

  1. TreeView: Allows easy navigation in CSS file.

  2. Validation Service: Check errors in CSS file, and provide detailed report.

  3. Web Page Preview: Test your work on CSS file immediately via HTML Web Page Preview Window.

  4. CSS Editor:  Add new parameters and design options to CSS file quickly and easily (support CSS 2.0 defines). 
     4 Design sections:
                                  
     1.  Text – Add text design to the CSS file.
     
    2.  Display – Add background, and choose position.
     3.  Border – Add Border Style and Width.
     
    4.  Dimension – Set Padding and Margin.

System Requirements

    1.     Microsoft Windows XP and higher (tested on Windows XP and Windows Vista

     2.    Microsoft .NET Framework 2.0 or higher

Installation

Binary Files

Download CSSExplorer Binary ZIP file from download section. You will find 2 files in the ZIP file:

1. CSSExplorerSetup.msi – this is the setup of C# component of the plugin –
        it will register C# component in the registry.

2. CSSExplorerAdapter.dll – this is the C++ adapter component. It should be placed
        in  Notepad++ plug-in directory.

CSSExplorer setup is very easy. Simply follow these steps:

1. Run CSSExplorerSetup.msi

2. Copy CSSExplorerAdapter.dll to Notepad++ plug-in directory.


Source Files

We developed CSSExplorer on Visual Studio 2005.

Download CSSExplorer Source ZIP file from download section and unzip the zip file to desired directory. You will find 3 sub-directories in this directory:

1. CSSExplorer – this directory contains the C# component of the project

2. CSSExplorerAdapter – this directory contains C++ adapter component of the project

3.
Notepad++ – this directory contains Notepad++ 5.4.5 source version.

Solutions:

1. \CSSExplorer\CSSExplorer.sln – This is the solution for C# component

2. \CSSExplorer.sln – This is the solution for C++ adapter component and for Notepad++.


Build the Project:

1. Open \CSSExplorer\CSSExplorer.sln and compile. Compilation process automatically
        register C# component in the registry

2. Open \CSSExplorer.sln, compile and run.

3. You will find CSSExplorer in Plugins menu.

Uninstall Process

           1.    Remove CSSExplorerAdapter.dll from Notepad++ plug-in directory.

           2.    Go to Start a Control Panel a Add/Remove Programs and select uninstall CSS eXplorer.


Main Features Description

CSSExplorer has 4 main features: TreeView, Validation Service, Web Page Preview and  
CSS Editor.

TreeView

This feature allows you easy navigation through CSS file. Simply click on desired node in the tree and the program automatically jump to relevant line in the file. 

Note: If CSS file contains error, Navigation Tree will not be displayed. Instead, you will see a list of errors that was found in the file. Look at the Validation Service section for more information.

Demonstration Movie:

CSS TreeView


Validation Service

CSSExplorer automatically search for errors in the CSS file. List of errors (if exist) appear in TreeView tab. You can easily navigate between the errors by clicking on them.

Demonstration Movie:

Validation Service


Web Page Preview

This feature allows you to test your work on CSS file immediately via HTML Web Page Preview Window. To open web page preview follow this steps:

1. Click on Preview button in CSSExplorer window

2. Choose HTML file that has a reference to your CSS file. (Note: CSSExplorer doesn't check
        if HTML file has a reference to your CSS file).

3. Click on relevant node in the TreeView Tab.

4. CSSExplorer will display HTML Viewer window and draw dotted box around relevant design
        on the web page.

Demonstration Movie:

Preview Web Pages


CSS Editor

This feature allows you to add new parameters and design options to CSS file quickly and easily (support CSS 2.0 defines). 

CSSExplorer has 4 design sections: Text, Display, Border, and Dimension. Take a look at the following demonstration movie to understand how to use this great feature:

Edit CSS


Comments