The menu and tool bars

The File menu

This is where you perform actions on files:

• New, Open

• Close, Close all

• Revert

• Save, Save as, Save all

• Quit

Those actions, but Close all, Revert, Save all, and Quit, are accessible from the first part of the main tool bar.

Notice that the Close action applies to the current document. Notice also the accelerator keys for most common actions in this menu.

The Edit menu

This is where you perform actions on documents:

• Undo and Redo

• Cut, Copy, Paste and Delete

• Find, Find and Replace

In addition, this is where you access cssed preferences.

Those actions, but Delete, are accessible from the 2nd, 3rd, 4th and last part of the main tool bar.

Once again, notice the accelerator keys for most actions in the Edit menu. Notice that Ctrl-Z for undo works, though not signaled in the menu.

The View menu

This is where you can change the visual display of the cssed window.

From here you can:

• Hide / Show the main and secondary tool bars

• Change the zoom factor of the current document

• Create, modify and load documents lists which will ease grouping and opening documents

Those actions have no equivalence in the tool bars.

The Document menu

All actions in this menu are related to the current document. From there, you can:

• Show/hide line numbers, line endings, and white spaces

• Enable/disable line wrapping, auto completion, and folding

• Set or change the EOL mode of the current document

  

  Figure 2-10. Set or change EOL mode

• Fold/unfold all properties

  

  Figure 2-11. Folding/unfolding all properties

• Apply syntax highlighting to the document, according to the type of document

  

  Figure 2-12. Apply highlighting

• Force the encoding of the document

  

  Figure 2-13. Force encoding

  Use it with caution, and do not mix several encodings in the same document.

• Change the character set

  

  Figure 2-14. Character set

• Change the font of the current document.

• Change the background color of the document tab

  

  Figure 2-15. Tab background color

There is no equivalence for those actions in the tool bars.

The CSS menu

This is where you will find all the dialogs to add properties, attributes, and values to your documents, as well as validate and scan them. The menu is divided into three parts:

• Dialogs, which in turn are divided into three parts:

  

  Figure 2-17. CSS Dialogs menu

  • Properties and values: This is where you will find all the CSS dialogs for properties and values.

    It contains 66 dialogs to ease CSS creation either aural, visual, or paged.

    

    Figure 2-18. CSS Properties and Values menu

    Each item leads to another cascade of submenus, to finally end up with access to a given dialog.

    • Here you can see the path to the border width style and color item:

      

      Figure 2-19. Border width style and color item in the CSS menu

    The most commonly used dialogs are replicated in the first three parts of the secondary tool bar.

    Notice also the balloon help on most of the menus items to make clear which action the menu triggers.

    

    Figure 2-20. Equivalents of CSS properties and values dialogs in the secondary tool bar

    • Margin all dialog

      

      Figure 2-21. Margin all dialog

    • Border all dialog

      

      Figure 2-22. Border all dialog

    • Padding all dialog

      

      Figure 2-23. Padding all dialog

    • Font dialog

      

      Figure 2-24. Font dialog

    • Color dialog

      

      Figure 2-25. Color dialog

  • Common values: from there you can insert values for units, strings, and identifiers

    

    Figure 2-26. CSS Common Values menu

    There is no equivalent for those items in the tool bars.

  • Function values: those dialogs allow you to insert values for generated contents, i.e. url() and attr()

    

    Figure 2-27. CSS Function Values menu

    There is no equivalent for this item in the tool bars.

• Wizards: box properties, selector, and color for complex rules

  This is where you go when you have complex properties to build.

  • The box properties wizard allows you to set values for margin, padding, border, and box size properties.

    It is made of three parts:

    • The first part details all properties, so that you can assign different values to each property.

      

      Figure 2-28. All properties in Box Properties wizard

    • The second part is devoted to shorthand properties, this way you can set the same value to any sub-property of a major property (e.g. same color to each side of a border).

      

      Figure 2-29. Shorthand properties in Box Properties wizard

    • The third part is a quick help for you to locate quickly the various concepts in a CSS box.

      

      Figure 2-30. Quick help in Box Properties wizard

  • The selector wizard helps you to construct particular or general rules for:

    • single selectors

      

      Figure 2-31. Single selector wizard

    • child selectors

      

      Figure 2-32. Child selector wizard

    • class selectors

      

      Figure 2-33. Class selector wizard

    • sibling selectors

      

      Figure 2-34. Sibling selector wizard

    • contextual selectors

      

      Figure 2-35. Contextual selector wizard

  • With the color wizard, you can set a value for any property involving color.

    

    Figure 2-36. Color wizard

  There are equivalents in the secondary tool bar for those wizards.

  

  Figure 2-37. Equivalents of wizards in the secondary tool bar

• Miscellaneous actions performed on the current document:

  • Validate and dump (version 0.3.1): checks if the document is well-formed and parseable by a web browser, and dumps the analysis into the program output.

  • Validate only (version 0.3.1): checks if the document is well-formed and parseable by a web browser. Errors are listed in the program output tab of the footer panel.

  • Scan selector (version 0.3.1): lists in the upper part of the side panel all properties and values of the selector, your mouse pointer is in. From there you can change/add values and properties.

  All items have equivalents in the 4th and 5th parts of the secondary tool bar.

  

  Figure 2-38. Equivalents of validate and scan menu items in the secondary tool bar

The Tools menu

This is where you perform actions on the current document. The menu contains the following items:

• Doc info: gives some information about the current document, such as its location, its size in characters, its saved/modified state. The output is listed in the program output tab of the footer panel.

• Show autocompletion: displays the auto completion popup menu. Mostly useful when you have disabled automatic auto completion. The popup menu appears where your mouse pointer is in the current document.

• Clean program output: clears the program output in the footer panel.

All items, but the show autocompletion one have equivalents in the 4th part of the secondary tool bar.

The Panels menu

From there you can show/hide the side and footer panels.

Observe that the icons which have only a blank background matches the hide action, whereas the icons with a blue rectangle matches the show action. Similarly, horizontal arrows represent the side panel, while vertical arrows represent the footer panel.

All those items have equivalents in the 6th part of the main tool bar

The Plugins menu

From there, you access a plugins dialog window, where you can see which plugins are installed, and consequently load or unload them.

Some plugins may add new items to the plugin menu. In this case, they will be described in Chapter 4.

There is no equivalent in the tool bars for this menu.

The Help menu

The About item in this menu leads to a four tabs window with information about cssed: author, developers, translators and their details (in translated version), and a dedicace for this release.

The other items are only available on Mac version at the moment. They give access to the cssed web site and the online documentation. Some common browsers on this system are provided, as well as some others available on the X11 layer.

There is no equivalent in the tool bars for this menu.

Navigation through bookmarks

With those icons you access quickly any temporary bookmark you have previously defined just by clicking in the margin in front of the line you wanted to bookmark.

Those items are located in the fifth part of the main tool bar. They are not present in the menus.