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:
- Open Windows Explorer on the web server.
- Go to Inetpub\wwwroot\SynergeticCommunityPortal\Site.
- Create a Css sub-folder.
Note: The subfolders that can be created under the "[Portal]\Site" folder are Css, Html, Images and IncludeFile. - Go to Inetpub\wwwroot\SynergeticCommunityPortal\Site\Css.
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; }
- Open site.css using Notepad or WordPad.
- Type the CSS you wish to customise.
- 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.
- 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.
- Save and close the file.
- Load the Community Portal in a web browser to test your changes.
Customising the header images
To customise the Community Portal's header images:
- Open Windows Explorer on the web server.
- Go to Inetpub\wwwroot\SynergeticCommunityPortal\Site.
- Create Images and Html sub-folders.
- Go to Inetpub/wwwroot/SynergeticCommunityPortal/Site/Html.
- Copy Inetpub/wwwroot/SynergeticCommunityPortal\Html\hdr1.html in to the new folder Inetpub/wwwroot/SynergeticCommunityPortal\site\html\hdr1.html.
- Copy your two new header images into Inetpub/wwwroot/SynergeticCommunityPortal\site\images.
- Open hdr1.html in Notepad or WordPad.
- Edit the HTML to display your header images.
- 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:
- Open Windows Explorer on the web server.
- Go to Inetpub/wwwroot/SynergeticCommunityPortal/Site/userform.
Note: Create the folder if it does not already exist. - Save the user form you want to use as a header in this folder as CommunityPortalHeader.ascx.
The header is replaced.