WBCE CMS Forum

dev4me

Developer

Numbers

You see them all the time these days... Those nice counters with numbers of satisfied customers, products delivered or foreign branches.

Just for fun I made this module: https://dev4me.com/modules-snippets/opensource/numbers/

florian

Administrator

Re: Numbers

Awesome! I've added it to the Addon Repository.
https://addons.wbce.org/pages/addons.ph … m&item=123

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

giz

Member

Re: Numbers

Cool! thanks for it.

with WBCE 1.4.0 and Fraggy 2.2.0 the fontawesome icons in the preview are hard to recognize.
and: is it possible to include fontisto icons as well?
and²: what does "private class" do/mean?

---

WBCE 1.6.3 - Fraggy 2.7.1 - PHP 8.3.14- All-inkl
Ein Leben ohne Hund ist möglich, aber sinnlos

florian

Administrator

Re: Numbers

with WBCE 1.4.0 and Fraggy 2.2.0 the fontawesome icons in the preview are hard to recognize.

change the very long line 22 in backend.css to

.howl-iconpicker-outer{background:rgba(0,0,0,.78);display:none;position:fixed;height:100%;width:100%;top:0;bottom:0;left:0;right:0;z-index:999999999}.howl-iconpicker-middle{display:table-cell;vertical-align:middle}.howl-iconpicker-close{background:#e83131;color:#fff;padding:10px;text-transform:uppercase;font-size:14px;letter-spacing:1px;text-align:center;width:242px;margin:0 auto;cursor:pointer}.howl-iconpicker-close:hover{background:#e62323}.howl-iconpicker{border:1px solid #ccc;background:#efefef;width:260px;margin:0 auto;//display:none;position:relative}.howl-iconpicker:active,.howl-iconpicker:focus,.howl-iconpicker:hover{display:block!important}.howl-iconpicker .geticonval .fa{font-size:28px;margin-right:10px;padding-bottom:10px}.howl-iconpicker .geticonval{background:#fcfcfc;border:1px solid #ccc;padding:10px;border-radius:3px;margin:5px;width:45px;height:45px;overflow:hidden;float:left}.howl-iconpicker .geticonval:hover{background:#efefef;cursor:pointer}.howl-iconpicker .geticonval:active{background:#ccc}.srchicons{margin:5px 5px 60px;border:1px solid #ccc;padding:10px;border-radius:3px;width:225px;position:absolute;display:block}.iconsholder{height:300px;overflow:auto;margin-top:50px}.selectedicon{background:#f55e4f!important;border-color:#f55e4f!important;color:#fff}

and: is it possible to include fontisto icons as well?

Basically yes, but that would mean a heavy rework of the module and also only either FA or Fontisto, not both of them at the same time. To be honest, I'm afraid it's not worth the effort. I know I was very euphoric about Fontisto, but in the meantime I have figured out that every time I needed a certain symbol it was not included in Fontisto.

and²: what does "private class" do/mean?

You cann add additional CSS classes there to apply additional styles to the output. Simple example: enter "greenish"  (without "") in the field and add the line

.greenish {color:green}

to your template, than that block will apear in green color.

(Edit: These are just my opinions, I am not the module author)

Last edited by florian (30.10.2019 09:49:23)

---

Sorgen sind wie Nudeln: man macht sich meist zu viele.

dev4me

Developer

Re: Numbers

with WBCE 1.4.0 and Fraggy 2.2.0 the fontawesome icons in the preview are hard to recognize.

change the very long line 22 in backend.css to

Better is to add a line below (in the "some tweaks" part). That way it will work in both themes.

.howl-iconpicker .geticonval {width: 48px;height: 48px; box-sizing: border-box;}

Next version will have this tweak added

and²: what does "private class" do/mean?

You cann add additional CSS classes there to apply additional styles to the output. Simple example: enter "greenish"  (without "") in the field and add the line

.greenish {color:green}

to your template, than that block will apear in green color.
(Edit: These are just my opinions, I am not the module author)

Exactly 
This way you can change a single block to a different layout/color/size/backgroud/etc..

Last edited by dev4me (30.10.2019 10:32:14)

giz

Member

Re: Numbers

Dankeschön für die schnelle Umsetzung!
Und das mit Fontisto dachte ich mir schon; und die Tatsache, daß immer mal wieder ein bestimmtes Icon nicht existiert, kenne ich auch 
Geht mir mit FontAwesome aber auch so.

Also danke nochmal!

---

WBCE 1.6.3 - Fraggy 2.7.1 - PHP 8.3.14- All-inkl
Ein Leben ohne Hund ist möglich, aber sinnlos

dev4me

Developer

Re: Numbers

Just released a new version. (v1.1.1)

- Fixed the double loading of FontAwesome (from CDN) if it was already loaded in the template.
- Made it mulitlanguage (EN/NL/DE)

Download: https://dev4me.com/modules-snippets/opensource/numbers/

mikra2024

Member

Re: Numbers

Guten Tag,
ich brauche bitte die Zahlen als Freitext. Das ich schreiben kann 99,999% und 100% und 35+

Wie mache ich das?

dev4me

Developer

Re: Numbers

The numbers are generated, you cannot have freetext in there.

You can add a % (or +) using the "private class" setting and some css.
Give a number a private class (i.e. 'percent')

Add this css selector to your stylesheet:

[== CSS ==]
.percent span.count.started:after {
    content: ' %';
}

That should add % after that number.