SITEFORUM - Building Digital Leaders

Design & Layout

v12.0 - Last Mod.: 07/04/2022
Points and areas marked with * are only available if Master Design Template Version (4.x) is selected.
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."
  1. Click the button Portal Manager to get to the administrative area.
  2. 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.
  1. In the navigation on the left below Settings click MasterSets, DesignSets.
    You get to the tab MasterSets where the predefined MasterSets are located.
  2. Click the desired MasterSet.
  3. 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.
  1. In the navigation on the left below Settings click MasterSets, DesignSets.
  2. Click the tab DesignSets where the predefined DesignSets are located.
  3. Click the desired DesignSet.
  4. 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.
  1. 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.
  2. Click on Save to finalize your settings and selection.
    1. 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.
    2. Background "General" Here you can select a general background image for your portal.
    3. Click the Save button when ready.
Top

1.b Colors*

  1. Click Colors in the navigation on the left.
     You are forwarded to the Simple mode tab.
  2. Select the area in which you want to edit the colors.
  3. Enter the corresponding HTML color value or select the color from the color palette by clicking the icon.
  4. If required repeat this process for further areas.
  5. Click the button Save at the bottom of the page when ready.
Top

1.c Background Images*

  1. Click Background Images in the navigation.
    You are forwarded to the Simple mode tab.
  2. Select the area in which you want to edit the background image.
  3. Choose the corresponding image by clicking the button select image.
  4. From the selection box background image-repeat select how and if the image should be repeated.
  5. Enter the exact position in the field background position.
  6. If required repeat this process for further areas.
  7. 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

  1. Click General Settings in the navigation.
Tab General
Master Design / Applications area
  1. 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
  1. Select the main doctype for your portal header from the Main Doctype selection box.
  2. From the selection box CSS File select the *.css file for the story print mode.
  3. From the selection box Portal label select the appropiate label.
  4. Enter in the field Standard font size the desired font size in percent.
  5. Enter in the field Words the number of words when a whitespace should be inserted.


 
Images area
  1. Enter the width of images in intro templates in pixles in the field Intro Width.
  2. Enter in the field Intro Hight the hight of images in intro templates in pixles.
  3. Enter in the field Image Widths the width in pixles for uploaded images.
  4. 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

Tab PDF Settings
Here you can change the PDF creation settings.
  1. Click the tab PDF Settings.
  2. Enter in the area margins in each field the margin in mm.
  3. From the selection box Header Information select what you want to display in the left, center and right header field.
  4. From the selection box Footer Informationselect what you want to display in the left, center and right footer field.
  5. From the selection box Font Family select the font family.
  6. From the selection box Font Size select the font size.
  7. Click the button Save when ready.


Tab Design Export
Here you can export your design settings.
  1. Click the tab Design Export.
  2. By clicking the button Small Export or Advanced Export you can export your Design. The icons specify which settings are contained in the export.


Tab Design Import
Here you can import SITEFORUM design settings.
Warning: Existing design settings will be deleted!
  1. Click the tab Design Import.
  2. By clicking the button Browse you can select a SITEFORUM design to import.
  3. Click the button Upload & Start Import when ready.

Tab Versions
Master Design - Here you can choose between the Design Panel Version and the Master Design Template-Version wählen.

Selecting the Design Panel Version offers:
  • Visible design panel for design managers in the portal frontend.
  • No editing of master design templates.
  • Positioning of design modules and attributes only via widgets.
Selecting the Master Design-Template Version offers:
  • Individual editing of master design templates (HTML).
  • Positioning of design modules and attributes in master design templates.
Versions and history of design manager:
Here you can view a protocol, which describes the changes in each version made in the area "Design & Layout".



Top
 

2.  Wysiwyg, BBCode, Editors

Here you can assign different editors for text processing in the individual applications.
Note: HTML should only be assigned if you trust your users, since malware can be implemented via HTML.

Top
 

2.1 Wysiwyg-Editors

  • Click on Wysiwyg-Editors in the navigation.
    • Note: The WYSIWYG HTML editors are embedded external products. For information about these third party developers please see WYSIWYG | BBCode | CKEditor
  • Here you can assign different editors for text processing in the individual applications. .
  • Select an editor next to the corresponding application and click Save.

Top
 

2.2 Wysiwyg-Templates

  • Click on Wysiwyg-Editors in the navigation.
You see an overview of all existing templates:
  • You get to the overview of all existing templates:
  • Name Shows the name of the templates.
  • Edit By clicking the button you get to the editing mode.
  • Delete By clicking the button you can delete the template.

  Add
  1. Click the tab Add.
  1. Enter in the field Code the source code which describes the template.
  2. In the area Placeholders you can view all available placeholders by clicking the red arrow icon.
  3. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  4. Enter in the field Name a name for the new template.
  5. Click the button Save when ready.

