Terug naar overzicht

Opmaak

Terug naar overzicht

Instellingen

Eigen CSS

Mededeling

Deze functie is bedoeld voor frontend-developers met kennis van CSS. We leveren geen verdere ondersteuning voor deze functie dan de kennisbank.

Je kunt custom css aan blokken toevoegen. De custom css is dan alleen van toepassing op het blok waaraan je de css hebt toegevoegd.

Je kunt dit als volgt instellen:

  • Ga naar de tab Blok en dan Opmaak en dan CSS
  • Vul hier custom CSS in.

CSS-selectors

Om bepaalde elementen van een Peggy Pay blok makkelijk te kunnen stylen, zijn er een aantal standaard css-selectors. Natuurlijk kun je ook alle gewone selectors gebruiken die css kent.

Alle DOM nodes
.all

Het hele blok
.container

De binnenste container van een blok
.inner-container

Het label van een blok
.label

Het sublabel van een blok
.sub-label

De container voor een tekstinvoer
.input-container

 

Kleuren en variabelen

Er zijn een aantal variabelen beschikbaar die je kunt gebruiken.

De hoofdkleur van je pagina
@primaryColor

De accentkleur van je pagina
@secondaryColor

De standaard tekstkleur
@fontColor

Testkleur van de labels
@textfieldLabelFontColor

Achtergrondkleur van knoppen
@buttonBackground

Tekstkleur van knoppen
@buttonFontColor

Voorbeelden

.label {
	text-decoration:underline;
	background:@primaryColor;
}

@myColor: fade(@primaryColor, 50%);

.container {
	background:@myColor;
}