SITEFORUM Design Introduction


Published on

This summary gives an introduction and an overview on the basic functionalities and Colors / Background-Images areas of the SITEFORUM design.

Published in: Design, Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

SITEFORUM Design Introduction

  1. 1. Social Networking for Business SITEFORUM® MasterSets / DesignSets Colors / Background-Images CSS-Modules Master-Design Design-Templates Application Links Design-Modules Design-Attributes Design-Tools SITEFORUM Design This summary gives an introduction and an overview on the basic functionalities and areas of the SITEFORUM design. The more skills in HTML, CSS and XSL you have, the better you can use the following scopes for individual customizations.
  2. 2. Social Networking for Business SITEFORUM® SITEFORUM MasterSets MasterSets DesignSets A "MasterSet" is a predefined combination of colors, fonts, logos, and layouts. Various sets can be selected. Further individual MasterSets can be generated via import/export facilities. After selecting a MasterSet different color options are available. Two CSS modules are linked together. (Colors and Background Images)
  3. 3. Social Networking for Business SITEFORUM® SITEFORUM Colors / Background-Images Colors For an individual customization of color settings there is a "simple mode" where assignments can be made without CSS and HTML skills. Colors are classified according to the portal areas: - general background and font colors - main menus - sub menus - applications - date and profile box - newsflash - story- and product-templates - dialogs and tables in dialogs - gateway boxes CSS-Editor The CSS editor allows the creation of own classes, values and properties.
  4. 4. Social Networking for Business SITEFORUM® CSS-Modules The complex usage of CSS classes and definitions in the complete design requires a classification. The most important classification which is also operative with the switch of DesignSets is the division of colors, background images and layouts. Furthermore there are CSS modules for the different design modules available that - dependent on its usage – can be linked or copied to the own portal from a global "library" to allow individual customizations. Via the @import feature several CSS files can be combined in order to only need to link the design.css file. SITEFORUM CSS-Modules <!DOCTYPE...> <html><head><title>Portalname</title> <meta ....> </head><body> <link rel="stylesheet" href="/design/design.css" type="text/css" > design.css modules.csscolors.css layout.css userdefined colors (old colors and fonts) userdefined layout css modules copied module mainMenus.css searchBox.csslink positionPath.csslink module link module link
  5. 5. Social Networking for Business SITEFORUM® SITEFORUM Master-Design Master-Design The Master Design defines the basic structure of the complete visible portal. Available "Design Modules" components are positioned into the HTML source code. The $content area is the main area where content is switched. All other available placeholders are listed and described in an overview. The source code corresponds to the code between the <body> tags. The HTML header is defined in a special desin module. In general there is always one Master Design. Via Design attribute conditions various Master Designs can be addressed in order to e.g. use a different layout for the online shop. <div id="sfsExample"> <div id="sfsHeader"> $mainMenus $applications </div> <div id="sfsMainContent"> <div id="sfsNavigation"> $subMenuRows $iconMenus $dateANDprofile </div> <div id="sfsContent"> <div id="sfsContentIn">$content</div> </div> </div> </div> $content $mainMenus $subMenuRows $searchBox $logoLeft
  6. 6. Social Networking for Business SITEFORUM® SITEFORUM Design-Templates Design-Templates More design templates can be created for the main area ($content) of the dynamic portal content. Those individual templates can be selected e.g. by editors for stories and allow a separation of content and design. <div class="sfsStoryContainer"> <div class="sfsStoryTop"> <h1 class="headline">$StoryName</h1> </div> <div class="sfsStoryContent"> <div class="shortDesc">$desc_short</div> <div class="text">$desc_long</div> </div> </div> $desc_long $var1 $desc_short $StoryName $image1
  7. 7. Social Networking for Business SITEFORUM® SITEFORUM Design-Templates Story-Templates To list story articles within one menu the portal provides story templates and story intro templates. A story template defines the layout of the complete story and is displayed when the story is assigned as lead story or is directly addressed. Story-Intro-Templates If several stories are assigned to the same menu they are listed as "intros". An intro template defines the multiple display with or without image, simple or complex listing. If a lead story is assigned to the same menu the story template of this story is displayed as the "header" whereas all other stories are listed as intros below.
  8. 8. Social Networking for Business SITEFORUM® SITEFORUM Application Links Application Links Along with menus for the CMS area and catalogues for the shop there is a big amount of links to SITFORUM applications. These are assigned as application links to the individual areas in the layout. The assignment to the design modules controls the main position. Furthermore individual and external application links can be created, e.g. to link to Every design module can include a list of different content menus and application links. Example: Start | Shop | Menu = 2 Application links + 1 Menu link $mainMenus $searchBox $iconMenus $applications Home | Aktives Hauptmenü | Inaktives Hauptmenü Sitemap P. Manager Persönlicher Bereich Online Shop | Forum | Blogs | DMS $content
  9. 9. Social Networking for Business SITEFORUM® Design-Modules Parameter #1 Beginn Parameter #2 Aktiver Link Parameter #3 Inaktiver Link Parameter #4 Trennzeichen Parameter #5 Ende Menu links and application links are provided dynamically depending on the permissions of the end user. To allow a flexible individual design customization for these listings in menu modules there are different parameters of each module. For the layout of a "menu loop" there are e.g. start and end parameters, active and inactive areas and separators. Begin Separator Separator End Active link Inactive link Inactive link Home | Aktives Hauptmenü | Inaktives Hauptmenü Sitemap Online Shop | Forum | Blogs | DMS SITEFORUM Design-Modules <div id="sfsApplications"><ul> <li class="active"><a href=" "> </a></li>$link $name <li><a href=" "> </a></li>$link $name bei einfachen Darstellungen z.B. | </ul></div>
  10. 10. Social Networking for Business SITEFORUM® Design-Attributes The mostly static defined Master Design can be heavily dynamized by adding design attributes. This allows e.g. the presentation of different headers, colors or news areas depending on predefined attribute conditions. These conditions allow plenty variations and combinations, e.g. with - menus - catalogues - languages - applications - browsers - domains - times of day $content $designAttribute:header $designAttribute:news $designAttribute:banner SITEFORUM Design-Attributes
  11. 11. Social Networking for Business SITEFORUM® Color Calculator SITEFORUM Design-Tools CSS-Declarationspx:em Calculator Image colors, image scaling HTML special characters