Saldochecker opmaak

Saldochecker 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.
o Plaats bij de .body klas:
background-color: blue;
o
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.loyaltymanager.nl/BalanceChecker/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:
<iframe id="saldoframe"
src="http://www.loyaltygroup.nl/CardHolders/balance.dll/?id=300406C54483;cssurl=htt
p://www.mijnwinkel/saldochecker.css" frameborder="0" scrolling="no"
style="width:175px;height:154px;"></iframe>
Indien u een transaparante achtergrond wilt verkrijgen (zie ook background-color), voeg dan
allowtransparency="true" toe aan het IFrame, bijvoorbeeld:
<iframe id="saldoframe"
src="http://www.loyaltymanager.nl/BalanceChecker/balance.dll/?id=300406C54483;cssur
l=http://www.mijnwinkel/saldochecker.css" frameborder="0" scrolling="no"
style="width:175px;height:154px;" allowtransparency="true"></iframe>
Indien het css bestand en de koppeling aan het css bestand correct zijn, zal de saldo checker volgens uw eigen
opmaak weergegeven worden.
© 2011 Loyaltygroup