In CIS mobile können Layout, Design und Sichtbarkeit von Benutzeroberflächen-Elementen mithilfe von CSS Stylesheets individuell angepasst werden. Dies ermöglicht es Administratoren, nicht nur das visuelle Erscheinungsbild zu verändern, sondern gezielt Inhalte je nach Benutzergruppe ein- oder auszublenden sowie die Anzeigereihenfolge von Feldern oder Spalten zu steuern.

Im System sind verschiedene Stylesheets enthalten:

• mystyle.default.css: Standard-Layout für das System
• mystyle.bw.css, mystyle.rd.css, usw.: Variationen für Farbschemata und Designanpassungen
• custom.style.css: Dieses Stylesheet ist besonders wichtig, da es vom Kunden verwendet werden kann, um eigene Anpassungen vorzunehmen oder Standardstile zu überschreiben

Ein Beispiel:

.tabcontainer {
    margin: 10px 8px 1px 8px;
    border-radius: 5px;
    background: linear-gradient(rgb(248, 248, 248), rgb(240, 240, 240));
}
.colhead01 {
    font-weight: bold;
    color: white;
    padding: 2px 2px 0px 9px;
}

Diese Einstellungen betreffen allgemeine Formatierungen, etwa für Tabellenrahmen, Hintergrundfarben oder Textausrichtung.

Besonders leistungsfähig ist CIS mobile durch die Möglichkeit, für jede Benutzergruppe ein eigenes Stylesheet zu hinterlegen. Diese Stylesheets tragen den Namen der Gruppe, z. B. config.v01.style.css für die Benutzergruppe V01 (Vertrieb).

Mit diesen Stylesheets kann die Darstellung pro Gruppe maßgeschneidert werden:

• Felder können gezielt ein- oder ausgeblendet werden
• Die Reihenfolge der Felder kann angepasst werden
• Spezielle Felder wie Buttons, Icons oder Zusatzinformationen können je nach Rolle angezeigt oder versteckt werden

Beispiel für Detailfelder eines Kontakts:

[class*="config-contact-"] { display: none; }
.config-contact-lastname { order: 1; display: inline-block; }
.config-contact-firstname { order: 2; display: inline-block; }
.config-contact-email { order: 3; display: inline-block; }

Beispiel für Tabellenspalten einer Angebotsliste:

[class*="config-table-newoffers-"] { display: none; }

.config-table-newoffers-name1 { order: 1; display: inline; }
.config-table-newoffers-netwr { order: 2; display: inline; }
.config-table-newoffers-addontext { order: 3; display: inline; width: 250px !important; }

:lang(de) .config-table-newoffers-coltitle-addontext:before {
    content: "Vertriebshinweis";
}

Dieses Konzept erlaubt es, dass jeder Benutzer oder jede Benutzergruppe nur die für sie relevanten Informationen sieht. Es trägt erheblich zur Übersichtlichkeit und Effizienz bei und ist besonders wertvoll in heterogenen Organisationen mit unterschiedlichen Anforderungen an die Benutzeroberfläche.