Path: Community Settings >> Customization >> Look and Feel >> Site HTML Pages
 
IdeaScale offers the ability for users to customize their communities look using HTML, through the following features and functions:

  1. Header
  2. Footer
  3. Home Page Slider
  4. Custom Widget
  5. Terms of use
  6. Contact
  7. Add a new Custom Page

Note: The use of this facility requires knowledge of HTML. Otherwise we advise not to do any change in order to avoid some malfunctions in the look and feel.
 

 1. Header

The HTML code updated in this section will reflect in the header section of the community's Home page. You can add in tabs and link them to pages you wish to.

In the above screenshot we have added two new tabs ( Motive and Contact ) , apart from the default Welcome and Ideas tabs.

  • Adding a new custom page will generate a Page Id , underlined in red, in the screenshot below.  For information on how to add it see Custom Page section below.
  • Edit the page and add in the text and details you would like it to display in the custom page.
  • This section has sample HTML code . Copy this code and replace it with the new Custom Page Id and the Page name as specified in the instructions provided in this section itself.
  • Copy paste the code given as example in the header page and make the changes to the page name and page id. The screenshot below shows the parameters to be changed ( underlined in red) .
  • Once the page name and id is updated, save the changes. You should be now able to see the pages in the form of tabs as displayed in the homepage.

Along with custom pages, you can also add links for any external or internal pages using the code <li><a href="pageurl">Text to be linked</a></li> (replace 'pageurl' with the URL of the page to be linked and 'Text to be linked' with the actual word or text which will be clicked).

Similarly any files like PDF, Excel sheet or any document can also be linked but you will need to upload the file in Community file library first and then use the file URL in <li><a href="pageurl">Text to be linked</a></li>
See help article for Community file library:https://intercom.help/ideascale/en/articles/682947-global-community-file-library
__________________________________________________________________

2. Footer

You can easily add a link in the footer with the help of this section by adding in the codes in this section or can have the custom pages reflect in the footer by enabling the setting "Link appears in the Footer".

In the image below the text "Motive" is a custom page which has been linked to the footer.

__________________________________________________________________

3. Home Page Slider

This section provides default slider on the homepage showing welcome message and slides for all the active campaigns within the community.
To learn how to customize it, see help article: https://support.ideascale.com/en/articles/3529324-home-page-slider

__________________________________________________________________

4. Custom Widget

The section allows the administrator to add a custom widget in the right side of the page:

In the below screenshot "Contact" is the custom widget added in the community.

The custom widget can also used to add a custom page in simple steps as follows:

  1. Upload the image in the community file library you would like to display on the widget.
  2. You would now need to Edit Site HTML page>> Custom Widget and key in the HTML codes for the image you would like it to display along with a title if you desire. You could also link this widget to any of your custom pages.

For example: In the above custom widget we have used a Title along with an image which redirects you to the "How To" custom page.

Below are the explanation about the attributes used in the Site HTML Page.

  1. "a/pages/how-to" - This is the attribute to the custom page you would like to direct from the custom widget.
  2. Tips and Tricks - This is the Title or label used for the custom widget.
  3. <img src="/community-library/accounts/92/928941/ti_725_1413438402543f5bc206ac2.jpg"  - This is the image attribute you will find in the community file library after you have uploaded the image.
  4. width="235" - You could also adjust the size of the image in case it is too big for the widget or you could upload an image which would be small.

Please Note: Custom widget will not be visible on mobile version or on smaller screen.
__________________________________________________________________

 5. Terms of Use

An administrator can change the default IdeaScale terms and conditions as per their requirements and has certain control over where and how this page should be displayed:
 
 1. Link to TOS in Footer: To add the TOS link in the footer of your community.
 
 2. Require TOS acceptance to participate: Participants can only participate in the respective community only after accepting the checkbox of "Terms Of Service". Below is an output of how it should appear on your community:

3. Hide Sidebar: Enabling Hide the sidebar will hide the widgets and other details on on the right side of the homepage.

__________________________________________________________________

6. Contact

 The administrator can decide whether to make his or certain contacts publics by switching "ON" the feature "Enable Contact". The contacts can be provided in a customized style in the HTML box.

__________________________________________________________________

7. Custom Pages

Using the link "Add" to add the page, next click on "Edit". The options to rename the page, the name in the community url and the link to be in the footer will be available. You can write your HTML code for your page and save the changes.

You can refer to the following link for more details on Custom Pages: https://support.ideascale.com/en/articles/682991-look-feel-settings-custom-pages

Please Note: While creating the community certain values are automatically stored in some variables called Dynamic Tags, they are used in HTML code to call automatically the values.
 $r.eval(“name“) : Community Name
 $r.eval(“tagline“) : Tag line
 $r.eval(“skip-link“) : Skip to main Content Accessibility link
 $r.eval(“welcome-title“) : Welcome Title
 $r.eval(“community-logo“) : Community’s logo
 
The select list of template tags is available in each Look and Feel HTML form, selecting a template will append in the code.

Did this answer your question?