Customising the CSS and images

Please note this is not supported by our normal support agreements. If you need further assistance on this feature we will need to refer you to our professional services department. 

The appearance of the Community Portal is controlled by HTML and CSS files. By creating override files, you can customise the Community Portal's:

• typefaces
• font sizes
• colour scheme
• header images.

Customising the colour scheme, typefaces and font size
To customise the Community Portal's colour scheme, typefaces and font size:

1. Open Windows Explorer on the web server.
2. Go to Inetpub\wwwroot\SynergeticCommunityPortal\Site.
3. Create a Css sub-folder.
   Note: The subfolders that can be created under the "[Portal]\Site" folder are Css, Html, Images and IncludeFile.
4. Go to Inetpub\wwwroot\SynergeticCommunityPortal\Site\Css.
   

5. Create a new text file named site.css 
   Note: Any filename can be used and will be picked up (PROVIDING THE SAME FILENAME DOES NOT EXIST in the Portal\Css FOLDER)  - We recommend using site.css and keeping this "skinny". Only put the customised styling changes you need in this file. Also add some comments so in the future you know why a style change was done e.g. 

   /* PaymentPlans page: Hide the Gray Box > [No, I will administer my own fee...]  SW 16/5/18 */
   .PortalPaymentPlans .NotSelected.discountOption {
       display: none;
   }
   
   /* PaymentPlans Page: Hide the Available Payment methods div. SW 16/5/18 */
   .h2AvailablePaymentMethods {
       display: none;
   }
   
   /* PaymentPlans Page: Hide label > Would you like us to administer payments on your behalf? SW 16/5/18 */
   #divAvailablePaymentMethodsInfo {
       display: none;
   }

   
   

6. Open site.css using Notepad or WordPad.
7. Type the CSS you wish to customise.
8. Note: You can view the portal's CSS classes in Inetput\wwwroot\SynergeticCommunityPortal\Css\portal.css. Make sure you only make changes within your site.css file, not the portal.css file.
9. If you have copied sections of the portal's current CSS as a template, remove any sections of the CSS that you haven't changed.
10. Save and close the file.
11. Load the Community Portal in a web browser to test your changes.

Customising the header images
To customise the Community Portal's header images:

1. Open Windows Explorer on the web server.
2. Go to Inetpub\wwwroot\SynergeticCommunityPortal\Site.
3. Create Images and Html sub-folders.
4. Go to Inetpub/wwwroot/SynergeticCommunityPortal/Site/Html.
5. Copy Inetpub/wwwroot/SynergeticCommunityPortal\Html\hdr1.html in to the new folder Inetpub/wwwroot/SynergeticCommunityPortal\site\html\hdr1.html.
6. Copy your two new header images into Inetpub/wwwroot/SynergeticCommunityPortal\site\images.
   
7. Open hdr1.html in Notepad or WordPad.
8. Edit the HTML to display your header images.
   
9. Load the Community Portal in a web browser to test your changes.

Replacing the header image with a user form
You can use a user form in place of your header image, allowing you to create and customise the header with C# programming. To replace the header image with a user form:

1. Open Windows Explorer on the web server.
2. Go to Inetpub/wwwroot/SynergeticCommunityPortal/Site/userform.
   
   Note: Create the folder if it does not already exist.
3. Save the user form you want to use as a header in this folder as CommunityPortalHeader.ascx.
   The header is replaced.