product icon

InstantChat.css-Klassen und -Stile

    Artikel über die Anpassung von sind für ein technisches Publikum geschrieben, das Erfahrung in der Webentwicklung hat. Kenntnisse in HTML, CSS und JavaScript sind erforderlich.

    Um die Stile zu ändern, kopieren Sie die Standard-CSS-Datei in Ihr öffentliches Verzeichnis auf Ihrem Webserver und bearbeiten Sie die Stilangaben nach Bedarf.

    Bitte beachten Sie: Die Bildressourcen für den selbst gehosteten Instant Chat stehen in einer einzigen komprimierten Datei zum Download bereit.
    # Style-Bezeichnung Typ Beschreibung oder Aussehen
    1 ic_htmlbody

    Das -Element der Seite (Instant Chat wird in einem Iframe ausgeführt).

    2 ic_bodyarea Das Layout des benutzerdefinierten Fensters, das das Instant Chat-Fenster enthält.
    3 ic_shadow Legt den Schatten des benutzerdefinierten Fensters fest, das das Instant Chat-Fenster enthält. Der Schatten erscheint, während das Instant Chat-Fenster geladen wird.
    4 ic_loader_animation Die Animation wird abgespielt, während das Instant Chat-Fenster geladen wird.
    5 ic_maincontentarea Das Layout des Instant Chat-Fensters.
    6 ic_statusicon_waiting

    Das Symbol des Kunden, während er auf einen Techniker wartet.

    .ic_statusicon_waiting erscheint während der gesamten Sitzung, wenn der Kunde auf den Techniker wartet.


    7 ic_statusicon_chat Das Symbol des Technikers, der sich mit dem Kunden unterhält.
    8 ic_statusicon_rc Das Symbol des Technikers, der den Computer des Kunden fernsteuert.
    9 ic_statusicon_disconnect Das Symbol des Technikers, wenn er von der Sitzung Rescue getrennt wird.
    10 ic_statusicon_hold Das Symbol des Technikers, wenn der Kunde in der Warteschleife gehalten wird.
    11 ic_statusicon_transfer Das Symbol des Technikers, während die Sitzung des Kunden an einen anderen Techniker übertragen wird.
    12 ic_statusicon_typing Das Symbol des Technikers, der gerade eine Nachricht an den Kunden tippt.
    13 ic_statustext Das Layout des Textbereichs, der den Kunden über seinen Status und den des Technikers informiert. Zum Beispiel: Sie chatten mit John Doe.
    14 ic_windowtitle_container Der Titeltextbereich des Instant Chat-Fensters.
    15 ic_windowtitle Der Titel des Instant Chat-Fensters.
    16 ic_fontchange_small Das Symbol, mit dem der Kunde auf kleine Schriftarten umschaltet.
    17 ic_fontchange_small_border Der Rand des Symbols für die kleine Schrift.
    18 ic_fontchange_medium Das Symbol, mit dem der Kunde zu den mittelgroßen Schriftarten wechselt.
    19 ic_fontchange_medium_border Der Rand des Symbols für die mittelgroße Schrift.
    20 ic_fontchange_large Das Symbol, mit dem der Kunde zu großen Schriftarten wechseln kann.
    21 ic_fontchange_large_border Der Rand des Symbols für die große Schrift.
    22 ic_chatlog Das Layout des Chatlog-Fensters mit kleiner Schriftgröße, das den oberen Teil des Instant Chat-Fensters bildet.
    23 ic_chatlog_big Das Layout des Chatlog-Fensters mit kleiner Schriftgröße, wenn das Nachrichtenfenster nicht verfügbar ist.
    24 ic_chatlog_medium Das Layout des Chatlog-Fensters in mittlerer Schriftgröße.
    25 ic_chatlog_medium_big Das Layout des Chatlog-Fensters mit mittlerer Schriftgröße, wenn das Nachrichtenfenster nicht verfügbar ist.
    26 ic_chatlog_large Das Layout des Chatlog-Fensters mit großer Schriftgröße.
    27 ic_chatlog_large_big Das Layout des Chatlog-Fensters mit großer Schriftgröße, wenn das Nachrichtenfenster nicht verfügbar ist.
    28 ic_text_chatline Der Text der Chat-Zeilen im Chatlog-Fenster.
    Bitte beachten Sie: Verwenden Sie .ic_text_chatline_tc und .ic_text_chatline_client anstelle von .ic_text_chatline, um zwischen dem Stil von Kunden- und Techniker-Chatlines zu unterscheiden.
    29 ic_text_chattable Die Tabelle, die den Zeitstempel und den Namen des Teilnehmers enthält, der die Chat-Nachricht gesendet hat.
    Bitte beachten Sie: Die Instant-Chat-Engine umfasst die Anzeige : inline-block um sicherzustellen, dass Instant Chat auf Safari läuft.
    30 ic_text_chattable_tr Die Tabellenzeile, die den Zeitstempel und den Namen des Teilnehmers enthält, der die Chat-Nachricht gesendet hat. Es ist im Wesentlichen dasselbe wie ic_text_chattable.
    31 ic_text_chattable_td1 Das Layout des Zeitstempels von Chatnachrichten.
    32 ic_text_chattable_td2_client Das Layout des Kundennamens im Chatlog-Fenster.
    33 ic_text_chattable_td2_tc Das Layout des Technikernamens im Chatlog-Fenster.
    34 ic_text_chatcontent Das Layout der Chatnachricht.
    35 ic_control_chatline Eine Zeile im Chatprotokollfenster, die den Zeitstempel, den Namen des Absenders und die Chatnachricht enthält.
    36 ic_control_chattime Das Layout des Zeitstempels von Systemmeldungen im Chatlog-Fenster.
    37 ic_control_chatcontent Das Layout der Systemmeldungen im Chatlog-Fenster.
    38 ic_link_chatcontent Das Layout der Links in den Systemmeldungen im Chatlog-Fenster.
    39 ic_linkhover_chatcontent Das Layout von Links in Systemmeldungen im Chatlog-Fenster, wenn der Kunde mit der Maus über den Link fährt.
    40 ic_complementer Der Bereich des großen Chatlog-Fensters, der für das Nachrichtenfenster reserviert ist, wenn dieses aktiviert ist.
    41 ic_chatdisconnected Der Nachrichtenbereich des Instant Chat-Fensters, wenn die Verbindung zum Kunden unterbrochen wird.
    42 ic_filesend_button Die Schaltfläche Datei senden.
    43 ic_filesend_button_hover Die Schaltfläche Datei senden, wenn der Kunde mit der Maus über die Schaltfläche fährt.
    44 ic_filesend_button_pressed Die Schaltfläche Datei senden, wenn der Kunde sie anklickt.
    45 ic_filesend_button_disabled Die Schaltfläche Datei senden, wenn sie deaktiviert ist.
    46 ic_disconnect_button Die Schaltfläche Trennen Sie.
    47 ic_disconnect_button_hover Die Schaltfläche Trennen, wenn der Kunde mit der Maus über die Schaltfläche fährt.
    48 ic_disconnect_button_pressed Die Schaltfläche Trennen, wenn der Kunde sie anklickt.
    49 ic_disconnect_button_disabled Die Schaltfläche Trennen, wenn sie deaktiviert ist.
    50 ic_send_button Die Schaltfläche Senden.
    51 ic_send_button_hover Die Schaltfläche Senden, wenn der Kunde mit der Maus über die Schaltfläche fährt.
    52 ic_send_button_pressed Die Schaltfläche Senden, wenn der Kunde sie anklickt.
    53 ic_send_button_disabled Die Schaltfläche Senden, wenn sie deaktiviert ist.
    54 ic_lang_container Die Dropdown-Liste für die Sprachauswahl.
    55 ic_lang_menuitem Einträge in der Dropdown-Liste Sprache.
    56 ic_lang_menuitem_hover Ein Element in der Dropdown-Liste für die Sprache, wenn der Kunde den Mauszeiger über dieses Menüelement bewegt.
    57 ic_lang_menuitem_selected Das Element in der Dropdown-Liste der Sprache, das derzeit ausgewählt ist.
    58 ic_lang_select Die Steuerung der Sprachauswahl.
    59 ic_lang_select_text Der Text in der Sprachauswahlsteuerung.
    60 ic_lang_select_text_tr Der Text in der Sprachauswahlsteuerung.
    61 ic_lang_select_text_td Der Text in der Sprachauswahlsteuerung.
    62 ic_lang_select_arrowimg Die Pfeiltaste der Sprachauswahlsteuerung.
    63 % ic_chattext

    Der Textbereich des Nachrichtenfensters im Sofort-Chat-Fenster, wenn der Kunde in kleiner Schriftgröße tippt.


    Bitte beachten Sie: Die Instant Chat-Engine unterstützt die folgenden Webbrowser:
    • -webkit-Erscheinung: none sorgt dafür, dass Instant Chat auf Safari (z. B. für iPhone) läuft.
    • überlauf: versteckt stellt sicher, dass Instant Chat auf Opera läuft.
    64 ic_chattext_first

    Der Textbereich des Nachrichtenfensters im Sofort-Chat-Fenster, bevor der Kunde mit dem Tippen beginnt.


    Bitte beachten Sie: Die Instant Chat-Engine unterstützt die folgenden Webbrowser:
    • -webkit-Erscheinung: none sorgt dafür, dass Instant Chat auf Safari (z. B. für iPhone) läuft.
    • überlauf: versteckt stellt sicher, dass Instant Chat auf Opera läuft.
    Tipp: So lassen Sie das Chatfeld leer: oLangChatModeArray["TYPE_HERE"] = "";
    65 ic_chattext_medium

    Der Textbereich des Nachrichtenfensters im Sofort-Chat-Fenster, wenn der Kunde in mittlerer Schriftgröße tippt.


    Bitte beachten Sie: Die Instant Chat-Engine unterstützt die folgenden Webbrowser:
    • -webkit-Erscheinung: none sorgt dafür, dass Instant Chat auf Safari (z. B. für iPhone) läuft.
    • überlauf: versteckt stellt sicher, dass Instant Chat auf Opera läuft.
    66 ic_chattext_medium_first

    Der Textbereich des Nachrichtenfensters im Sofort-Chat-Fenster, bevor der Kunde mit dem Tippen beginnt.


    Bitte beachten Sie: Die Instant Chat-Engine unterstützt die folgenden Webbrowser:
    • -webkit-Erscheinung: none sorgt dafür, dass Instant Chat auf Safari (z. B. für iPhone) läuft.
    • überlauf: versteckt stellt sicher, dass Instant Chat auf Opera läuft.
    Tipp: So lassen Sie das Chatfeld leer: oLangChatModeArray["TYPE_HERE"] = "";
    67 ic_chattext_large

    Der Textbereich des Nachrichtenfensters im Sofort-Chat-Fenster, wenn der Kunde in einer großen Schriftgröße tippt.


    Bitte beachten Sie: Die Instant Chat-Engine unterstützt die folgenden Webbrowser:
    • -webkit-Erscheinung: none sorgt dafür, dass Instant Chat auf Safari (z. B. für iPhone) läuft.
    • überlauf: versteckt stellt sicher, dass Instant Chat auf Opera läuft.
    68 ic_chattext_large_first

    Der Textbereich des Nachrichtenfensters im Sofort-Chat-Fenster, bevor der Kunde mit dem Tippen beginnt.


    Bitte beachten Sie: Die Instant Chat-Engine unterstützt die folgenden Webbrowser:
    • -webkit-Erscheinung: none sorgt dafür, dass Instant Chat auf Safari (z. B. für iPhone) läuft.
    • überlauf: versteckt stellt sicher, dass Instant Chat auf Opera läuft.
    Tipp: So lassen Sie das Chat-Feld leer: oLangChatModeArray["TYPE_HERE"] = "";
    69 ic_custom_logo Das Logo des Unternehmens des Technikers.
    70 ic_custom_icon Das Symbol des Unternehmens des Technikers.
    71 ic_dialog_box Der Chatlog-Dialog, den Sie durch Drücken von CTRL-ALT-L aufrufen können.
    72 ic_dialog_box_textarea Der Textbereich des Chatlog-Dialogs.
    73 ic_dialog_box_button1 Die Schaltfläche In Zwischenablage kopieren des Chatlog-Dialogs.
    74 ic_dialog_box_button2 Die Schaltfläche Abbrechen wenn der Chatlog-Dialog.
    75 ic_progressbars Die Fortschrittsbalken beim Senden oder Empfangen einer Datei.
    76 ic_progressbars_chatbottom Der untere Teil des Chatlog-Fensters, wenn die Fortschrittsbalken aktiv sind.
    77 ic_progressbar_instance Das Layout der einzelnen Fortschrittsbalken.
    78 ic_progressbar_inner Die Fortschrittsanzeige des Fortschrittsbalkens.
    79 ic_progressbar_title Die Beschriftung des Fortschrittsbalkens.
    80 ic_progressbar_cancelbutton Die Abbruchschaltflächen rechts neben den Fortschrittsbalken.
    81 ic_progressbar_cancelbutton_hover Die Schaltflächen zum Abbrechen rechts neben den Fortschrittsbalken, wenn der Kunde mit der Maus über die Schaltflächen fährt.
    82 ic_progressbar_cancelbutton_pressed Die Abbruchschaltflächen rechts neben den Fortschrittsbalken, wenn der Kunde auf die Schaltflächen klickt.
    83 ic_progressbar_cancelbutton_disabled Die Abbruchschaltflächen rechts neben den Fortschrittsbalken, wenn die Schaltflächen deaktiviert sind.

    Die Stile 84-88 sind in der Standardschnittstelle für Instant Chat nicht sichtbar. Die Positionen 84 und höher sind in der neuesten Version von InstantChat.css verfügbar:

    # Style-Bezeichnung Typ Beschreibung oder Aussehen
    84 ic_technicianname Zeigt den Namen des Technikers an.
    85 ic_sessionend_button Zeigt eine Schaltfläche an, auf die der Kunde klicken kann, um die Sitzung zu beenden.
    86 ic_sessionend_button_hover Die Schaltfläche zum Beenden der Sitzung, wenn der Kunde mit der Maus über die Schaltfläche fährt.
    87 ic_sessionend_button_pressed Die Schaltfläche "Sitzung beenden", wenn der Kunde auf die Schaltfläche klickt.
    88 ic_sessionend_button_disabled Die Schaltfläche "Sitzung beenden", wenn die Schaltfläche deaktiviert ist.

    Die Stile 89-127 werden auf Systemmeldungen angewendet. Standardmäßig werden alle Systemmeldungen im Chatprotokoll an den Kunden übermittelt. Um zu verhindern, dass eine Meldung angezeigt wird, ändern Sie die Anzeige : block; zu Anzeige: keine;

    Eine vollständige Beschreibung der einzelnen Klassen finden Sie unter Beziehung zwischen ic_control-Klassen und Sprachknoten.

    # Style-Bezeichnung Typ Beschreibung oder Aussehen
    89 ic_control_chatline_CLIENT_CONNECTING Die Systemmeldung, wenn der Kunde mit dem Techniker verbunden wird.
    90 ic_control_chatline_CLIENT_CONNECTED Die Systemmeldung, die bestätigt, dass der Kunde mit dem Techniker verbunden ist.
    91 ic_control_chatline_CLIENT_END Die Systemmeldung, die bestätigt, dass der Kunde die Sitzung beendet hat.
    92 ic_control_chatline_CLIENT_DISCONNECTED Die Systemmeldung, die bestätigt, dass der Kunde von der Sitzung abgemeldet wurde.
    93 ic_control_chatline_CLIENT_CANNOTSTART Die Systemmeldung, die bestätigt, dass der Kunde eine Sitzung aus irgendeinem Grund nicht starten kann. Informationen zu den möglichen Fehlern finden Sie unter Beziehung zwischen ic_control-Klassen und Sprachknoten.
    94 ic_control_chatline_CLIENT_TIMEOUT Diese Systemmeldung ist nicht in Gebrauch.
    95 ic_control_chatline_CLIENT_REQUESTSENTFILE Die Systemmeldung, die bestätigt, dass eine Anfrage an das Applet gesendet wurde, um das Dialogfeld Durchsuchen zu öffnen.
    96 ic_control_chatline_CLIENT_ REQUESTSENTCANCELFILE Die Systemmeldung, die bestätigt, dass eine Anfrage an das Applet gesendet wurde, um das Senden einer Datei zu beenden.
    97 ic_control_chatline_TC_CONNECTED Die Systemmeldung, die bestätigt, dass eine Verbindung mit einer bestimmten Techniker-Konsole hergestellt wurde.
    98 ic_control_chatline_TC_HOLD Die Systemmeldung, die bestätigt, dass der Techniker die Sitzung in die Warteschleife gelegt hat.
    99 ic_control_chatline_TC_TRANSFER Die Systemmeldung, die bestätigt, dass der Techniker die Sitzung an einen anderen Techniker oder Kanal übertragen hat.
    100 ic_control_chatline_TC_END Die Systemmeldung, die bestätigt, dass der Techniker die Sitzung beendet hat.
    101 ic_control_chatline_TC_EXIT Die Systemmeldung, die bestätigt, dass der Techniker die Sitzung verlassen hat.
    102 ic_control_chatline_TC_DISCONNECTED Die Systemmeldung, die bestätigt, dass der Techniker die Verbindung mit dem Webserver verloren hat und der Kunde nicht mit dem Techniker kommunizieren kann.
    103 ic_control_chatline_TC_START_APPLET Der Link zum Starten des Downloads des Applets oder der iPhone-Konfigurationsdatei.
    104 ic_control_chatline_TC_SHOWSURVEY Die Systemnachricht fordert den Kunden auf, nach Beendigung der Sitzung eine Umfrage auszufüllen.
    105 ic_control_chatline_TC_URLPUSH Die Systemmeldung, die bestätigt, dass der Techniker eine vordefinierte URL an den Kunden gesendet hat.
    106 ic_control_chatline_APPLET_CONNECTING_GW Die Systemmeldung, die bestätigt, dass das Applet Rescue eine Verbindung zum Gateway Rescue hergestellt hat.
    107 ic_control_chatline_APPLET_AUTOPROXYLOOKUP
    108 ic_control_chatline_APPLET_FX_START Die Systemmeldung, die bestätigt, dass der Techniker den Dateimanager gestartet hat.
    109 ic_control_chatline_APPLET_FX_END Die Systemmeldung, die bestätigt, dass der Techniker den Dateimanager gestoppt hat.
    110 ic_control_chatline_APPLET_SENDINGLOGFILE
    111 ic_control_chatline_APPLET_PRINT
    112 ic_control_chatline_APPLET_DROPPED Die Systemmeldung, die bestätigt, dass die Verbindung unterbrochen wurde.
    113 ic_control_chatline_APPLET_DISCONNECTING Die Systemmeldung, die bestätigt, dass die Sitzung getrennt wird.
    114 ic_control_chatline_APPLET_RECONNECTING Die Systemmeldung, die bestätigt, dass Rescue versucht, die Sitzung erneut zu verbinden.
    115 ic_control_chatline_APPLET_ERROR Die Systemmeldung, die bestätigt, dass ein Fehler im Applet aufgetreten ist.
    116 ic_control_chatline_APPLET_DISCONNECTED Die Systemmeldung, die bestätigt, dass die Verbindung zum Applet unterbrochen wurde.
    117 ic_control_chatline_APPLET_FX_NOTIFY
    118 ic_control_chatline_APPLET_REBOOTING Die Systemmeldung, die bestätigt, dass der Techniker den Computer des Kunden neu gestartet hat.
    119 ic_control_chatline_APPLET_DV_START Die Systemmeldung, die bestätigt, dass der Techniker eine Desktop View-Sitzung gestartet hat und seinen Bildschirm mit dem Kunden teilt.
    120 ic_control_chatline_APPLET_DV_END Die Systemmeldung, die bestätigt, dass der Techniker eine Desktop View-Sitzung gestartet hat und seinen Bildschirm mit dem Kunden teilt.
    121 ic_control_chatline_APPLET_RC_START Die Systemmeldung, die bestätigt, dass der Techniker eine Fernsteuerungssitzung gestartet hat.
    122 ic_control_chatline_APPLET_RC_END Die Systemmeldung, die bestätigt, dass der Techniker eine Fernsteuerungssitzung beendet hat.
    123 ic_control_chatline_APPLET_CONNECTED Die Systemmeldung, die bestätigt, dass eine Sitzung gestartet ist.
    124 ic_control_chatline_APPLET_COMPLETED
    125 ic_control_chatline_APPLET_CANCELLED Die Systemmeldung, die bestätigt, dass die Sitzung abgebrochen wurde.
    126 ic_text_chatline_tc Legt das Format der Zeile des Technikers im Instant Chat-Fenster fest.
    127 ic_text_chatline_client Legt das Format der Zeile des Kunden im Instant Chat-Fenster fest.
    128 ic_waitingtime

    Hier können Sie die geschätzte Wartezeit in Minuten angeben.

    .ic_waitingtime erscheint nur einmal pro Sitzung.

    Zum Beispiel erscheint .ic_waitingtime nicht bei der Wiederherstellung der Verbindung.

    .ic_statusicon_waiting erscheint während der gesamten Sitzung, wenn der Kunde auf den Techniker wartet.

    Bitte beachten Sie: Dieser Stil ist in der Standardschnittstelle für Instant Chat nicht sichtbar.
    129 ic_queueposition

    Verwenden Sie diese Funktion, um die Position des Kunden in der Warteschlange anzuzeigen.

    .ic_queueposition erscheint nur einmal pro Sitzung.

    Zum Beispiel erscheint .ic_queueposition nicht während der Wiederverbindung.

    .ic_statusicon_waiting erscheint während der gesamten Sitzung, wenn der Kunde auf den Techniker wartet.

    Bitte beachten Sie: Dieser Stil ist in der Standardschnittstelle für Instant Chat nicht sichtbar.
    Artikel zuletzt aktualisiert: 27 September, 2022