Edit
  1. Choose the template which you want to edit.
  2. Click the icon Edit.
  1. Edit the template as desired, q.v. Add.
  2. Click the button Save when ready.


Delete
  1. Choose the template which you want to delete.
  2. Click the icon Delete.
  3. Confirm the erasing procedure by clicking the button OK.

Top

3. Design Templates

With templates you control the layout of diverse elements. For these elements different, templates, which are independent from each other, are available. You can edit them detached from their content.
Note: To edit existing templates or add new ones you need to have HMTL and/or CSS knowledge.
  1. Click the button Portal Manager to get to the administrative area.
  2. Then click Tools & Administration > Design & Layout.

3.1 Story Templates

Story templates define the layout of the stories. Story intro templates are templates for teh design of teaser stories in a menu. The intro template defines, how the teaser is supposed to look like, which size the title has, if an image is visible, etc.
  1. In the navigation on the left, below Templates, click Story Templates.
  2. Choose between the tabs Story Templates and Story Intro Templates.
You get to the tab Overview of all existing templates:
  • Preview Shows a preview of the template.
  • Name/Description Shows the name and a description of the tempalte.
  • Objects Shows the number of objects which are based on the template.
  • Edit By clicking the icon you get to the editing mode.
  • Delete By clicking the icon you can delete the template.


Add Story Template
  1. Click the tab Story Template.
  2. Click the tab Add.
  1. Enter in the field Code the source code which describes the template.
  2. In the area Placeholders you can view all available placeholders by clicking the red arrow icon.
  3. In the area Design Attributs you can view all available design attributes by clicking the red arrow icon.
  4. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  5. Enter in the field Name a name for the new template.
  6. If required enter in the field Description a description.
  7. If required upload in the area Image an image which displays the single elements of the template.
  8. If required use the Variable Fields by entering the desried text in each field, e.g. Date.
  9. If required choose from the selection box Form a form whose elements are then visible and ready to be filled in the story.
  10. Click the button Save when ready.


Add Story Intro Template
  1. Click the tab Story Intro Template.
  2. Click the tab Add.
  1. Enter in the field Code #1 the source code of the first section of the template, the header.
  2. Enter in the field Code #2 the source code of the middle section of the template, the template itself.
  3. Enter in the field Code #3 the source code of the end section of the template, the footer.
  4. In the area Placeholders - Code #1, #3 you can view available placeholders for the code sections by clicking the red arrow icon.
  5. In the area Placeholders - Code #2 you can view available placeholders for the code section by clicking the red arrow icon.
  6. In the area Design Attributs you can view all available design attributes by clicking the red arrow icon.
  7. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  8. Enter in the field Name a name for the new template.
  9. If required enter in the field Description a description.
  10. If required upload in the area Image an image which displays the single elements of the template.
  11. If required use the Variable Fields by entering the desried text in each field, e.g. Date.
  12. If required choose from the selection box Form a form whose elements are then visible and ready to be filled in the story.
  13. Click the button Save when ready.


Edit
  1. Choose the template which you want to edit.
  2. Click the icon Edit.
  1. Edit the template as desired, see. Add Story Template or Add Story Intro Template.
  2. Click the button Save when ready.

Delete
Note: Templates on which at least one object is based cannot be deleted.
  1. Choose the template which you want to delete.
  2. Click the icon Delete.
  3. Confirm the deletion process by clicking the button OK.

Top

3.2 Product Templates

  1. In the navigation on the left click Product Templates.
  2. Choose between the tabs Product Templates and Product Intro Templates.
You get to the overview of all existing templates:
  • Preview Shows a preview of the template.
  • Name/Description Shows the name and a description of the tempalte.
  • Objects Shows the number of objects which are based on the template.
  • Edit By clicking the icon you get to the editing mode.
  • Delete By clicking the icon you can delete the template.


Add
  1. Click the tab Add.
  1. Enter in the field Source code the code which describes the template.
  2. In the area Available Placeholders you can view all available placeholders by clicking the red arrow icon.
  3. In the area Design Attributs you can view all available design attributes by clicking the red arrow icon.
  4. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  5. Enter in the field Name a name for the new template.
  6. If required enter in the field Description a description.
  7. If required upload in the area Image an image which displays the single elements of the template.
  8. If required use the Variable Fields by entering the desried text in each field, e.g. Date.
  9. If required choose from the selection box Form a form whose elements are then visible and ready to be filled in the story.
  10. Click the button Save when ready.

Edit
  1. Choose the template which you want to edit.
  2. Click the icon Edit.
  1. Edit the template as desired,see Add.
  2. Click the button Save when ready.

Delete
Note: Templates on which at least one object is based cannot be deleted.
  1. Choose the template which you want to delete.
  2. Click the icon Delete.
  3. Confirm the erasing procedure by clicking the button OK.

Top

3.3 Feed Templates

