FAQ Styling

Mithilfe von CSS (Cascading Style Sheets), einer Stylesheet-Sprache, lässt sich der Selektor individuell designen. In den Einstellungen der Workbench kann im CSS-Editor, welcher sich über den danebenstehenden Pfeil vergrößern lässt, das Aussehen aller Elemente auf den Selektor-Seiten festgelegt werden. Einige häufig eingesetzte Beispiele und Informationen zum CSS-Design sind zum Download als PDF-Datei bereitgestellt.

Häufig verwendete CSS Einstellungen können Sie hier herunterladen:

📁 DOWNLOAD HIER

Im Allgemeinen baut sich eine CSS-Regel für den Selektor wie im folgenden Beispiel auf. Genauere Informationen zu den Details finden Sie in der PDF-Datei.

#foxbase-selector .mdc-button {
    color: blue !important;
}

Der Zusatz des ID-Selektors „#foxbase-selector“ wird benötigt, um den Klassen-Selektor „mdc-button“ auszuwählen. Dieser wählt das zu gestaltende Element aus. Die zugehörigen Regelsätze befinden sich dahinter in geschweiften Klammern. „color“ beschreibt die Eigenschaft des Elements, gefolgt von einem Doppelpunkt, und wird mit einem Wert („blue“) versehen. Zusätzlich wird am Ende der CSS-Regel „!important“ angegeben, um bestehende Regeln zu überschreiben. Die jeweiligen Selektoren und aktuellen CSS Einstellungen können Sie im Browser im Entwicklertool unter „Elements“ ermitteln und Änderungen dort testen.

Ein Bearbeiten-Symbol (Stift) neben bereits beantworteten Fragen schafft Orientierung und erleichtert den Nutzern, einzelne Schritte gezielt zu ändern.

Kopiere den Code in Deine CSS Maske, um den Stift zu erhalten. Der Code beinhaltet einen standard Link, der das Stift Icon darstellt. Wenn Du ein anderes Icon als Stift haben willst, ersetze den Link durch Deinen eignen.o

#foxbase-selector .app-questionnaire-navigation-item::before {

    content: url(https://cdn.foxbase.de/Doku/images/Bearbeiten.png) !important;

    position: absolute !important;

    background: transparent !important;

    left: 0px !important;

}

#foxbase-selector .app-questionnaire-navigation-item--on-path {

    padding-left: 20px !important;

}

Klicke in der linken Navigation auf “Result Page”. Danach wählst Du durch die Tab-Auswahl je nach Wunsch “Top Sections”, “Bottom Sections” oder “Product Sections”.

Füge oben rechts über das Drop Down das Element “CTA to external Link” hinzu. Diese Buttons kannst Du von andere Call to Actions absetzen. Als Beispiel kannst du folgenden CSS Befehl in die CSS Maske kopieren:

#foxbase-selector .mdc-button--raised.secondary {

border: var(--mdc-theme-primary) solid 2 px !important;

background-color: white !important;

color: var(--mdc-theme-primary) !important;