v12.0 - Last Mod.: 07/04/2022
In the area "Design & Layout" of your SITEFORUM portal you can customize the colors, logos and the layout of your portal. For deeper and individual modification you will need to know HTML and CSS.
Log in as a "Designer" or "Portal Master."
- Click the button Portal Manager to get to the administrative area.
- Then click Tools & Administration > Design & Layout.
1. Settings
Here you define basic settings concerning the design and layout of your portals.
Top
1.a MasterSets, DesignSets*
MasterSets are predefined color, font, logo and layout combinations.
- In the navigation on the left below Settings click MasterSets, DesignSets.
You get to the tab MasterSets where the predefined MasterSets are located.
- Click the desired MasterSet.
- Click the button Save to adapt your portal to the new MasterSet.
The entire portal design is now set. You are always free to choose a new MasterSet. A new selection can be made according to your preference at any time.
DesignSets are predefined color and font combinations.
- In the navigation on the left below Settings click MasterSets, DesignSets.
- Click the tab DesignSets where the predefined DesignSets are located.
- Click the desired DesignSet.
- Click the button Save to adapt your portal to the new DesignSet.
Colors and fonts in the portal are now set. You are always free to choose a new DesignSet. A new selection can be made according to your preference at any time.
Top
1.1 Logos & Header
Here you can customize basic settings concerning logos and header background images.
- In the navigation on the left below Settings click Logos & Headers.
- Logo "left"
- If you have uploaded the logo to the file system already, you can simply select it from the corresponding folder.
- In order to upload a new logo image from your harddrive
1. click the button Browse.
Another window opens up.
2. Choose the file from your system.
3. Click the button Open in the new window.
The second window closes.
4. Select the size, in which the logo should be uploaded (resize to 100 px, Standard size of 250 px, original width of image etc).
5. Click the button Upload in the file system.
The file is shown in the path.
- Click on Save to finalize your settings and selection.
- Background "Header"* Here you can select header images for your portal:
- General this image will be shown on all portal pages, except for the homepage.
You can either upload a custom image or use some standard picture from the image gallery.
- Homepage this image will be shown on your start page.
You can either upload a custom image or use some standard picture from the image gallery.
- Background "General" Here you can select a general background image for your portal.
- Click the Save button when ready.
Top
1.b Colors*
- Click Colors in the navigation on the left.
You are forwarded to the Simple mode tab.
- Select the area in which you want to edit the colors.
- Enter the corresponding HTML color value or select the color from the color palette by clicking the icon.
- If required repeat this process for further areas.
- Click the button Save at the bottom of the page when ready.
Top
1.c Background Images*
- Click Background Images in the navigation.
You are forwarded to the Simple mode tab.
- Select the area in which you want to edit the background image.
- Choose the corresponding image by clicking the button select image.
- From the selection box background image-repeat select how and if the image should be repeated.
- Enter the exact position in the field background position.
- If required repeat this process for further areas.
- Click the button Save at the bottom of the page when ready.
Top
1.2 CSS Settings
1. Click on
CSS Settings in the navigation.
Tab CSS Modules
CSS (Cascading Style Sheets) allows to strictly separate content and design. By means of these modules colors and fonts can be controlled, and the complete portal design can be defined.
Note: We recommend to only make changes in this area, if you have knowledge of CSS. The listed CSS modules and standard modules are currently used in the design.
Here you can customize settings for Navigations and menus, Design templates, Special modules and applications and forms. Globally available CSS modules can be "copied" into your portal and then be "edited and changed" manually and individually. Please refer to the Legend at the bottom of the page to see the meaning of the corresponding icons used in this area.
Tab Module Library
This list shows all current CSS module templates that are not used in your design. Globally available modules can be "referenced" or "copied" into your portal and then be edited and changed manually.
Tab Files
This list shows all current CSS files; you can individually customize each file.
Start
1.3 General Settings
- Click General Settings in the navigation.
Tab General
Master Design / Applications area
- Here you can select the view for several network applications:
- Portal view: network applications are integrated into the portal design
- Network view: network applications are not integrated into the portal design
- Admin view: network applications are integrated into the portal design and the admin navigation is shown.

Main Doctype, Portal Label, ... area
- Select the main doctype for your portal header from the Main Doctype selection box.
- From the selection box CSS File select the *.css file for the story print mode.
- From the selection box Portal label select the appropiate label.
- Enter in the field Standard font size the desired font size in percent.
- Enter in the field Words the number of words when a whitespace should be inserted.
Images area
- Enter the width of images in intro templates in pixles in the field Intro Width.
- Enter in the field Intro Hight the hight of images in intro templates in pixles.
- Enter in the field Image Widths the width in pixles for uploaded images.
- Click the button Save when ready.
Advanced settings area
Note: Use the following settings very carefully:
- Design Manager - Recovery: Advanced options for recovery of Design Modules.
- Design Manager - Cache-System: Reset / clear the cache