Support

December 14, 2015 at 5:08 am

Hi there,

Is this from the table output using the [ESPRESSO_EVENTS_TABLE_TEMPLATE] shortcode from the EE4 Events Table?

If not can you let us know which page you are referring to please?

December 15, 2015 at 5:09 pm

Hello,

You can inspect any element on a page using a free tool like Chrome Developer Tools (available with Google Chrome) or Firebug (available as a web browser extension).

This will show you the CSS that is handling the styling including the file and line number. Then you can add new styling to your child theme’s stylesheet or via a plugin that adds an additional stylesheet to your WordPress site such as Simple Custom CSS or Reaktiv CSS Builder.

What color were you interested in changing the light blue to?

—
Lorenzo

December 16, 2015 at 11:27 am

Hi, this should work:

.footable > thead > tr > th,
.footable > thead > tr > td {
background-color: #f2f2f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2 ), to(#f2f2f2 ));
background-image: -webkit-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: -moz-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: -ms-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: -o-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: linear-gradient(to bottom, #f2f2f2 , #f2f2f2 );
-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);
}

.footable > tfoot > tr > th,
.footable > tfoot > tr > td {
background-color: #f2f2f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -moz-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -ms-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -o-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2);
-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: 1px solid #cccccc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
padding: 10px;
}

.footable .pagination > ul > .disabled > span,
.footable .pagination > ul > .disabled > a,
.footable .pagination > ul > .disabled > a:hover,
.footable .pagination > ul > .disabled > a:focus {
color: #cccccc;
cursor: default;
background-color: #f2f2f2;
}

There is more styling involved as its a gradient rather than a solid color.

Add that to your theme’s stylesheet or a plugin like Simple Custom CSS or Reaktiv CSS Builder and save changes.

—
Lorenzo

December 16, 2015 at 4:26 pm

Hi, I can see the styles but the ones from the events table view stylesheet are taking priority. This should work:

.footable > thead > tr > th,
.footable > thead > tr > td {
background-color: #f2f2f2;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2 ), to(#f2f2f2 ));
background-image: -webkit-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: -moz-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: -ms-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: -o-linear-gradient(top, #f2f2f2 , #f2f2f2 );
background-image: linear-gradient(to bottom, #f2f2f2 , #f2f2f2 ) !important;
-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);
}

.footable > tfoot > tr > th,
.footable > tfoot > tr > td {
background-color: #f2f2f2 !important;;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#f2f2f2));
background-image: -webkit-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -moz-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -ms-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: -o-linear-gradient(top, #f2f2f2, #f2f2f2);
background-image: linear-gradient(to bottom, #f2f2f2, #f2f2f2) !important;
-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: 1px solid #cccccc;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
padding: 10px;
}

.footable .pagination > ul > .disabled > span,
.footable .pagination > ul > .disabled > a,
.footable .pagination > ul > .disabled > a:hover,
.footable .pagination > ul > .disabled > a:focus {
color: #cccccc;
cursor: default;
background-color: #f2f2f2 !important;
}

—
Lorenzo