Show Borders

This function temporarily displays the borders of page elements which have invisible borders such as transparent images, Tables with a border size set to 0 and anchors.

Example

1. If you do not wish to use your website pages for testing you can visit http://www.ezeditor.net/ and click on the EZEDITOR DEMO page. Once there click the Login button to be logged in as Guest Administrator. After logging in click on the TEST AREA page then click the Edit button at the top of the page. Once the page reloads in Edit Mode you can move on to Step 6 and begin this exercise.



2. If you wish to use your own website for testing then Login to your website as Administrator.



3. Go to a page with eZ Editor installed.



4. Do not save any of the changes you make while performing this exercise if you do not want to affect the current contents of the page you are using.



5. Once logged in switch into Edit Mode on the page that you will be performing this exercise on.



6. Position the mouse cursor anywhere inside the Editor Workarea by clicking the left mouse button at the point where you would like to insert the Table.


Cursor positioned at top left inside the Editor Workarea (outlined in red).
The Table will be inserted at the cursor position.

 

7. With the cursor at the position where you wish to insert the Table click the Table button on the Editor Toolbar to open the Table dialog box. Click the OK button on the Table dialog box to accept the default settings.



 

8. There should now be a Table inserted into the Editor Workarea with 6 Table Cells spanning 2 rows and 3 columns. Each Table Cell is capable of holding content. As well each Table Cell has various properties which can be modified to control how the contents inside that cell are displayed which will be discussed later on in the Cell Properties Section of this example.



 

9. Next we will hide the Table Border to give the appearance of structured content without actually showing all of the border lines.



10. To modify the Table Properties the Table must be selected. To select the Table click anywhere on the Table border. A selected Table will appear with Table Resizing Handles displayed around the edge of the Table.



11. Once you have selected the Table click the Table button on the Editor Toolbar to open the Table dialog box.



12. With the Table selected click the Table button on the Editor Toolbar to open the Table dialog box.



13. From the Table dialog box enter the value 0 into the Border Size field and click the OK button.



14. The Table should now appear to be hidden because of the invisible border.



 

15. Working with Tables within the Editor Workarea that have invisible borders can be difficult when it comes to selecting the Table. To select a Table you must click on the Tables Border which can be tricky if you cannot see the border.



16. To temporarily view a Tables Border you can click the Show Borders button on the Editor Toolbar. Clicking the Show Borders button will cause any elements within the Editor Workarea to display there borders including Tables, Images and Anchors