Badges CSS modules Joomla – WordPress

badges css

Er zijn veel handige tips en trucks binnen CSS die je kunnen helpen om je website een extra mooie uitstraling te kunnen geven. Binnen sommige templates die beschikbaar gesteld worden op internet zijn badges gemaakt met de optie om een CSS class aan je module mee te geven die de badge toont binnen je module. Deze worden meestal verdeelt in categorieën of belangrijke items die geplaatst worden. Denk hierbij aan hot – top  of new badges.

Hoe maak je nu zelf op een makkelijke manier badges?
Ik zal dat in deze post op een makkelijke manier uitleggen, het enige wat je nodig hebt is beperkte kennis van css.

Block zonder en met badge

Een normale module ziet er ongeveer als volgt uit.

dit is gewoon tekst
hier komen mijn recente berichten

En een module of block met een badge ziet er als volgt uit. Mijn afbeelding heeft de afmeting van 46×46 px.

dit is gewoon tekst maar
dan met een badge

Dit is de CSS code die daar voor gebruikt wordt. Met een verwijzing naar je afbeelding en waar deze komt te staan. Dit is dus makkelijk aan te passen naar je eigen wensen. Je kan de badge dus overal plaatsen binnen je module.

.badgetop
{ background-image: url('images/badge-top.png');
background-position: right top;
background-repeat: no-repeat;
position: relative;}

Waar gebruik je dit binnen Joomla of WordPress.

Binnen Joomla is dit ingebouwd en makkelijk te gebruiken.
Je gaat naar modulebeheer en opent de bewuste module. Vul daar bij Module classes suffix. de css class in, denk hierbij om de spatie.

badgetop-joomlaBinnen WordPress is dit niet ingebakken en zul je dus gebruik moeten maken van een plug-in om deze optie toe te voegen. Een plug-in die je hier bij kan helpen is “Widget css classes”.

widgetcssclasses

te downloaden via https://wordpress.org/plugins/widget-css-classes/

 

Op deze manier kun je dus elke badge maken die je wilt.
Veel plezier.

Tip: Gebruik firebug om te testen of aanpassingen te proberen.
Als bijlage nog een aantal standaard badges die je zou kunnen gebruiken.
Download badges

 

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.