Feed templates control the display of feeds.
  • In the navigation on the left, below Templates, click Feed Templates.
    You get to the overview of all existing templates.

Add
  1. Click the tab Add.
  1. Enter in the field Source code the code which describes the template.
  2. In the area Available Placeholders you can view all available placeholders by clicking the red arrow icon.
  3. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  4. Enter in the field Name a name for the new template.
  5. Click the button Save when ready.

Edit
  1. Choose the template which you want to edit.
  2. Click the icon Edit.
  1. Edit the template as desired, see Add.
  2. Click the button Save when ready.

Delete
  1. Choose the template which you want to delete.
  2. Click the icon Delete.
  3. Confirm the erasing procedure by clicking the button OK.

Top

3.4 Blog Templates

With intro templates you can control the teaser display of the blogs in the overview and with templates you control the complete display of the blogs.
  1. In the navigation on the left, below Templates, click Blog Templates.
  2. Choose between the tabs Blog Templates and Blog Intro Templates.
    You get to the overview of all existing templates.

Add
  1. Click the tab Add.
  1. Enter in the field Source code the code which describes the template.
  2. In the area Available Placeholders you can view all available placeholders by clicking the red arrow icon.
  3. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  4. Enter in the field Name a name for the new template.
  5. Click the button Save when ready.

Edit
  1. Choose the template which you want to edit.
  2. Click the icon Edit.
  1. Edit the template as desired, see Add.
  2. Click the button Save when ready.

Delete
  1. Choose the template which you want to delete.
  2. Click the icon Delete.
  1. Confirm the deletion process by clicking the button OK.

Top

3.5 Company Templates

Company templates control the display of companies.
  • In the navigation on the left, below Templates, click Company Templates.
    You get to the overview of all existing templates.

Add
  1. Click the tab Add.
  2. Enter in the field Source code the code which describes the template.
  3. In the area Available Placeholders you can view all available placeholders by clicking the red arrow icon.
  4. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  5. Enter in the field Name a name for the new template.
  6. Click the button Save when ready.


Edit
  1. Choose the template which you want to edit.
  2. Click the icon Edit.
  1. Edit the template as desired, see Add.
  2. Click the button Save when ready.

Delete
  1. Choose the template which you want to delete.
  2. Click the icon Delete.
  3. Confirm the deletion process by clicking the button OK.




Top

3.6 Campaign Templates

  • In the navigation on the left, below Templates, click Campaign Templates.
  • Choose between the tabs Campaign main templates and Campaign content templates.
    You get to the overview of all existing campaign main templates.

Add
  1. Click the tab Add.
  1. Enter in the field Source code the code which describes the template.
  2. In the area Available Placeholders you can view all available placeholders by clicking the red arrow icon.
  3. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  4. Enter in the field Name a name for the new template.
  5. Click the button Save when ready.


Edit
  1. Choose the template which you want to edit.
  2. Click the icon Edit.
  1. Edit the template as desired, see Add.
  2. Click the button Save when ready.

Delete
  1. Choose the template which you want to delete.
  2. Click the icon Delete.
  3. Confirm the erasing procedure by clicking the button OK.



Top

4. Master Design & Design Module

The Master Design Template is the frame of the portal, which defines the positions of the single elements and areas. Design Modules are placeholders with which you call up certain areas and define what the single functions should be able to do.
Note: In order to work in this area, it is essential that you have HMTL knowledge.
  1. Click the button Portal Manager to get to the administrative area.
  2. Then click Tools & Administration > Design & Layout.

Top

4.a Master Design Templates*

The Master Design Template is the frame of your web portal that defines the positions of single elements and areas, and therefore provides a consistent layout.
  • In the navigation on the left click Master Design Templates.
All available Master Designs are listed:
  • Selection The graphic indicates the sectioning of the templates. The red border shows the template in use.
  • Visibility Shows for which users the template is visible.
  • Name (Number)/Description Shows name, ID and description of the template.
  • Edit By clicking the icon you get to the editing mode.
  • Delete By clicking the icon you can delete the template.
Add
  1. Click the tab Add.
  1. Enter in the field Source code the code which describes the template.
  2. In the area Available Placeholders you can view all available placeholders by clicking the red arrow icon.
  3. In the area Design Attributs you can view all available design attributes by clicking the red arrow icon.
  4. In the area Special Characters you can view all available placeholders by clicking the red arrow icon.
  5. Enter in the field Name a name for the new template.
  6. If required enter in the field Description a description.
  7. Activate the checkbox Design Attribute in case you want to save the template as a design attribute.
  8. Click the button Save when ready.
Edit
  • Choose the template which you want to edit.
  • Click the icon Edit.
  • Edit the template as desired, q.v. Add.
  • Click the button Save when ready.

 
Delete
Note: The template currently in use cannot be deleted.
  • Choose the template which you want to delete.
  • Click the icon Delete.
  • Confirm the deletion process by clicking the button OK.