nach oben
Mobirise hat das neue Icon mit einem Update auf v5.9.18 vom 19.04.2024 hinzugefügt.
Bei fontawesome.com könnt ihr nach Icons suchen. Hier habe ich den dort angegebenen SVG (Scalable Vector Graphics) Code verwendet und anstelle des alten Twitter Symbols für x.com eingefügt:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg>
Ihr ersetzt / entfernt damit also das <span> Tag unten mit dem alten Icon-Namen:
<span mbr-icon class="socicon-twitter socicon"></span>
Hier noch meine CSS, die ihr nach euren Bedürfnissen anpassen müsst:
svg {
width: auto;
height: 32px;
margin-bottom: 10px;
fill: white;
}
svg:hover {
fill: white;
}
nach oben
Diese Cards wurden mit etwas CSS bearbeitet
Unten Block aus dem Thema "CinemaM5"
Kachelweg 10
12345 Mörtel
Tel.: 0123 456 78 90
info@example.com
www.example.com
Wir bieten:
✔️ Ausbildung
❌ Praktikum
👤 Ansprechpartner Frau Gehörlos
Diese Karte wurde nicht bearbeitet. Nur ein anderer Button der am Smartphone zentriert ist.
Die Höhe dieser Karten ist aber immer gleich, die Karten von diesem Block passen sich der höchsten Karte mit dem meisten Inhalt an.
Consequatur dignissimos dolor doloremque earum esse eum excepturi fuga id modi nam nisi perspiciatis quasi qui similique suscipit.
Unten Block aus dem Thema "MissionM5"
Kachelweg 10
12345 Mörtel
Tel.: 0123 456 78 90
info@example.com
www.example.com
Wir bieten:
✔️ Ausbildung
❌ Praktikum
👤 Ansprechpartner Frau Gehörlos
Kachelweg 10
12345 Mörtel
Tel.: 0123 456 78 91
info@example.com
www.example.com
Wir bieten:
❌ Ausbildung
✔️ Praktikum
👤 Ansprechpartner Herr Gehörlos
Diese Karte wurde nicht bearbeitet. Die Höhe dieser Karten ist aber unterschiedlich, abhängig vom Inhalt.
Incididunt occaecat enim non exercitation aliqua cupidatat esse ad. Tempor magna ut Lorem voluptate cupidatat tempor Lorem. Officia aute velit enim duis pariatur aliqua Lorem proident. Sunt reprehenderit est laboris ut culpa ea minim elit nulla. Incididunt nisi voluptate enim exercitation voluptate incididunt est ad et in aliquip.
Aliquip ut amet adipisicing excepteur commodo officia mollit reprehenderit ex proident qui consequat amet sint. Quis amet officia consequat irure. Velit pariatur esse ad Lorem amet non reprehenderit commodo cupidatat ut duis. Sunt qui et qui ad id esse qui non deserunt anim dolor.
Consequat cillum laborum tempor minim culpa minim. Ipsum incididunt ex officia aute exercitation officia deserunt voluptate. Proident aliqua commodo qui nulla.
Aliquip ut tempor magna laboris commodo cillum. Veniam pariatur qui minim quis culpa magna id. Non veniam ut tempor eu commodo Lorem ex et tempor et aliquip.
When inserting an additional tab #6, the CSS for layout is missing, so the image is above the text.
# | Vorname | Name | Alter | Stadt | Postleitzahl | Strasse |
---|---|---|---|---|---|---|
1 | Mark | Williams | 67 | New York | 10004 | Broadway |
2 | Jacob | Thornton | 24 | Boston | 02108 | Main Street |
3 | Ludwig | Neumann | 39 | Berlin | 12161 | Rheinstrasse |
4 | Hubert | Schulze | 45 | München | 81671 | Bad-Schachener-Strasse |
5 | Max | Mustermann | 39 | Dresden | 01067 | Neumarkt |
6 | Michelle | Peronet | 18 | Paris | 75018 | Rue Marcadet |
Diese Tabelle trägt an einem äußeren <div> die Bootstrap class="table-responsive", damit die Tabelle auch am Smartphone horizontal scrollbar ist und nicht zu eng zusammengeschoben wird. Also vom Schema dann so:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Damit die Tabelle auf der Arbeitsseite editierbar ist, müssen die Tags <thead> und <tbody> noch das Attribut "mbr-text" erhalten, also dann so:
<thead mbr-text>
Damit die Worte nicht umbrechen habe ich noch diese CSS im "Code Editor" im Bereich "CSS Editor" hinzugefügt:
thead, tbody {
white-space: nowrap;
}
Um die Tabelle mit dem JavaScript sortieren zu können, muss diese eine ID erhalten auf die im Script verwiesen wird:
<table id="myTable" class="table table-striped table-hover">
Hier das JavaScript, dass in den Seiteneinstellungen in den Bereich "Ende of <body> code" gehört. Die zu sortierende Spalte könnt ihr mit 0 (erste Spalte) oder 1 (zweite Spalte) usw. hier eintragen:
getElementsByTagName("TD")[1]
<!-- Script sort table -->
<script>
function sortTable() {
var table, rows, switching, i, x, y, shouldSwitch;
table = document.getElementById("myTable");
switching = true;
/*Make a loop that will continue until
no switching has been done:*/
while (switching) {
//start by saying: no switching is done:
switching = false;
rows = table.rows;
/*Loop through all table rows (except the
first, which contains table headers):*/
for (i = 1; i < (rows.length - 1); i++) {
//start by saying there should be no switching:
shouldSwitch = false;
/*Get the two elements you want to compare,
one from current row and one from the next:*/
x = rows[i].getElementsByTagName("TD")[1];
y = rows[i + 1].getElementsByTagName("TD")[1];
//check if the two rows should switch place:
if (x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase()) {
//if so, mark as a switch and break the loop:
shouldSwitch = true;
break;
}
}
if (shouldSwitch) {
/*If a switch has been marked, make the switch
and mark that a switch has been done:*/
rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
switching = true;
}
}
}
</script>
Dem Button zum Sortieren habe ich mit "onclick" dann die Funktion sortTable() vom JavaScript oben zugewiesen:
<button onclick="sortTable()">Sort</button>
# | Vorname | Name | Alter | Stadt | Postleitzahl | Strasse |
---|---|---|---|---|---|---|
1 | Mark | Williams | 67 | New York | 10004 | Broadway |
2 | Jacob | Thornton | 24 | Boston | 02108 | Main Street |
3 | Ludwig | Neumann | 39 | Berlin | 12161 | Rheinstrasse |
4 | Hubert | Schulze | 45 | München | 81671 | Bad-Schachener-Strasse |
5 | Max | Mustermann | 39 | Dresden | 01067 | Neumarkt |
6 | Michelle | Peronet | 18 | Paris | 75018 | Rue Marcadet |
Diese Tabelle trägt an einem äußeren <div> die Bootstrap class="table-responsive", damit die Tabelle auch am Smartphone horizontal scrollbar ist und nicht zu eng zusammengeschoben wird. Also vom Schema dann so:
<div class="table-responsive">
<table class="table">
...
</table>
</div>
Damit die Tabelle auf der Arbeitsseite editierbar ist, müssen die Tags <thead> und <tbody> noch das Attribut "mbr-text" erhalten, also dann so:
<thead mbr-text>
Damit die Worte nicht umbrechen habe ich noch diese CSS im "Code Editor" im Bereich "CSS Editor" hinzugefügt:
thead, tbody {
white-space: nowrap;
}
Vielen Dank an dieser Stelle an Jürgen für dieses großartige Script. Das Script darf frei verwendet werden auch ohne eine Erwähnung, über einen Hinweis zu seiner Seite "j-berkemeier.de" wäre er aber natürlich immer dankbar.
Um die Tabelle wie oben sortieren zu können, könnt ihr die JavaScript Datei "TableSort.js" (v10.11 vom 18.07.2023) hier mit der rechten Maustaste downloaden ("speichern unter") oder diese natürlich auch beim Author "j-berkemeier.de" herunterladen.
Ich habe diese Datei hier in ein Verzeichnis "tablesort" kopiert und das in meinem lokalen Projektverzeichnis und auf den Server kopiert. Schreibt den Verweis zu dieser JavaScript Datei dann in den Seiteneinstellungen in den Bereich "End of <body> code":
<script src="./tablesort/TableSort.js"></script>
Gebt nun der Tabelle noch zusätzlich die class="sortierbar", die im JavaScript gegründet wird. Gebt ebenso jeder sortierbaren Spalte im Table-Head diese class="sortierbar". Nun kann durch Klick auf jede Header-Überschrift die Spalte sortiert werden.
Der Spalte "Name" habe ich hier zusätzlich die class="sortiere" gegeben, so wird diese Spalte mit dem Aufruf der Seite bereits vorsortiert und dort auch der Pfeil aufsteigend △ bereits hervorgehoben angezeigt. Damit ist es zum Beispiel auch möglich, die neuesten Einträge in einer Tabelle immer ganz oben anzuzeigen.
<table id="myTable2" class="table table-striped table-hover sortierbar">
<thead mbr-text>
<tr>
<th class="sortierbar" scope="col">#</th>
<th class="sortierbar" scope="col">Vorname</th>
<th class="sortierbar sortiere" scope="col">Name</th>
<th class="sortierbar" scope="col">Alter</th>
<th class="sortierbar" scope="col">Stadt</th>
<th class="sortierbar" scope="col">Postleitzahl</th>
<th class="sortierbar" scope="col">Strasse</th>
</tr>
</thead>
...
Wer will, kann dann auch noch den Sortierpfeilen eine andere Farbe geben und diese CSS in den "CSS Editor" des Blocks schreiben, hier z.B.:
.sortsymbol svg {
color: #6ec7f2;
}
nach oben
Hier ein Test mit animierten "LottieFiles". Hier könnt ihr fertig erstellte Animationen direkt downloaden:
https://lottiefiles.com/
Weitere Infos über das vektorbasierte Grafikformat "Lottie" bei Wikipedia.
Hier ist mein Code als Beispiel. Diesen Code fügt ihr an der Stelle des Blocks ein, wo die Animation angezeigt werden soll:
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<lottie-player src="https://lottie.host/c73f50ae-9003-405b-b5ba-a713b02ce87e/JoUEvie9NA.json" background="##FFFFFF" speed="1" style="width: 300px; height: 300px" loop autoplay direction="1" mode="normal"></lottie-player>
Social Media Icons