Codesnippets: eine Sammlung von Html-, Css- und Javascript-Snippets + Grafik-Hacks!

Bei einer riesigen Anzahl an Banner-Grafiken, die als JPG exportiert werden, macht es Sinn, je Zeitungstitel (bspw. HA oder BM) eine InDesign-Datei mit allen geforderten Bannerformaten zu erstellen. Das Problem: beim Export der einzelnen Dateien werden diese lediglich mit dem Namen der InDesign-Datei benannt. In diesem Artikel findest Du die Lösung dafür!

Codesnippets: Eigentlich war diese Seite als Sammlung für Codeschnipsel für die Jimdo-Seiten unsere Kunden gedacht. Da diese Aufgaben nun weniger werden, wird es Zeit, diese Seite vielleicht auch für Indesign-, Photoshop- und Illustrator-Tipps zu nutzen.

In diesem Beispiel möchten wir den Seitentitel und das Logo einer Jimdoseite ohne komplizierte Positionierungen in der Reihenfolge ändern.

Fotos oder Hintergrundfarben über die gesamte Seite plazieren: Dieses Script erlaubt es mehrere Hintergrundfotos über die gesamte Seite zu plazieren.

Wenn Du mehrere mit gleichen PDF-Settings zu exportierende InDesign-Dateien hast und diese nicht alle händisch öffnen und exportieren willst, gibt es ein tolles Script. Ließ hier, wie Du das einsetzt und installierst!

In letzter Zeit kommt es immer wieder dazu, dass sich die beliebten Kontaktboxen aus dem Footer nicht mehr in den Headerbereich per position: absolute positionieren lassen. So löst ihr das Problem: 

Seitenbreite Elemente werden immer wieder eingesetzt, um auffällig die Seite zu unterbrechen/Highlights zu setzen. Diese führen aber fast immer zum unerwünschtem seitlichen (horizontalem) Scrollen. So wirkst Du diesem entgegen:

Auf der Seite Germania Akademie wurde der Text des Kontrolkastens von
"The Privacy Policy applies" auf deutsch "Ich habe die Datenschutzerklärung zur Kenntnis genommen" über css geändert .

Um wiederkehrende für so gut wie jede Seite Elemente, wie dem Impressumshinweis gleich finden zu können, ist eine neue Box oben rechts entstanden. Unfassbar lecker und dann auch noch mit einer Suchfunktion, um die unfassbaren Tiefen dieser Seite zu erreichen. Wem noch Links in der Liste fehlen, kann sie selbst in die Box einsetzen, oder T-2-the-imo Bescheid sagen!

Mittlerweile haben wir einige Artikel hier zusammengetragen. Das führt leider dazu, dass Jimdo nicht mehr alle Artikel aufführt, weshalb ich schnell die externe Suche von Findberry hier eingefügt habe – ist ab sofort im Footer platziert! 🙌

Auf der Seite Grigoleit hatte ich das Problem, dass das Youtube-Video sich nicht an die Bildschirmbreite anpassen wollte. Das habe ich wie folgt gelöst.

Da bei externe links leider keine Optionen wie Target -type seitens jimdo bereitsgestellt werden  müssen wir das per java-script korrigieren

Ziel Links sollen nicht  in einen neuen Fenster sonder das gleiche fenster vverwenden

Ab sofort wird der Absender auf jede WSS-Page über einen Java-Script eingebaut

Zuküntig werden Änderungen zentral für alle Websites an einer stelle gepflegt

Inhalt

Die am Seitenrand positionierten floatenden Kontaktbox ist von vielen Kunden gewünscht: Mit diesem Code-Snippet brauchst Du nur noch die Infos austauschen und ggf. die Hintergrundfarbe abändern!

Hiermit wird das Jimdo CSS und HTML-Markup verwendet um die Social-Icons mit einen eigene Linkziel auf die seite zu platzieren

Mit "Even and odd rules" einfach Tabellen optisch aufwerten geht aber auch für alle Elemente innerhalb eines Kontainer wir z.B. ein DIV

Eigenschaften und Styles können ohne Class durch Zählung vergeben werden

Hier wird ein Accordeon ohne Java-Scrippt erstellt

Childen Elemente ohne eigene CSS-Class mit css ansprechen und gestalten

Wir spielen ja gerne mal mit Elementen, die links und rechts aus dem Browserrand farbig auslaufen sollen.

Hier erkläre ich euch wie das geht!

Diese kleinen ausfahrbaren Elemente sind ja manchmal auch ganz schickt. Besonders für Telefonnummern oder Adressen oder E-Mail-Adresse, die man nicht in einem großen Störer präsentieren will.

Der Jimdo-Slider ist immer genauso breit, wie der Content-Bereich im Jimdo-Template. Wie Du mit einem kleinen Code-Schnipsel den Slider auf volle Fensterbreite bringen kannst, ließt Du in diesem Beitrag

Hiermit wir eine Zusatznavigation für die Seite erstellt diese lässt sich auf und zu klappen

Die kleinen Aufzählungszeichen, gerne auch Bullets genannt, tausche ich gerne durch Icons oder kleine Grafiken aus, um der Seite einen individuelleren. Und so geht's!

Ich (T-2-the-imo) brauche fast auf jeder Seite Teaser auf der Startseite. Im groben sehen Teaser immer gleich aus: farbiger Hintergrund, abgerundete Ecken, Teaserheadline/-text und ein Button, der meist auf gleicher Höhe sein soll.

Der Cookie Hinweis soll bei Beeinflussung bzw. Störung des Designs unten positioniert werden

Um unseren Code zu strukturieren und für andere und einen selbst zu verdeutlichen, können wir Code-Schnipsel auskommentieren oder den Code direkt gliedern und aufteilen.

Manchmal möchte ich die li's in der Subnavigation stärker durch einen Trennstrich voneinander trennen.

Mit folgendem kurzen Befehl könnt ihr alle li's in einer Subnavigation ansprechen und das letzte li dabei ausschließen.

Wollt ihr mal nette Teaser generieren und seid zu faul diese in Spaltenelementen langwiedrig einzupflegen?

Mit der kurzen Anleitung könnt ihr die Alt-Tags in der Jimdo-Bildergalerie ganz einfach anzeigen lassen.

Wenn Du z. B. auf jeder Unterseite verschiedene Bilder per css einfügen möchtest, sprichst Du normalerweise die page-ID einer Seite an. Start- und Datenschutzseite haben eine ID. Um hier zu unterscheiden, brauchst Du nur die folgende Klasse.

Die Kontaktbox soll meistens immer sichtbar sein. Also wird diese im Footer platziert und per position: absolute in den sofort sichtbaren Bereich geschoben. Auf der Website siehts gut aus – im Bearbeitungsmodus ist die Kontaktbox nicht mehr zu finden. Hier hilft die CSS-Class .cc-pagemode-default weiter!

Mit sogenannten Mediaqueries kannst Du Breakpoints setzen, um bspw. die Navigation ab einer gewissen Breite in ein kleines Symbol zu verwandeln oder zwei Spalten nicht mehr nebeneinander sondern auf Smartphones untereinander anzuzeigen.

Style deine Navigation so wie du es schön findest. Sobald du scrollst und eine bestimmte Höhe erreich hast, kannst du deine Navigation im Zustand verändern. Du kannst sie in der Position fix machen, ihr eine andere Farbe geben, sie verkleinern oder alle Dinge machen, die per CSS möglich sind.