Saldo Checker opmaak

Saldo checker opmaak wijzigen

De opmaak van het inlog en saldo scherm kan nu ook gewijzigd worden:

achtergrondkleur (ook transparant), achtergrondafbeelding, lettertype, tekenstijl, lettergrootte,
letterkleur, randopmaak invoervelden, weergave knoppen etc.
Wat niet gewijzigd kan worden is de positie van de diverse teksten, velden en knoppen.

Indien u geen kennis heeft van het maken van websites en zich ook niet in technische kwesties ervan wilt verdiepen,
dan raden wij u om de standaard opmaak te gebruiken (u hoeft dan verder niets te doen) of iemand met enige kennis van zaken in te schakelen.

Het wijzigen opmaak van de saldo checker kan uitgevoerd worden door deze te koppelen aan uw eigen stylesheet (.css bestand).
Hiertoe dient eerst een stylesheet ontworpen te worden.

Ontwerpen stylesheet

Er dient een stylesheet ontworpen te worden en ergens op het internet opgeslagen te worden.

Een stylesheet kan ontworpen worden in een HTML editor, maar ook in Kladblok.

De saldo checker is nu gekoppeld aan de het bestand http://www.loyaltygroup.nl/CardHolders/css/style.css

Open dit bestand en wijzig de verschillende stijlklassen.
De elementen waarvoor de klassen gebruikt worden staan in commentaar (/*) onder de namen van de klassen weergegeven,
zo staat bijvoorbeeld de klasse .input voor de opmaak van de invoervelden postcode, huisnummer en pasnummer.

Voorbeelden

U wilt een blauwe achtergrond en gele invoervelden met grote, vette rode letters.

Plaats bij de .body klas: background-color: blue;

Plaats bij de .input klas: background-color: yellow

color: red; (letterkleur)

font-size: 12pt; (letterkleur)

font-weight: bold;

Het scherm kan ook transparant gemaakt worden, zodat bijvoorbeeld een afbeelding die u op een webpagina waarin de saldo checker geplaatst is zichtbaar blijft.
Plaats bij de .body klas: background-color: transparent;

Zo kunt u ook de inlogknop door uw eigen afbeelding vervangen. Plaats bij de .loginbutton klas:

background-image: url(http://www.mijnbedrijf.nl/images/button.jpg) (fictief)

Opslaan stylesheet

Sla het bestand op als .css bestand en plaats het op het Internet (waar uw eigen website staat),

Bijvoorbeeld: http://www.mijnwinkel/saldochecker.css (fictief).

Koppelen stylesheet aan saldo checker

Om de saldo checker in uw webpagina te tonen heeft u een code gekregen, bijvoorbeeld:

<iframe id="saldoframe" src="http://www.loyaltygroup.nl/CardHolders/balance.dll/?id=300406C54483" frameborder="0" scrolling="no" style="width:175px;height:154px;"></iframe>

Achter de code met 12 cijfers dient u ;cssurl= en het volledige pad naar uw css bestand toe te voegen, bijvoorbeeld:

Indien u een transaparante achtergrond wilt verkrijgen (zie ook background-color), voeg dan allowtranparency toe aan het IFrame, bijvoorbeeld:

Indien het css bestand en de koppeling aan het css bestand correct zijn, zal de saldo checker volgens uw eigen opmaak weergegeven worden.