Snygga till din kassa med hjälp av CSS

[ecko_wide]snygga till kassan med css [/ecko_wide]

Med hjälp av CSS kan du i stor utsträckning påverka utseendet i din butik.
För dig som inte kan, vill eller har tid att själv skriva egen kod finns här en kod som förändrar utseendet i kassan.

Ny-kassa

[ecko_alert color=”orange”]Notera att denna färdiga mall inte är optimerad för Klarna Checkout. Om du vill använda denna CSS och Klarna Checkout samtidigt kan du justera koden efter eget bevåg. [/ecko_alert]

snygga till din kassa med CSS

Gör så här:

1. Skapa en ny kopia på din aktiva mall under Utseende. Detta för att inte påverka er aktiva butik. ( ni kan behöva ställa in mått osv först, om så krävs.)

2. Kopiera koden nedan och klistra in den under ”Utseende” →  [Redigera mall] →  Fliken ”CSS”.

3. Visa mallen och gå till kassan för att se vad ni behöver justera i höjd och bredd. (Punkt 1 & 2 i CSS nedan)

4. Ser det bra ut, aktivera mallen.

Punkt 1 CSS:
Detta sätter en höjd på boxen för att linjera i botten med de högerställda boxarna. ( Inget måste att justera, men det ser snyggare ut.)

Punkt 2 CSS:
Sätter bredden på boxarna i högerspalt, justera så det blir likvärdig marginal mot vänsterboxen som under boxarna.

Punkt 3 CSS:
Vill ni öka eller minska avståndet under boxarna kan ni göra detta här.

Punkt 4 CSS:
Detta är enbart så ni kan ändra utseendet på boxarna (förklaring nedan,#f7f7f7 är färgkoden)

Bakgrundsfärgen background-color:#F7F7F7;
Kantlinjen: border: 1px solid #CCCCCC;
Marginalen innanför boxen: padding: 15px;

Punkt 5 CSS:
Detta är enbart så ni kan ändra utseendet på textfält (förklaring nedan, #f7f7f7 är färgkoden)

Sätter avståndet i textfält padding:6px;
Kantlinjen: border: 1px solid #ccc;
Rundade hörn border-radius: 2px;
Skall inte röras width:100% !important;

Kod som skall infogas i fliken CSS:

[ecko_code_highlight language=”css”]/* Sätter höjden på boxen till vänster så den linjerar med högersidan, ändra värdet tills den linjerar / CSS Punkt 1 */

.checkoutBuyerForm {
min-height: 617px;
}

/* Sätter bredden på boxarna på högersidan / CSS Punkt 2 */

.checkoutMessageToShop, .checkoutSelectDelivery, .checkoutSelectPayment, .checkoutSelectCurrency, .checkoutDiscountCode {
width: 41%;
}

/* Sätter avståndet under boxarna / CSS Punkt 3 */

.checkoutBox, .checkoutButtonRow {
margin-bottom: 20px;
}

/* Sätter utseendet på boxarna / CSS Punkt 4 */

.checkoutBox, .basketBox, .basketPageBasketBox {
background-color: #F7F7F7;
border: 1px solid #CCCCCC;
padding: 15px;
}

/* Sätter utseendet på text-fält och textrutor / CSS Punkt 5 */

input.buyerfield, .checkoutBox select, .checkoutBox textarea, .contactfieldtext, .loginfieldtext, .contactfieldvalue input[type=”text”],.registerfieldtext, input[name=”by_username”], input[name=”by_email”], .checkoutDiscountCode input[type=”text”], input#giftcode {
padding: 6px;
border: 1px solid #ccc;
border-radius: 2px;
width: 100% !important;
}

/* Detta skall ni inte behöva röra */

.checkoutDiscountCode input[type=”text”], input#giftcode {
margin: 0 0 3px 0;
}

#buyerField_city, #buyerField_zip, #buyerField_deliv_zip, #buyerField_deliv_city {
width: 45% !important;
}

.checkoutBuyerForm {
width: 45%;
float: left;
}

.checkoutMessageToShop, .checkoutSelectDelivery, .checkoutSelectPayment, .checkoutSelectCurrency, .checkoutDiscountCode {
float: right;
clear: right;
}

.checkoutMessageToShop textarea, .checkoutDiscountCode input[type=”text”] {
width: 100% !important;
}

.checkoutBox, .checkoutButtonRow {
margin-top: 0;
}

.checkoutAcceptance {
clear: both;
}

.checkoutButtonRow {
clear: both;
}[/ecko_code_highlight]

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