Ankündigung

Einklappen
Keine Ankündigung bisher.

Langswitcher ohne <ul><li>

Einklappen
X
 
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Langswitcher ohne <ul><li>

    Liebe Community!

    Ich verwende das Modul Langswitcher mit einem eigenen HTML Code:

    <div class="mod_langswitcher meta-nav">
    <div class="mod_langswitcher_inside">
    {{iflng::en}}<span>EN</span>{{iflng}}
    {{iflng::de}}<span>DE</span>{{iflng}}

    <ul>
    <li><a href="{{link_url::2111}}"><span>EN</span>EN</a></li>
    <li><a href="{{link_url::1999}}"><span>DE</span>DE</a></li>
    </ul>

    </div>
    </div>

    Damit wird auf der Desktop Version ein kleiner Pfeil angezeigt und mit einem Klick darauf, kann man zwischen EN und DE wechseln. Da ich auf der Website nur die beiden Sprachen verwende, wäre es mir lieber, wenn EN und DE direkt angezeigt werden würden und man sich den Zwischenschritt auf den Pfeil zu klicken sparen kann.
    Ich habe mich selbst daran versucht, den Code folgendermaßen abzuändern:

    <div class="mod_langswitcher meta-nav">
    <div class="mod_langswitcher_inside">
    {{iflng::en}}<span>EN</span>{{iflng}}
    {{iflng::de}}<span>DE</span>{{iflng}}

    <a href="{{link_url::2111}}"><span>EN</span>EN</a></li> | <a href="{{link_url::1999}}"><span>DE</span>DE</a>

    </div>
    </div>

    Der kleine Pfeil ist aber dann trotzdem noch da und die Verlinkungen funktionieren nicht.

    Könnte mir hier jemand helfen?

    Danke im Voraus!
    Julia
    Zuletzt geändert von Julia; 08.02.2021, 12:46.

  • #2
    Hi und willkommen,
    du willst eigentlich nur kein Aufklapp-Menü, richtig?

    Du hast in deinem Html noch ein </li> drin.

    Code:
    <div class="mod_langswitcher meta-nav">
    <div class="mod_langswitcher_inside">
    {{iflng::en}}<span>EN</span>{{image::files/cto_layout/img/flags/gb.svg}}{{iflng}}
    {{iflng::de}}<span>DE</span>{{image::files/cto_layout/img/flags/de.svg}}{{iflng}}
    
    <a href="{{link_url::1}}"><span>EN</span>{{image::files/cto_layout/img/flags/gb.svg}}</a> | <a href="{{link_url::1}}"><span>DE</span>{{image::files/cto_layout/img/flags/de.svg}}</a>
    
    </div>
    </div>
    Den Pfeil ausblenden:

    customize.css (files/cto_layout/css/customize.css)
    Code:
    [COLOR=#222222][FONT=Menlo][SIZE=11px].mod_langswitcher .mod_langswitcher_inside:after {display:none;}[/SIZE][/FONT][/COLOR]
    ---
    Oder so: Bei nur zwei Auswahlen würde ich nur die anzeigen, die quasi umschaltet. Wenn DE, zeige EN (vise versa)

    Code:
    <div class="mod_langswitcher meta-nav">
    <div class="mod_langswitcher_inside">
    {{iflng::de}}<a href="{{link_url::1}}"><span>EN</span>{{image::files/cto_layout/img/flags/gb.svg}}</a>{{iflng}}
    {{iflng::en}}<a href="{{link_url::1}}"><span>DE</span>{{image::files/cto_layout/img/flags/de.svg}}</a>{{iflng}}
    </div>
    </div>
    Zuletzt geändert von Tim; 08.02.2021, 12:59.
    http://www.premium-contao-themes.com

    Kommentar


    • Julia
      Julia kommentierte
      Kommentar bearbeiten
      Hallo Tim,

      vielen Dank erstmal! Deinen Vorschlag nur die Sprache anzuzeigen, auf die umgeschaltet werden soll habe ich umgesetzt. Leider passiert wenn ich nun bspw. auf EN klicke nichts, also so als wäre nichts verlinkt. Die richtige Seiten-ID habe ich eingefügt, daran sollte es nicht liegen. Gäbe es hier auch eine andere Möglichkeit, als die Seiten-ID?

      Leider wird auch der Pfeil nicht ausgeblendet, obwohl ich den Code laut deiner Anleitung in der customize.css Datei eingefügt habe
      Zuletzt geändert von Julia; 08.02.2021, 15:57.

  • #3
    Ich habe mir die Verlinkung noch einmal genauer angesehen. Scheinbar liegt da die div Klasse mod_langswitcher_insider::before über den Links. Diese überdeckt EN komplett und DE zur Hälfte, wodurch es möglich ist auf das "E" von DE zu klicken. Wie bekomme ich die div. Klasse weg?
    Zuletzt geändert von Julia; 10.02.2021, 16:03.

    Kommentar


    • #4
      Du kannst mod_langswitcher_insider::before ebenfalls auf display none setzen.
      http://www.premium-contao-themes.com

      Kommentar

      Lädt...
      X