SITEFORUM Design Introduction

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.

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)

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.

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

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

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

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.

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
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. Manager
Persönlicher
Bereich
Online Shop | Forum | Blogs | DMS
$content

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>

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

SITEFORUM®
Color Calculator
SITEFORUM Design-Tools
CSS-Declarationspx:em Calculator
Image colors, image scaling HTML special characters

SITEFORUM Design Introduction

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (16)

Similar to SITEFORUM Design Introduction

Similar to SITEFORUM Design Introduction (20)

More from anuvito

More from anuvito (6)

Recently uploaded

Recently uploaded (20)

SITEFORUM Design Introduction