|
CHEFSA
|
May 19, 2016 at 4:13 pm
I can not seem to figure out how to change the color of the footer of the Events Table. The table can be viewed at:
http://www.chefsa.com.php56-21.dfw3-2.websitetestlink.com/venues/the-childrens-hospital-of-san-antonio/
I have successfully changed the header and pagination from blue to burgundy, but have not had luck with the footer. Here is the CSS I have changed:
.footable > thead > tr > th.th-group {
background-color: #9f5b55;
background-image: none;
color:#eee;
}
.footable > tfoot > tr > {
background-color: #9f5b55;
background-image: none;
color:#eee;
}
.footable > tfoot > tr > th,
.footable > tfoot > tr > td {
background-color: #9f5b55 !important;
}
.footable .pagination > ul > .disabled > span,
.footable .pagination > ul > .disabled > a,
.footable .pagination > ul > .disabled > a:hover,
.footable .pagination > ul > .disabled > a:focus {
color: #f0efe9;
cursor: default;
background-color: #9f5b55 !important;
}
.footable > thead > tr > th,
.footable > thead > tr > td {
background-color: #9f5b55;
background-image: -webkit-gradient(linear, left top, left bottom, from(#9f5b55), to(#9f5b55));
background-image: -webkit-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -moz-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -ms-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -o-linear-gradient(top, #9f5b55, #9f5b55);
background-image: linear-gradient(to bottom, #9f5b55, #9f5b55);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
What am I missing? Can you find Waldo? 😉
|
|
Tony
|
May 20, 2016 at 2:03 am
Hi there,
Its happening because the table is setting a gradient on the footer which overrides the background-color you are setting. Your applying gradients to the thead elements but not tfoot so the footer doesn’t work.
To fix, try changing this:
.footable > thead > tr > th,
.footable > thead > tr > td {
background-color: #9f5b55;
background-image: -webkit-gradient(linear, left top, left bottom, from(#9f5b55), to(#9f5b55));
background-image: -webkit-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -moz-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -ms-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -o-linear-gradient(top, #9f5b55, #9f5b55);
background-image: linear-gradient(to bottom, #9f5b55, #9f5b55);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
to this:
.footable > thead > tr > th,
.footable > thead > tr > td,
#ee_filter_table > tfoot > tr > td,
#ee_filter_table > tfoot > tr > th {
background-color: #9f5b55;
background-image: -webkit-gradient(linear, left top, left bottom, from(#9f5b55), to(#9f5b55));
background-image: -webkit-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -moz-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -ms-linear-gradient(top, #9f5b55, #9f5b55);
background-image: -o-linear-gradient(top, #9f5b55, #9f5b55);
background-image: linear-gradient(to bottom, #9f5b55, #9f5b55);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset;
border-top: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}
|
|
CHEFSA
|
May 20, 2016 at 6:58 am
Perfect! Thank you!
|
|
Tony
|
May 20, 2016 at 7:20 am
You’re most welcome 🙂
|
