Über eigene CSS Regeln können Sie die verschiedenen Integrationen individualisieren und an Ihre Bedürfnisse anpassen. Dadurch können Sie die Integrationen an Ihre Corporate Identity anpassen oder verschiedene Elemente ausblenden und so den Funktionsumfang der Integrationen einschränken.
Neben den von OXOMI verwendeten CSS Klassen wurden an verschiedene Elemente extra CSS Klassen angehängt, welche ausschließlich für die individuelle Anpassung der Integrationen gedacht sind. Diese Klassen enden immer mit -cust und können aus dem DOM-Tree der jeweiligen Integration ausgelesen werden.
Hierzu muss die entsprechende Integration eingebunden und im Browser geöffnet werden. Anschließend können Sie beispielsweise im Kontextmenü des FireFox oder Google Chrome Browsers, welches sich durch die Betätigung der rechten Maustaste öffnet, die Option Untersuchen auswählen. Diese öffnet dann den DOM-Tree. Die nachfolgenden Abschnitte enthalten einige Anwendungsbeispiele.
Um die Schriftart Ihrer Website innerhalb der Integrationen zu verwenden, darf der target Container nicht mit der CSS Klasse sci-enable-font versehen werden. Im Umkehrschluss gilt, dass die von OXOMI verwendete Schriftart nur dann verwendet wird, wenn die Klasse gesetzt ist. Der folgende Link enthält ein Minimalbeispiel, welches die Schriftart der Website verwendet: Interaktives Code-Beispiel
Wenn die Integrationen mit einer anderen Schriftart als der Website angezeigt werden sollen, allerdings nicht im Stil von OXOMI, dann kann mithilfe der sci-font Klasse die Schriftart überschrieben werden. Der folgende Link enthält ein Minimalbeispiel, welches die Schriftart der Website verwendet: Interaktives Code-Beispiel
Um die Schriftfarbe anzupassen, müssen entsprechende sci-text Klassen überschrieben werden. Im nachfolgenden Beispiel werden die folgenden drei Klassen überschrieben: sci-text, sci-text-soft, sci-text-muted: Interaktives Code-Beispiel
Ein weiteres Beispiel im Zusammenhang der farblichen Anpassung der Schrift wäre die Anpassung des hover Effekts in der Seitenleiste der „UniversalSearch“-Integration. Standardmäßig ist dieser Effekt blau. Im nachfolgenden Beispiel wird dieser Effekt mithilfe der Klassen oxomi-universal-search-filter-value-cust und oxomi-universal-search-archive-toggle-cust auf Rot geändert: Interaktives Code-Beispiel
Um den Funktions- oder Informationsumfang einer Integration einzuschränken, können einzelne Elemente mithilfe von CSS ausgeblendet werden. Dies geschieht in der Regel mittels der display Eigenschaft und dem Wert none.
Innerhalb der „UniversalSearch“ Integration können so beispielsweise die Markennamen innerhalb der Markenübersicht ausgeblendet werden. Hierzu muss die Klasse oxomi-universal-search-brand-name-cust mit dem display Wert none versehen werden Interaktives Code-Beispiel. Um die Icons innerhalb der Seitenleiste auszublenden, kann wie folgt vorgegangen werden: Interaktives Code-Beispiel
Innerhalb der „Dokumente Anzeigen“ Integration kann mit dem Parameter showActions gesteuert werden, ob weitere Aktionen unterhalb der Dokumente angezeigt werden sollen. Sofern der Parameter true ist, werden alle Aktionen angezeigt. Mit der entsprechenden CSS-Klasse können nun wieder einzelne Aktionen ausgeblendet werden. Im folgenden Beispiel wird die Klasseoxomi-documents-view-button-cust verwendet, um den „Ansehen“ Button auszublenden: Interaktives Code-Beispiel