CSS - White box surrounding area - css

Question

HTML & PHP:
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;
}
The issue I'm having is with the white border around the red section where the customer will be entering in their card details. I've tried everything that I can think of. I've tried adding a z-index. I've attempted to add a surrounding div tag and then apply css to it, but it didn't work. The white area still took precedence. I've tried to change the background of everything by using a "*" and even that didn't change the white section. If anyone can help, I'll greatly appreciate it. Thanks...

Answer 1

You can use the inspect tool in Chrome or Firefox by right clicking the element you want to view and clicking inspect. While inspecting your site, http://www.exiledgrounds.com/checkout/. I found that the white background was being caused by #edd_checkout_form_wrap fieldset#edd_cc_fields. I can't find that in your HTML or CSS, so it must be getting styled from another CSS stylesheet.
Once you find where it is you can just remove the background property or set it to the color you want.