[John CParticipant]

I did some styling for the audio player so it works with the clients colour scheme but after one of the updates (not sure which one as its only just been brought to my attention) it is now not working.

I have added this CSS to the Integrity Stack Child theme style.css

Can you help please.

Thx
—
John

/*Audio Player Style */

.mejs-time-total {
background-color: #ffffff;
border: 1px solid #80ba27;
}

.mejs-time-current {
background-color: #7e1974 !important;
box-shadow:none !important;

}
.mejs-time-loaded {
background-color: #ffffff;
}

.mejs-button.mejs-playpause-button {
border-right: 1px solid #fff;
}
.mejs-button button {
color: #fff;
}

.mejs-controls {
background-color: #80ba27;
background-image: none;
background-repeat: repeat-x;
border-color: white;
border-radius: 0px;
box-shadow: none;
}

.mejs-controls > div {
line-height: 30px;
}

.mejs-time {
color: #ffffff;
text-shadow: none;
}

.mejs-button button:hover {
color: #7e1974;
text-shadow: none;
}

.mejs-button.mejs-volume-button, .mejs-button.mejs-fullscreen-button {
border-left: 1px solid #ffffff;
box-shadow: none;
}

[ThaiModerator]

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

[John CParticipant]

The URL is http://www.wisehippo.com

As it is in development sometimes it will be online other time offline/under construction.

Thanks
—
John

[ChristopherModerator]

Hi there,

I’m not sure how it used to look, if there is example page or screen shot which can show us how it should look, it would be helpful.

Please add these codes and modify them as you wish :

.mejs-controls {
    background-color: #ffffff !important;
    border: 1px solid #80ba27;
    background-image: none;
}
.mejs-button button {
    color: #000;
}

.mejs-time-loaded {
    background-color: #545454;
}

hope it helps.

[John CParticipant]

That’s what I thought and have done. I have added the amended css above into my Child Theme’s style.css but no changes are showing. They were but since one of the updates they no longer seem to do anything.

[John CParticipant]

This reply has been marked as private.

[ThaiModerator]

Hi There,

The previous CSS code is working fine.

In this case, would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link to your site
– WordPress Admin username / Password

Don’t forget to select Set as a private reply. This ensures your information is only visible to our staff.

Thanks.

