Making Basic Changes to your HTML Custom Pages

This article covers the steps and an overview of some common changes needed when updating a HTML Custom Page. 

• Accessing your Custom Pages
• Page Code Editor
• Basic HTML Elements and Attributes 
• Editing Text Content 
• Editing Images
• Saving the Changes to your Custom page 

Accessing your Custom Pages

Navigate to the Custom Pages module. Note that this menu item could be placed within a dropdown menu, like Admin and could be different on your Platform. 

One in the Custom Page area, find the HTML Custom Page you wish to Edit and click the Edit icon, as highlighted below. 

Page Code Editor

Once you've clicked Edit, you will be able to Edit your Custom Page. On the left of the screen are a number of setting options, as well as a Preview of your page. The Page Code Editor will automatically open on the right side of your screen. 

The options available in the Page Code Editor (pictured below) include: 

• HTML – This is where you enter your page content (title, description etc.) as well as defining your classes and containers.
• Page CSS – This is where you add styles such as color, font-sizes and margin to your page content. Note: CSS in this page will only affect the current page you are working on.
• Global CSS – Same as Page CSS but the CSS will apply to all HTML pages on your platform that share the same class. 
• Assets – You can navigate through your Resource Folders for specific files and copy the link onto the page.
• B4 CSS and B4 JS – These are internal Bootstrap and JavaScript CSS code that makes it easier to build custom pages. You are not able to edit this code. Note: to view these tabs, the option needs to be enabled under Admin > Settings > Custom Pages.
  

Basic HTML Elements and Attributes

Below is a list of some of the most common HTML elements that are used in Custom Pages. 

• <div> - Defines a section or division in the code. It can also be used as a container to style the content within it with CSS.
  
  
• Class – This attribute is used to define the style for an element. It is also used to name the container that holds the content.
  
  
• <a> - These are used to hyperlink URL to the text.
  For Example: <a href=”www.intelligencebank.com”>Visit IntelligenceBank</a>
  This will link the ‘Visit IntelligenceBank’ text with the URL, so if a user clicks on the text they will be taken to that URL. Always make sure to close it off with </a>.
  
  
• <img> - These are image tags. It is used to add images to the Custom Pages, as you can see below. 
  For Example: <img alt="img-02" src="image.png"> 
  Alt is the name of the image. This is optional and can be left blank (“”). SRC is where you link the location of the image. You can use Public Sharing links or upload an item through the custom page editor to include the image. 

Editing Text Content

Within the Page Code Editor, any text that is black is content that appears on your page (for example the title, description, etc).

You can edit these and add/remove content if needed simply by replacing that text with the updates required. In the screenshot below for example, you could change the 'Welcome' title or the sentence in the next paragraph, 'Seamlessly manage content...'

If you are not experienced with HTML, please do not edit any of the coloured text.

Editing Images 

If you would like to change an image and upload a new one, you can follow the steps below.

1. Double click on the image within the preview you wish to change and the Image Properties popup will appear.
   
   
2. Click on Browse Server (highlighted below) which will take you to another page. 
   
   
   
   
3.  After clicking Browse server, you will be able to see all files which have already been uploaded to the server. To Upload a new image, click upload (highlighted below). 
   
   
   
   
4. Once the image has finished uploading, double click on the selected image and you be back on the Image Properties page.
   
   
5. On the left of the image you will see that the Width and Height fields are now populated with numbers (as highlighted below). Clear those fields and leave it blank. The CSS code from the page will automatically resize the image to fit within its container.
   
   
   
6. Click Ok to Save your Changes and add the new image. 

Saving the Changes to your Custom page

To save the changes to your Custom Page, ensure you click the Save button at the bottom left of the page; under the Preview. 

----------

To find out more about Custom Pages, click here. 

Some of the terminology used above may appear different in your Platform. You can view potential matches here.