0
HTML & PHP白盒：CSS - 周邊地區
function edds_credit_card_form($echo = true) {
global $edd_options;
if(edd_get_option('stripe_checkout', false)) {
return;
}
ob_start(); ?>
<?php if (! wp_script_is ('stripe-js')) : ?>
<?php edd_stripe_js(true); ?>
<?php endif; ?>
<?php do_action('edd_before_cc_fields'); ?>
<fieldset id="edd_cc_fields" class="edd-do-validate">
<legend><?php _e('Credit Card Info', 'edds'); ?></legend>
<?php if(is_ssl()) : ?>
<div id="edd_secure_site_wrapper">
<span class="padlock"></span>
<span><?php _e('This is a secure SSL encrypted payment.', 'edds'); ?></span>
</div>
<?php endif; ?>
<p id="edd-card-number-wrap">
<label for="card_number" class="edd-label">
<?php _e('Card Number', 'edds'); ?>
<span class="edd-required-indicator">*</span>
<span class="card-type"></span>
</label>
<span class="edd-description"><?php _e('The (typically) 16 digits on the front of your credit card.', 'edds'); ?></span>
<input type="tel" pattern="[0-9]{13,16}" autocomplete="off" id="card_number" class="card-number edd-input required" placeholder="<?php _e('Card number', 'edds'); ?>" />
</p>
<p id="edd-card-cvc-wrap">
<label for="card_cvc" class="edd-label">
<?php _e('CVC', 'edds'); ?>
<span class="edd-required-indicator">*</span>
</label>
<span class="edd-description"><?php _e('The 3 digit (back) or 4 digit (front) value on your card.', 'edds'); ?></span>
<input type="tel" pattern="[0-9]{3,4}" size="4" autocomplete="off" id="card_cvc" class="card-cvc edd-input required" placeholder="<?php _e('Security code', 'edds'); ?>" />
</p>
<p id="edd-card-name-wrap">
<label for="card_name" class="edd-label">
<?php _e('Name on the Card', 'edds'); ?>
<span class="edd-required-indicator">*</span>
</label>
<span class="edd-description"><?php _e('The name printed on the front of your credit card.', 'edds'); ?></span>
<input type="text" autocomplete="off" id="card_name" class="card-name edd-input required" placeholder="<?php _e('Card name', 'edds'); ?>" />
</p>
<?php do_action('edd_before_cc_expiration'); ?>
<p class="card-expiration">
<label for="card_exp_month" class="edd-label">
<?php _e('Expiration (MM/YY)', 'edds'); ?>
<span class="edd-required-indicator">*</span>
</label>
<span class="edd-description"><?php _e('The date your credit card expires, typically on the front of the card.', 'edds'); ?></span>
<select id="card_exp_month" class="card-expiry-month edd-select edd-select-small required">
<?php for($i = 1; $i <= 12; $i++) { echo '<option value="' . $i . '">' . sprintf ('%02d', $i) . '</option>'; } ?>
</select>
<span class="exp-divider">/</span>
<select id="card_exp_year" class="card-expiry-year edd-select edd-select-small required">
<?php for($i = date('Y'); $i <= date('Y') + 30; $i++) { echo '<option value="' . $i . '">' . substr($i, 2) . '</option>'; } ?>
</select>
</p>
<?php do_action('edd_after_cc_expiration'); ?>
</fieldset>
<?php
do_action('edd_after_cc_fields');
$form = ob_get_clean();
if (false !== $echo) {
echo $form;
}
return $form;
}
add_action('edd_stripe_cc_form', 'edds_credit_card_form');
CSS：
/*
/* Remove Page Header */
.page-id-1974 .leftside h1 {
display: none;
}
/* Remove Page Header */
.page-id-1974 .leftside h1 {
display: none;
}
/* Remove Content Box Padding */
.page-id-1974 .leftside {
padding: 0;
width: 620px;
}
/* Change Beat Store Height */
.page-id-1974 .mejs-playlist {
height: 600px !important;
margin-bottom: 0;
}
/* Top Header Color Black/Transparent */
.navigation_holder, .header_holder {
background-color: rgba(0,0,0,0.85);
}
/* Widget text and line colors */
.widget h3 {
/* color: #FFAE00; */
color: #FFFFFF;
}
.widget h3 {
font-size: 15px;
font-weight: bold;
/* color: #FFAE00; */
color: #FFFFFF;
width: 270px;
border-bottom-width: 3px;
border-bottom-style: double;
float: left;
border-bottom-color: #b50707;
padding-bottom: 5px;
margin-bottom: 10px;
}
/* Widget backround black/transparent */
.widget {
line-height: 20px;
font-size: 14px;
color: #ffffff;
/***** "color: " this changes beat buying steps color***********/
background-color: rgba(0,0,0,0.86);
float: left;
width: 270px;
margin-bottom: 15px;
box-shadow: 2px 1px 3px rgba(0,0,0,0.10);
-moz-box-shadow: 2px 1px 3px rgba(0,0,0,0.10);
-webkit-box-shadow: 2px 1px 3px rgba(0,0,0,0.10);
padding: 15px;
}
/* Main backround black/transparent */
#main {
margin-left: 10px;
background-color: rgba(0,0,0,0.83);
float: left;
box-shadow: 0 0 3px 1px rgba(0,0,0,0.10);
-moz-box-shadow: 0 0 3px 1px rgba(0,0,0,0.10);
-webkit-box-shadow: 0 0 3px 1px rgba(0,0,0,0.10);
}
/* Main BeatStore backround black/transparent */
element.style {
top: 30px;
width: 100%;
height: 30px;
}
.page-id-14 .mejs-playlist {
height: 600px !important;
margin-bottom: 0;
}
.mejs-playlist {
height: 650px !important;
/* color: #FFAE00; */
color: #FFFFFF;
margin-bottom: 15px;
clear: both;
display: block;
float: left;
overflow-y: auto;
margin-top: 30px;
background: rgba(0,0,0,0.7);
}
/* Main BeatStore Orange Highlights and red lines */
element.style {
}
#main li {
padding-bottom: 8px;
line-height: 19px;
}
.button, .widget .edd_checkout, .mejs-controls
.mejstime-rail.mejs-time-loaded, a.edd-submit, li.cat-item:hover,
.tagcloud
a:hover, .mejs-playlist li.current, .mejs-playlist li:hover,
#primary_nav_wrap ulli:hover {
background-color: #ff7600 !important;
}
.mejs-playlist li:hover, .mejs-playlist li:hover span.genre,
.mejs- playlist li:hover .pltext, .mejs-playlist li:hover .fa {
color: #ffffff;
/*background-color: #0087bf;*/
}
.mejs-playlist li.current {
color: #ffffff;
}
.mejs-playlist li {
color: white;
overflow: hidden;
font-size: 16px;
list-style-type: none;
padding: 15px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f50303;
min-height: 46px;
}
/*Content Header Colors*/
h1#content_header {
font-size: 33px;
font-weight: bold;
color: #ffae00;
border-bottom-width: 3px;
border-bottom-style: double;
border-bottom-color: #b50707;
padding-bottom: 15px;
margin-bottom: 15px;
}
element.style {
}
#main h1, #main h2, #main h3, #main h4, #main h5, #main h6 {
clear: both;
}
h1, h2, h3, h4, h5, h6, #content_header, .button, .widget .edd_checkout {
font-family: 'PT Sans';
}
h2 {
font-size: 30px;
line-height: 30px;
}
h1, h2, h3, h4, h5, h6 {
padding-bottom: 10px;
line-height: normal;
display: block;
/* color: #FFAE00; */
color: #FFFFFF;
font-weight: bold;
}
element.style {
}
#main li {
padding-bottom: 8px;
line-height: 19px;
}
#main li {
padding-bottom: 8px;
line-height: 19px;
}
.mejs-playlist li {
color: #fff;
overflow: hidden;
font-size: 16px;
list-style-type: none;
padding: 15px;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #f50303;
min-height: 46px;
}
/* FROM HERE DOWN IS WHERE YOU NARROW DOWN THE OPACITY, IT'S LABELED
BELOW */
.mejs-playlist li.current {
/* background-color: #bf0101 !important;*/
background-color: rgba(193,1,1,0.5) !important;
opacity: .5;
/* OPACITY ADDED */
}
.mejs-playlist li.current:hover {
/* background-color: #bf0101 !important;*/
background-color: rgba(193,1,1,0.5) !important;
opacity: .5;
/* OPACITY ADDED */
}
.mejs-playlist li:hover {
/* background-color: #bf0101 !important;*/
background-color: rgba(193,1,1,0.5) !important;
opacity: .5;
/* OPACITY ADDED */
}
a:first-child {
color: red;
}
#main label, legend {
color: #FFAE00;
}
span.edd-cart-item-title {
color: #ffffff;
}
span.edd-payment-mode-label {
color: #FFAE00;
}
#edd-email-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-first-name-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-last-name-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-card-country-wrap > span:nth-child(2) {
color: #FFAE00;
}
#edd-card-zip-wrap > span:nth-child(2) {
color: #FFAE00;
}
.edd_checkout_cart_item_title {
/* controls color of the text for the song title in the checkout */
color: #FFAE00;
}
/* Checkout table part 1 */
tr.edd_cart_header_row {
opacity: .5;
}
/* Checkout table part 2 */
tr.edd_cart_item {
opacity: .5;
}
#edd_cc_fields {
/* controls font color of the titles in "card info section" */
color: #FFAE00;
}
#edd_checkout_form_wrap > span.edd-description {
color: #FFAE00;
}
li.cart_item:nth-child(2) {
color: black;
}
#edd-remove-from-cart {
color: red;
}
#edd_remove_from_cart {
color: red;
}
th.edd_cart_actions {
color: #ffffff;
}
/***********************************************************/
#edd_checkout_cart th {
color: #FFAE00;
}
#edd_checkout_cart td {
background-color: #610202;
color: #FFAE00;
}
#edd_checkout_cart .edd_cart_header_row th {
background-color: #610202;
color: #FFAE00;
}/* #edd_discount_code { */
/* for some reason this will allow me to control opactiy, but not the
color? And it won't allow me to take the opacity past .5 (strange) */
/* background-color: #610202; */
/* opacity: .5; */
}
#edd-card-number-wrap, #edd-card-cvc-wrap, #edd-card-name-wrap,
.card- expiration, .edd_before_cc_fields, #edd_before_cc_fields {
background-color: #610202;
color: #FFAE00;
}
我遇到的問題是周圍的紅色部分，其中的白色邊框客戶將輸入他們的卡信息。我試過了我能想到的一切。我試過添加一個z-index。我試圖添加一個周圍的div標籤，然後將CSS應用到它，但它不起作用。白色區域仍然優先。我試圖通過使用「*」來改變一切的背景，甚至沒有改變白色部分。如果有人能幫忙，我會非常感激。謝謝...
添加一個jsfiddle與生成的HTML和CSS，將更容易爲您調試。我懷疑保證金或填充的地方.... –