[John CParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi John,

Upon checking, there is a closing curly bracket missing from your child theme’s style.css file that caused the rest of the CSS code not to work (see: http://prntscr.com/8e1ygj). So, please add that closing curly bracket (i.e. } ) to the pointed location or replace your entire CSS code from that file with this:

/*

Theme Name: X – Child Theme
Theme URI: http://theme.co/x/
Author: Themeco
Author URI: http://theme.co/
Description: Make all of your modifications to X in this child theme.
Version: 1.0.0
Template: x
 
*/

@import url(http://fonts.googleapis.com/css?family=Bilbo);

.x-brand img {
width: 100% !important;
}

body {
    background-color: #ffffff !important;
    background-image:none !important;
        }

body, input, button, select, textarea {
  font-family: 'Century Gothic', "Lato","Helvetica Neue",Helvetica,sans-serif !important; 
}

.x-topbar {
    border-bottom: 0px solid #f2f2f2;
    }
    
.x-navbar .x-nav > li > a {
  font-family: 'Century Gothic', "Lato","Helvetica Neue",Helvetica,sans-serif !important;
  font-weight: 400 !important;
}

.entry-wrap {
    display: block;
    padding: 0px;
    background-color: #fff;
    border-radius: 0px;
    box-shadow: none;
}
    
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {

	font-family: 'Century Gothic', "Lato","Helvetica Neue",Helvetica,sans-serif !important;
	font-weight: 400 !important;
	letter-spacing: 0px !important;
}

h1, .h1 {
    margin-top: 1em;
    font-size: 225%;
    line-height: 1.1;
}
h2, .h2 {
    font-size: 200%;
    line-height: 1.2;
    margin-bottom: 0.75em;
}
h3, .h3 {
    font-size: 175%;
    line-height: 1.3
}
h3, h4, h5, h6, .h3, .h4, .h5, .h6 {
    margin-top: 0em;
    margin-bottom: 0.75em;
    line-height: 1.2
}
h4, .h4 {
    font-size: 150%;
    color:#80ba27
}
h5, .h5 {
    font-size: 150%
    color:#000000;
	
}
h6, .h6 {
    font-size: 110%;
    color: black;
    letter-spacing: -1px !important;
    margin-bottom: 1em;
}

b, strong {
  font-weight: bold;
}
   
.green {
	color:#80BA27 ;
	
}

.purple {
	color: #7E1974;
	
}

.pink {
	color: #F08CB5;

} 

.purple h1 span {
	color: #7E1974;
	/*border-style: :none;*/
}

/* 20px Indent*/

#indent-20 { 
	margin:20px 0px 20px 20px;
	padding:0px;
}

/*	div.entry-content ul          { list-style:none; padding:0; margin:0px 0px 25px 30px ; }

div.entry-content li          { padding-left:0.75em; position:relative; }

div.entry-content li:before   { content:"•"; color:#80BA27; position:absolute; left:-0.75em; }

 div.entry-content ul {
    list-style: none;
    padding:25px;
    margin:0;
}

div.entry-content li { 
    padding-left: 1em; 
    text-indent: -.7em;
}

div.entry-content li:before {
    content: "•\2001";
    color: #80BA27;
} */

.x-ul-icons li { margin-bottom: 0px; padding-bottom: 0px; list-style: none;}
.x-ul-icons .x-icon-check {
    
    color: #80BA27;}

.x-nav > li {
    letter-spacing: 0px !important;
}

blockquote p{

font-family: 'Bilbo', cursive;
font-weight: Normal;
font-size: 110%;
Color:#4B4B4B;
}

.h-widget {
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 40px;
    margin-left: 0px;
    font-size: 150%;
    line-height: 1;
}
.rounded-corners {
	
	border-radius: 5px; 
	-moz-border-radius: 5px; 
	-webkit-border-radius: 5px; 
	border: 4px double #E7D9E7; 
	box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.05);
}

.rcc { /* This for Round Images */
	
	border: 4px double #E7D9E7 !important;
	box-shadow: 0 0.15em 0.35em 0 rgba(0, 0, 0, 0.1) !important;
}

.double-line {
	
	border-bottom: 1px solid #f0f0f0;
	border-top: 1px solid #f0f0f0;
	height:5px;
}

/* Custom Footer Formatting */

#custom-footer {
	width:50%;
	margin:0 auto;
	
}
#custom-footer-left-col {
	float:left;
	text-align:right;
	width:20%;
	
}
#custom-footer-col-2 {
	float:right;
	width:80%;
}
#custom-footer-center-col {
	float:left;
	width:70%;
	letter-spacing: 0px;
	line-height: 1.5;
	
	Text-align:center;
}
#custom-footer-right-col {
	float:right;
	width:30%;
		text-align:left;
}
/* END - Custom Footer Formatting */

/* below - Marketing Materials PayPal Tables */

table#marketing-materials tbody td {
border:none  !important;
padding: 0px !important;
}

/*WOO COMMERCE*/

div.product-addon .addon-name{
	font-size: 100%;	
    margin-bottom:0px;
    font-weight: bold !important;  
}

div.product-addon .addon-description p{
	font-size: 80%;	
    margin-bottom:0px;
    font-style: normal !important;
}

div.product-addon .required{
	font-size: 70%;
    color:#7E1974;
	border-bottom: None;
		}
	
div.product-addon .form-row {
	margin-top: 8px;
	margin-bottom: 0px;
}

div.product-addon {
	margin-bottom: 0px;
	margin-top: 0px;
}

