Terug naar overzicht

Ontwerp - Custom CSS voor blok-opmaak

Geschreven door Wim - {$BlogTitle}
Geschreven door: Wim
Datum: Vrijdag 17 juli 2020

Als de basis-instellingen niet toerijkend zijn voor wat jij als designer wilt, dan kan je custom css aan blokken toevoegen. Per blok kan je css toevoegen welke alleen van toepassing zijn op dat blok. Bijvoorbeeld een drop-shadow om je kassakoopje.

Ook kan je gebruik maken van de Less-syntax.

Voorbeelden

 

.label {
	text-decoration:underline;
}

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

.container {
	background:@myColor;
}

CSS-selectors

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

Selector Doel Voorbeeld
.all Alle DOM nodes 
.all { color:white; }
.container Het hele blok 
.container {
	background:url(..);
	box-shadow:..;
	..
}
.inner-container De binnenste container 
.inner-container {
	border-radius:0;}
	..
}
.label Het label van het blok 
.label {
	font-weight:bold;
	border-bottom:2px solid white;
	..
}
.sub-label Het sublabel van het blok 
.sub-label {
	font-size:12px;
	color:blue;
	..
}
.input-container De container voor het input-element, zonder labels en validatiemeldingen etc. 
.input-container {
	background:red;
	padding-bottom:20px;
	..
}

Kleuren en variabelen

Er zijn een aantal variabelen beschikbaar die je kan gebruiken.

background:@primaryColor;
border:2px solid @primaryColor;
Variable Doel
@primaryColor De hoofdkleur van je pagina
@secondaryColor De accentkleur van je pagina
@fontColor De standaard tekstkleur
@textfieldLabelFontColor Testkleur van de labels
@buttonBackground Achtergrondkleur van knoppen
@buttonFontColor Tekstkleur van knoppen
Verder lezen? Verkoopfacturen downloaden