Mehrsprachige Webseiten mit CSS erstellen
Aufgrund der großen Resonanz auf mein facebook-Posting habe ich beschlossen, den Trick auch hier im Forum zu veröffentlichen. Making Jimdo Better - und der gegenseitige Austausch ohne Copyrights ist mir ein echtes Anliegen.
Ich bin übrigens im Gegenzug auch sehr Euren Lösungen interessiert. Ihr könnt mich auch gern privat anschreiben (info@redesign-berlin.de), wenn ihr etwas interessantes gefunden habt!
hier noch einmal, worum es geht:
..für mehrsprachige Jimdo-Seiten:
Ein kleines Script im Content läd eine CSS-Datei über einen Link in den Head der Seite. Diese bewirkt, dass je nach gewählter Sprache die Links der Navigation ausgeblendet bzw. angezeigt werden.
- funktioniert auch bei responsive Sites
- lässt die erste Nav-Ebene unberührt
Beispiel: http://language-changer.jimdo.com/
Fortsetzung folgt...
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= 
) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...Fortsetzung
Der Trick ist folgender:
Erstellen der Sprachdateien
Ich habe 2 CSS-Dateien erstellt, auf denen jeweils die NavItems ausgeblendet werden, die nicht zur jeweiligen Sprache passen (display:none;). Gleichzeitig werden diejenigen wieder eingeblendet werden, die das tun (display:initial; oder display:block;).
Beispiel:
1. für deutschsprachige Seiten: de.css
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*change language (de)
------------------------------*/
/*englisch*/
#cc-nav-view-2492225935 a,
#cc-nav-view-2492226035 a,
#cc-nav-view-2492226135 a {
display: none;
}
/*deutsch*/
#cc-nav-view-2492226335 a,
#cc-nav-view-2492226235 a,
#cc-nav-view-2492225835 a,
#cc-nav-view-2492225735 a {
display: block !important;
}
und
2. für englischsprachige Seiten:
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/*change language (en)
-----------------------------*/
/*deutsch*/
#cc-nav-view-2492226335 a,
#cc-nav-view-2492226235 a,
#cc-nav-view-2492225835 a,
#cc-nav-view-2492225735 a {
display: none;
}
/*englisch*/
#cc-nav-view-2492225935 a,
#cc-nav-view-2492226035 a,
#cc-nav-view-2492226135 a {
display: block !important;
}
Diese beiden Dateien lade ich auf einer versteckten Jimdo-Seite hoch. Danach kann ich sie über die download-Links wieder auf meiner Seite einbinden.
Fortsetzung folgt...
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...Fortsetzung:
Einbinden der Sprachdateien:
Als nächstes wird auf jeder deutschsprachigen Seite das die CSS-Datei "de.css" in den Head eingebunden (...und auf jeder englischsprachigen die datei "en.css").
Das geschieht über ein kleines JQuery-Script in einem html-Widget-Element, welches ich an erster Stelle im Content setze:
<p class="hide">
jQuery append CSS to head
</p>
<script type="text/javascript">
//<![CDATA[
$('head').append('<link rel="stylesheet" href="http://51023348.swh.strato-hosting.eu/_test/de_en/de.css" type="text/css" />');
//]]>
</script>
für die englischsprachigen Seiten dito:
<p class="hide">
jQuery append CSS to head
</p>
<script type="text/javascript">
//<![CDATA[
$('head').append('<link rel="stylesheet" href="http://51023348.swh.strato-hosting.eu/_test/de_en/en.css" type="text/css" />');
//]]>
</script>
...in meinem Beispiel liegen die CSS-Dateien auf einem externen Server (rot=Pfad/Adresse) - das geht natürlich auch!
Changing Languages / Sprache wechseln
Für den Wechsel der Sprachen habe ich einfach in der Sidebar zwei Links platziert: DE zielt auf "root" = "http://language-changer.jimdo.com/" und EN zielt auf "home" = "http://language-changer.jimdo.com/home/" - das kann man natürlich auch mit Grafiken machen (...schöner!)
Anschliessend muss man diese Schaltflächen nur noch unter der Navigation positionieren (z.B.: position: absolute; top: 150px;)
...das war's schon. Primitiv, aber funzt!
Wenn Ihr Fragen habt, fragt!
LG, az
PS: damit die Links der jeweils anderen Sprache beim Sprachwechsel nicht immer kurz "aufflammen", blende ich im CSS der Seite (head-Bereich) einfach sämtliche Nav-Links aus:
2
3
4
5
6
7
8
9
10
11
/*change language
-----------------------*/
#cc-nav-view-2492226335 a,
#cc-nav-view-2492226235 a,
#cc-nav-view-2492225835 a,
#cc-nav-view-2492225735 a,
#cc-nav-view-2492225935 a,
#cc-nav-view-2492226035 a,
#cc-nav-view-2492226135 a {
display: none;
}
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Bild:
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Hallo @JoyJoy,
...nein, ich habe die Seite ganz normal angelegt, mit allen Hauptseiten auf der ersten Nav-Ebene (MainNav):
Der Trick ist, dass das CSS die Navlinks, die nicht gebraucht werden, einfach ausblendet werden. Und die englischen Seiten benutzen einfach ein anderes CSS als die deutschen.
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
...dieses Tutorial ist überholt! Ich habe eine bessere Methode gefunden:
- https://language-changer3.jimdo.com/
LG, az
Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).
Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!
...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de
Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de
Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html
Ähnliche Themen
Jetzt anmelden!
Jetzt registrieren!