td.product-name p{
	line-height: 1.3;
	margin-bottom: 0px;
	margin-top: 0px;
	padding-left:15px;
}

td.product-name a {
 	font-size:110%;
 	margin-bottom: 0px;
}

.woocommerce li.product .entry-header h3, .woocommerce-page li.product .entry-header h3 {
  
  font-size: 100% !important;
  
}

@media (min-width:760px){
.home .entry-product .entry-featured {
height: 240px;
vertical-align: baseline;
overflow: hidden;
}

.archive .entry-product .entry-featured {
height:240px;
vertical-align: baseline;
overflow: hidden;
}
}

/* below - Colours the two 'accent' lines on Custom Headings Shortcode */

.h-custom-headline.accent span:before, 
.h-custom-headline.accent span:after {
      border-top: 1px solid #E7D9E7 ;
      border-bottom: 1px solid #E7D9E7; 
}

/* Alert Boxes stuff */

.x-alert-danger, .buddypress #message.error, .bbp-template-notice.error {
    background-color: #F5D5F0;
    border-color: #D8D8D8;
    color: #000;
    text-shadow:none;
}

.x-alert-danger .h-alert {
    margin: 0.05em 0px 0.25em;
    font-size: 20px;
    letter-spacing: -1px;
    line-height: 1.3;
    text-transform: none;
    color: #7E1974; 
}
    button.x-alert-danger  .close {
    color: #7E1974 !important;
     }

/* below - moves main box up to remove top border below breadcrumbs */
.x-container.offset {
    margin: 0px auto;
}
/* Below - moves main Page Heading up within main contnet areas */
.entry-wrap {
    padding: 30px;
}

.x-colophon.bottom {border-top:0px;}

.x-colophon.top, .x-colophon.bottom {
    border-top: none !important;
}

/*Audio Player Style */

.mejs-inner {
	background-color: red !important;
}

.mejs-time-total {
    background-color: #ffffff;
	border: 1px solid #80ba27;
}

.mejs-time-current {
	background-color: #7e1974 !important;
	box-shadow:none !important;

}

.mejs-time-loaded {
    background-color: #ffffff;
}

.mejs-button.mejs-playpause-button {
    border-right: 1px solid #fff;
}

.mejs-button button {
    color: #fff;
}

.mejs-controls {
    background-color: #80ba27;
    background-image: none;
    background-repeat: repeat-x;
    border-color: white;
    border-radius: 0px;
    box-shadow: none;
}
    
.mejs-controls > div {
    line-height: 30px;
}
    
.mejs-time {
    color: #ffffff;
    text-shadow: none;
}
    
.mejs-button button:hover {
    color: #7e1974;
    text-shadow: none;
}

.mejs-button.mejs-volume-button, .mejs-button.mejs-fullscreen-button {
    border-left: 1px solid #ffffff;
    box-shadow: none;
}

/*FormCraft Contact form Styling */

html .formcraft-css .fc-form .final-success .icon-ok-circle,
html .formcraft-css .fc-form .final-success span
{
color: #80ba27;
}

html .formcraft-css .fc-form.label-floating .form-element.error-field .form-element-html input[type="text"],
html .formcraft-css .fc-form.label-floating .form-element.error-field .form-element-html input[type="email"],
html .formcraft-css .fc-form.label-floating .form-element.error-field .form-element-html input[type="tel"],
html .formcraft-css .fc-form.label-floating .form-element.error-field .form-element-html input[type="password"],
html .formcraft-css .fc-form.label-floating .form-element.error-field .form-element-html textarea,
html .formcraft-css .fc-form.label-floating .form-element.error-field .form-element-html select,
html .formcraft-css .fc-form .form-element .error,
html .formcraft-css .fc-form.label-floating .form-element.error-field .form-element-html .field-cover > span {
    border-color: #7e1974;
    color: #7e1974;
} 

Hope this helps. 🙂

Thank you.

[Author]

Posts