Page Properties

This function allows you to set the margins and background of the page.

Setting the Background Color.
Setting the Background Image.
Setting the Page Margins.

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.

 

Setting the Page Background Color 

6. The first Page Property we will set is the page background color.



7. Click the Page Properties button on the Editor Toolbar to open the Page Properties dialog box.



 

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



 




9. From the Page Properties dialog box click the Paint Bucket icon to the right of the Bground field to open the Background Color dialog box.



 

10. From the Background Color dialog box select any color and click the OK button. In this example we will select #FFCC99 as the background color.



11. After selecting your background color click the OK button on the Page Properties dialog box. The Editor Workarea background color should now be set to the color that you selected.



 

Setting the Page Background Image 

12. Next we will use an image file for the page background. You can use an image on your computer for this example or you can right click and save the image below to your computer for the next step.



 

13. Click the Page Properties button on the Editor Toolbar to re-open the Page Properties dialog box.



14. From the Page Properties dialog box click the Background Image icon to the right of the Background Image field to open the Background Image dialog box.



 

15. From the Background Image dialog box click the Browse button to open the File Chooser dialog box.



16. Locate and select the image file that you will use as the background image for your page.



17. Once you have selected the image file to use for the background click the Open button from the File Chooser dialog box.



 

18. The Background Image dialog box should display a preview of image that you selected.



 

19. Leave the Position and Repeat set to the default values and click the OK button to accept the background image.



20. Click the OK button on the Page Properties dialog box. The Editor Workarea background should be changed to display the image that you selected.



21. The Background Image property is displayed on top of the Background Color.



 

Setting Background Position and Repeat 

1. As mentioned in Step 19 there are 2 additional settings in the Background Image dialog box that can be set, which are the background Position and Repeat.



2. The background Posistion fields allow you to set the vertical alignment of the background image to be Top, Middle or Bottom aligned. You can also set the horizontal alignment of the background image to be Left, Center or Right aligned.



3. The background Repeat field allow you to set whether or not your background image will tile or repeat across the background. The Repeat settings can be set to repeat, repeat-x, repeat-y or no-repeat. If a background image size is larger than the page size than the image will not need to repeat. If the selected background image is smaller than the page then the image will repeat according to the background Repeat setting. Below are the settings and effect on the background image.

repeat - causes the background image to repeat in all directions to fill up the entire background with the image.


repeat

 

repeat-x - causes the background image to repeat horizontally only from the left of the page to the right.


repeat-x with Top Vertical Position

 


repeat-x with Middle Vertical Position

 

repeat-y - causes the background image to repeat vertically only from the top of the page to the bottom.


repeat-y with Center Horizontal Position

 

no-repeat - causes the background image to not repeat.


no-repeat with Center Middle Position

 


no-repeat Right Bottom Position

 

Resetting the Background Color 

1. To reset the Background Color click the Page Properties button on the Editor Toolbar to re-open the Page Properties dialog box.



2. From the Page Properties dialog box click the Paint Bucket icon to the right of the Bground field to open the Background Color dialog box.



3. From the Background Color dialog box select Automatic Color at the bottom left of the Background Color dialog box and click the OK button.



4. After selecting your background color click the OK button on the Page Properties dialog box. The Editor Workarea background color should now be restored to its original color.

Resetting the Background Image 

1. To reset the Background Image click the Page Properties button on the Editor Toolbar to re-open the Page Properties dialog box.



2. From the Page Properties dialog box uncheck the checkbox to the left of the Background Image icon.



3. After unchecking the Background Image checkbox click the OK button on the Page Properties dialog box. The background image will be reset to no image.

 

Setting Page Margins 

1. The last Page Property is the Page Margins.



2. 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.

3. Click the Page Properties button on the Editor Toolbar to re-open the Page Properties dialog box.



4. From the Page Properties dialog box enter the value 50 into the Margin Left, Margin Top, Margin Right, Margin Bottom fields.



 

5. Click the OK button on the dialog box to accept the values. The page margins should now be adjusted to the values that you entered into the Page Margin fields.