SITEFORUM Design Introduction
11
www.siteforum.com/design 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.
Transcript of SITEFORUM Design Introduction
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
MasterSets / DesignSetsColors / Background-ImagesCSS-ModulesMaster-DesignDesign-TemplatesApplication LinksDesign-ModulesDesign-AttributesDesign-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.
www.siteforum.com/design
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)
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
SITEFORUM Colors / Background-Images
ColorsFor 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-EditorThe CSS editor allows the creation of own classes, values and properties.
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
CSS-ModulesThe 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
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
SITEFORUM Master-Design
Master-DesignThe 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
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
SITEFORUM Design-Templates
Design-TemplatesMore 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
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
SITEFORUM Design-Templates
Story-TemplatesTo 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-TemplatesIf 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.
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
SITEFORUM Application Links
Application LinksAlong 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 www.google.com.
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. ManagerPersönlicherBereich
Online Shop | Forum | Blogs | DMS
$content
www.siteforum.com/design
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>
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
Design-AttributesThe 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
www.siteforum.com/design
Social Networking for Business
SITEFORUM ®
Color Calculator
SITEFORUM Design-Tools
CSS-Declarationspx:em Calculator
Image colors, image scaling HTML special characters
