Heidelpay Kreditkarte – Ceres CSS

Heidelpay ist wird standardmäßig als Whitelabel Lösung ausgeliefert. Ohne eigenes CSS sieht das Formular meist karg und traurig aus. Vertrauen wird dabei nicht unbedingt geweckt.

Es bietet sich daher an, das Formular genauso wie alle anderen Eingabefelder an den Plentymarkets-Ceres Style anzupassen.

Nachher: Heidelpay Kreditkarten-Formular mit eigenem CSS und Anpassung an Plentymarkets Ceres

Hier könnt ihr das CSS herunterladen und direkt in eurem Heidelpay Plugin hinterlegen => Download Heidelpay CSS

oder direkt kopieren

/*Heidelpay*/
.form-row {
    position: relative;
    width: auto;
    margin-bottom: 15px;
    border: 1px solid #dcdbd8;
    border-radius: 0.1rem;
    overflow: hidden;
    box-sizing: border-box;
}

.form-row input[type], .form-row textarea, .form-row input:not([type="checkbox"]), .form-row input:not([type="radio"]), .form-row .form-row-preview {
    color: #666;
    line-height: 1.6rem !important;
    font-size: 16px;
    background-color: white;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    padding: 1.5rem 1rem 0.3rem 1rem;
    width: 100%;
    outline: none !important;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    height: auto;
    display: block;
    -webkit-transition: all 0.2s;
    transition: all 0.2s;
    box-sizing: border-box;
}

.form-row label, .form-row .form-label {
    font-size: 0.875rem;
    line-height: 1em !important;
    text-transform: uppercase;
    letter-spacing: 0.1px;
    font-weight: 600;
    width: 100%;
    height: auto;
    padding: 0.35rem 1rem 0;
    margin-bottom: 0;
    color: #666;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: color 0.15s;
    transition: color 0.15s;
    cursor: pointer;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    touch-action: manipulation;
    box-sizing: border-box;
}

.form-select {
    display: inline-block;
    height: auto;
    max-width: 100%;
    padding-right: 0.75rem;
    color: #666;
    line-height: 1.6rem !important;
    font-size: 16px;
    vertical-align: middle;
    background: url('https://cdn02.plentymarkets.com/2rwe0wju4hj4/frontend/Images/ceres/arrowtopdown.jpg') no-repeat right 1rem center/8px 10px;
    background-image: none \9;
    background-size: 8px 10px;
    border-radius: 0.1rem;
    -moz-appearance: none;
    -webkit-appearance: none;
    text-transform: none;
    overflow: visible;
    border: none;
    text-align: left;
    text-align-last: left;
    line-height: 1.2em;
    padding: 1.5rem 2rem .4rem 1rem;
    background-position: calc(100% - 1rem) 2rem;
}


#accountVerificationContainer label{
    z-index: 100;
}
#accountVerificationContainer br {
    display: none;
}

#heidelpayForm iframe {
    height: 17rem !important;
}

.creditCardSymbols{
    padding-top: 13px;
}
#brand{
    font-weight: bold;
}