Ändra knapparna för ”Fortsätt” och ”Bekräfta” på kassasidorna

[ecko_wide] kassasidorna-css[/ecko_wide]

Idag finns tyvärr inte möjligheten att ändra utseende på knapparna ”Fortsätt” samt ”Bekräfta” på kassasidorna via någon inställning. Det går dock att ändra dessa via CSS, och då är det följande man lägger in under Utseende -> redigera mallen -> CSS:

[ecko_code_highlight language=”css”].checkoutButtonRow .continue-button,
.checkoutConfirmButtonRow input {
/* Nedan anger ni färgen på texten som skall vara i knappen */
color: #FFFFFF;

/* Nedan anger ni storleken på texten som skall vara i knappen */
font-size: 14px;

/* Nedan anger ni bakgrundsfärgen som visas i knappen */
background-color: #000000;

/* Nedan anger ni bredden på knappen: */
width: 160px;

/* Nedan anger ni höjden på knappen: */
height: 30px;
}

.checkoutButtonRow .continue-button:hover,
.checkoutConfirmButtonRow input:hover {
/* Nedan anger ni färgen på texten som skall vara i knappen vid MouseOver */
color: #FFFFFF;

/* Nedan anger ni storleken på texten som skall vara i knappen vid MouseOver */
font-size: 14px;

/* Nedan anger ni bakgrundsfärgen som visas i knappen vid MouseOver */
background-color: #000000;
}[/ecko_code_highlight]

Övriga egenskaper kan man också lägga innanför klamrarna {} för att påverka utseendet:
Kantlinje, tjocklek:

[ecko_code_highlight language=”css”]border: 3px solid; (eller 0 om man inte vill ha någon kantlinje)[/ecko_code_highlight]

Och om ni har en kantlinje kan man även ändra färg:
Kantlinje, färg:

[ecko_code_highlight language=”css”]border-color: #FFFFFF;[/ecko_code_highlight]

Rundade hörn på knappen:

[ecko_code_highlight language=”css”]border-radius: 10px;[/ecko_code_highlight]

1 Comment

  1. Vad jag förstår så går det inte heller att ändra knapparna Till kassa, logga in och registreringsfomulär i mallen (sidan du kommer till efter att ha klickat på ”till kassan”) Hur ser koden ut för att ändra även dessa?

    Gilla

Kommentera

Vänligen logga in med någon av dessa metoder för att lägga till din kommentar:

WordPress.com Logo

Du kommenterar med ditt WordPress.com-konto. Logga ut / Ändra )

Twitter-bild

Du kommenterar med ditt Twitter-konto. Logga ut / Ändra )

Facebook-foto

Du kommenterar med ditt Facebook-konto. Logga ut / Ändra )

Google+ photo

Du kommenterar med ditt Google+-konto. Logga ut / Ändra )

Ansluter till %s