Sample portal page

The steps outlined in this example lead you through uploading an image, adding a banner to your web pages, including an image as the background for the banner and resizing the page.

Upload an image

First you must upload the image you wish to use as the background for your banner. Both the width of the banner and the width of the base page can be adjusted using the style editor. For this example, we will assume that the width needed is 780 pixels. The banner image uploaded would need to be 780 pixels.

1. Select System > Portal Configuration.
2. Click on the Content Editor tab.
3. If you have created more than one portal, select the portal to be edited from the drop-down list at the bottom of the view.
4. Click on the Images tab.
5. To view an image, select it from the list on the left. The image displays in the panel on the right.
6. To upload an image, click the Upload Images button.
7. Browse to the image you want to upload and click Open.
8. Scroll through the list on the left to make sure your image was uploaded.
9. Click Apply to save.

Create a banner with an image background

To create the Banner you will have to use the Custom Rules option at the bottom of the Style Sheet Editor to expand the banner from a height of 0 pixels to an appropriate size. In this example, we are setting the banner to 80 pixels by 780 pixels. We will also adjust the page width to 780 pixels.

To use Custom Rules you must have a working knowledge of CSS.

1. Select System > Portal Configuration.
2. Click on the Content Editor tab.
3. In the tree on the left, select Global > Styles to display the style editor.
4. Scroll to the Custom Rules Definitions section at the bottom of the window. Using the Custom Rules option you can add multiple rules and each rule can contain multiple properties.
5. Click Add Rule.
6. In the field containing Enter Selector, type .branding.
7. In the field containing Enter Property, type height.
8. In the field containing Enter Value, type the height of your image, such as 80px.
9. Click Add Property to add the next property which is the width of the image.
10. In the Property field, enter width.
11. In the Value field enter the width of the image, such as 780px. Click Add Property to add the next property which is the background image.
12. In the Property field enter background-image.

13. In the Value field enter url('../../img/imagename.jpg') where imagename.jpg is the name of the image you uploaded earlier. If you would like to test this with a sample image, use banner.jpg.

    In order to display uploaded images, the path to the image directory must be included in the Value field as follows: ../../img/
    

14. Click Add Rule.
15. In the field containing Enter Selector type #custom-doc.
16. In the Property field, enter width.
17. In the Value field, enter the width of the page, such as 780px. Now the page and the banner will be the same width.
18. Click Apply to save.