Seite 1 von 1
Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 10:48
von inno
Hallo,
gibt es ein M5-Theme mit einem Counter/Zähler mit Icons?
Grüße, Inno
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 11:25
von Tommy Herrmann
Moin,
ich habe jetzt noch nicht richtig verstanden, was Du suchst.
Mobirise hat eigentlich gar keinen Counter, sondern nur solche Zähler, die wild irgend etwas anzeigen. Oder doch - irgendwo hat auch Mobirise echte Counter ...
Ich weiß auch nicht wie Du das in Verbindung mit einem Icon jetzt verstehst.
Hier habe ich einige Beispiele mit Countern.
https://www.mobirise-tutorials.com/Busi ... untUp.html
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 11:46
von inno
... ich meine die wilden Zähler mit Icons! ;-)
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 11:54
von Tommy Herrmann
Zeigst Du bitte mal ein Beispiel oder mache einen Screenshot mit Angabe des Mobirise-Themas und Block Bezeichnung.
Icons kann man überall einbauen.
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 12:06
von inno
Code: Alles auswählen
<section class="counters counters1 petsm4_counters1" group="Counters" plugins="ViewportChecker" data-bg-video="{{bg.type == 'video' && bg.value.url}}" mbr-class="{'mbr-parallax-background': bg.parallax}">
<mbr-parameters>
<!-- Block parameters controls (Blue "Gear" panel) -->
<header>Size</header>
<input type="range" inline title="Top" name="paddingTop" min="0" max="8" step="1" value="3">
<input type="range" inline title="Bottom" name="paddingBottom" min="0" max="8" step="1" value="0">
<select title="Items" name="items">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4" selected>4</option>
</select>
<header>Show / Hide</header>
<input type="checkbox" title="Title" name="showTitle">
<input type="checkbox" title="Items Title" name="showTitles" checked>
<input type="color" title="Icons Color" name="iconColor" value="#00498d">
<header>Background</header>
<fieldset type="background" name="bg" parallax>
<input type="color" title="Color" value="#ffffff" selected>
<input type="video" title="Video" value="https://www.youtube.com/watch?v=36YgDDJ7XSc">
</fieldset>
<input type="checkbox" title="Overlay" name="overlay" condition="bg.type !== 'color'" checked>
<input type="color" title="Overlay Color" name="overlayColor" value="#ffffff" condition="overlay && bg.type !== 'color'">
<input type="range" inline title="Opacity" name="overlayOpacity" min="0" max="1" step="0.1" value="0.7" condition="overlay && bg.type !== 'color'">
<!-- End block parameters -->
</mbr-parameters>
<div class="mbr-overlay" mbr-if="overlay && bg.type!== 'color'" mbr-style="{'opacity': overlayOpacity, 'background-color': overlayColor}">
</div>
<div class="container">
<h2 class="mbr-section-title mbr-bold pb-5 align-center mbr-fonts-style" mbr-theme-style="display-2" mbr-if="showTitle" data-app-selector=".mbr-section-title">
Counters</h2>
<div class="row justify-content-center">
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 0">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">TEXT1</h4>
<span mbr-icon class="mbr-iconfont sli-people"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b> 12</b></h3>
</div>
</div>
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 1">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">TEXT2 </h4>
<span mbr-icon class="mbr-iconfont icon54-v2-office-building"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b>
22</b></h3>
</div>
</div>
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 2">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">Text3 </h4>
<span mbr-icon class="mbr-iconfont icon54-v3-note-book-write"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b>
33</b></h3>
</div>
</div>
<div class="card col-6 col-md-6 col-lg-3" mbr-if="items > 3">
<div class="card-ico">
<h4 class="mbr-content-title mbr-semibold mbr-fonts-style" mbr-theme-style="display-4" mbr-if="showTitles">Text4 </h4>
<span mbr-icon class="mbr-iconfont icon54-v2-time-app"></span>
</div>
<div class="card-text">
<h3 class="count mbr-semibold mbr-fonts-style" mbr-theme-style="display-2"><b>
33</b></h3>
</div>
</div>
</div>
</div>
</section>
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 12:15
von Tommy Herrmann
... ich weiß nicht warum Du mir jetzt den HTML-Code schreibst, wenn ich nach dem Thema und Block frage, wie soll ich das denn sonst finden?
Grundsätzlich kannst Du ja an Buttons immer ein Icon über den Icon-Editor von Mobirise einfügen (löscht Du danach wieder). Mache das mal und dann kopiere Dir den Code von dem Icon im Code-Editor.
Der sieht dann z.B. so aus:
Code: Alles auswählen
<span class="fa fa-external-link mbr-iconfont mbr-iconfont-btn" style="font-size: 16px;"></span>
Dabei ist die
class="fa-external-link" das Icon. Das habe ich z.B. unter dem Head-Bild an den Links auf meiner Startseite:
https://www.mobirise-tutorials.com/
Das ist also ein Bereichs Tag <span> mit verschiedenen Mobirise CSS-Klassen. Das kannst Du dann an beliebiger Stelle auch in beliebiger Farbe und Größe einfügen - zum Beispiel anstelle des Text1, Text2, etc.
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 12:25
von inno
Bei diesem Block waren die Icons oben über dem Zähler / Text. Ist ein M4 Block! Bei M5 werden sie nicht mehr angezeigt! Deshalb habe ich dir den Code geschickt! Ich versuche mal deinen Lösungsvorschlag!
Danke
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 12:30
von Tommy Herrmann
Das Thema "PetsM4" hat doch sogar Counter mit Icons
Re: Zähler / Counter mit Icons beim M5
Verfasst: Di 22. Nov 2022, 13:13
von inno
Super! Danke dir!!!!