Den Standard-Sprachwähler anpassen

Willkommen auf Ihrer Conword-Demoseite. Hier sehen Sie, wie Sie den mitgelieferten Sprachwähler mit ein paar Zeilen CSS verschieben und farblich an Ihre Website anpassen.

Wählen Sie unten eine Variante. Das CSS wird sofort angewendet, der Sprachwähler ist der echte von Conword.

Die Bausteine

<div class="cnw_translationbox cnw_skip_translation">         <!-- Container, position: fixed -->
  <div class="cnw_select_wrapper">                             <!-- Rahmen um die Auswahlliste -->
    <select id="cnw_select" class="cnw_select">...</select>  <!-- Auswahlliste mit Flagge als Hintergrundbild -->
  </div>
</div>

Die eingebauten Werte, die Sie am häufigsten überschreiben: Position (bottom: 30px; left: 30px), Hintergrund (#f5f5f5), Rahmen, Schatten, Textfarbe (#282828) und Schriftgröße der Auswahlliste (18px).

Nach rechts verschieben

<style>
  body .cnw_translationbox {
    right: 30px;
    left: auto;
  }
</style>

Oben rechts

<style>
  body .cnw_translationbox {
    top: 20px;
    right: 20px;
    bottom: auto;
    left: auto;
  }
</style>

Eigene Farben (Conword-Blau)

<style>
  body .cnw_translationbox {
    background: #00449e;
    border-color: #00449e;
    color: #fff;
    box-shadow: 0 2px 10px rgba(0, 68, 158, .4);
  }
  body .cnw_translationbox select.cnw_select {
    color: #fff;
  }
  body .cnw_translationbox select.cnw_select option {
    color: #282828;
  }
</style>

Dunkel

<style>
  body .cnw_translationbox {
    background: #1e2430;
    border-color: #1e2430;
    color: #e6e9ef;
    border-radius: 8px;
  }
  body .cnw_translationbox select.cnw_select {
    color: #e6e9ef;
  }
  body .cnw_translationbox select.cnw_select option {
    color: #282828;
  }
</style>

Kompakt und rund

<style>
  body .cnw_translationbox {
    padding: 0;
    border-radius: 999px;
  }
  body .cnw_translationbox .cnw_select_wrapper {
    padding: 4px 12px;
  }
  body .cnw_translationbox select.cnw_select {
    font-size: 14px;
    height: 18px !important;
  }
</style>

Auf kleinen Bildschirmen ausblenden

<style>
  @media (max-width: 600px) {
    body .cnw_translationbox {
      display: none;
    }
  }
</style>

Oder ganz ersetzen

Reicht CSS nicht aus, blenden Sie den Standard-Sprachwähler mit disable_language_switcher: true aus und bauen einen eigenen. Wie das geht, zeigt die Demoseite Eigene Sprachwähler bauen.

Probieren Sie es aus

Aktive Variante: Standard. Der Sprachwähler unten links (bzw. dort, wohin Sie ihn verschoben haben) ist der echte Conword-Sprachwähler, probieren Sie ihn aus.

Ereignisse von Conword (zur Nachvollziehbarkeit):