Horizontal Line

This function moves the contents of a line in the Editor Workarea to the left if there is available space between the contents and the left margin of the Editor Workarea.

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. Copy and Paste or type the paragraph below into the Editor Workarea.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.




7. Hit the enter button on your keyboard 3 times and Paste the same paragraph again. Your screen should look like the scrrenshot below.



 




8. Position your mouse cursor on the line above the second paragraph that you pasted into the Editor Workarea by clicking on the empty line above the second paragraph.



 




9. We will now add a Horizontal Line to divide the 2 bodies of text. This technique can be used to show separation between text on your page.



10. With your mouse cursor positioned on the line above the second paragraph click the Horizontal Line button on the editor toolbar to open the Horizontal Line dialog box.



11. For now do not change any of the default settings. Just click the OK button.



 




12. The Horizontal Line should now appear in between the to paragraphs as a dividing line. So far we just used the default settings for the line style however you have the ability to change the look and size of the line.



 

Adding style to the Horizontal Line 

1. The Horizontal Line has 5 style attributes which can be used to change the look and size of the Horizontal Line.



• Alignment
• Width
• Size
• Shade
• Line Color



2. To change the style of the Horizontal Line select the Horizontal Line created above by clicking on it in the Editor Workarea between the 2 sample paragraphs. The selected line will appear with the resizing handles on each end and at the top and bottom of the line.



 




3. Once the Horizontal Line is selected click the click the Horizontal Line button on the editor toolbar to open the Horizontal Line dialog box.



4. Optionally you can click your right mouse button to display the Horizontal Line Right Click Menu and select Horizontal Line Properties to open the Horizontal Line dialog box


Right Click Menu.

 

5. From the Horizontal Line dialog box select Center as the Alignment, enter 80% as the Width, enter 4 as the Size and select No Shade.
6. Click the Paint Bucket icon to the right of the Line Color field to open the Line Color dialog box. From the Line Color dialog box select #FF0000 as the Line Color and click the OK button.



 




7. The Horizontal Line dialog box should now show the Line Color you selected and should look like the screen shot below. Click the OK button on the Horizontal Line Dialog box.



 




8. The Horizontal Line color and size should now be styled to the attributes selected above.