Visual styling of your pivots is important, that’s why we’ve included several different styles to choose from. On top of that, and the best part, is you have the ability to create your own css styles in CC Pivot! To do this, it’s just as simple as going to the settings, clicking on the CSS/Javascript tab and adding your own css at the bottom of the CSS field. Then add the name of your style to the list of available styles in the formatting tab. To get you started, here’s a couple new styles you can add! We based these off of a couple of styles we found here.
Fancy Gray
#fancy-gray table {
border: 1px solid #e3e3e3;
background-color: #f2f2f2;
width: 100%;
border-radius: 6px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-collapse: collapse;
}
#fancy-gray table td, #fancy-gray table th {
padding: 5px;
color: #333;
}
#fancy-gray th {
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-size: 17px;
line-height: 20px;
font-style: normal;
font-weight: normal;
text-align: left;
text-shadow: white 1px 1px 1px;
padding: .2em .2em .2em .5em;
text-align: left;
color: #4B4B4B;
background-color: #C8C8C8;
background-image: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e3e3e3), color-stop(.6,#B3B3B3));
background-image: -moz-linear-gradient(top, #D6D6D6, #B0B0B0, #B3B3B3 90%);
border-bottom: solid 1px #999;
}
#fancy-gray th.l {
background-color: #D8D8D8;
text-shadow: none;
font-family: Helvetica, Arial, sans-serif;
background-image:none;
border-right: solid 1px #999;
font-size:13px;
}
#fancy-gray td {
line-height: 20px;
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 14px;
border: 1px solid #fff;
border-top: 1px solid #fff;
}
#fancy-gray td:hover {
background-color: #fff;
}
Elegant But Practical
#elegant-practical table {
width: 100%
border: 1px solid #B0B0B0;
border-collapse: collapse;
}
#elegant-practical th {
text-align: left;
background: -moz-linear-gradient(top, #F0F0F0 0, #DBDBDB 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F0F0F0), color-stop(100%, #DBDBDB));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F0F0F0', endColorstr='#DBDBDB', GradientType=0);
border-top: 1px solid #B0B0B0;
border-bottom: 1px solid #B0B0B0;
color: #444;
font-size: 16px;
font-weight: bold;
padding: 3px 10px;
}
#elegant-practical th.l {
background: -moz-linear-gradient(top, #F9F9F9 0, #E5E5E5 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #F9F9F9), color-stop(100%, #E5E5E5));
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9', endColorstr='#E5E5E5', GradientType=0);
font-size: 14px;
color: #555;
}
#elegant-practical td {
padding: 3px 10px;
}
#elegant-practical tr:nth-child(even) {
background: #F2F2F2;
}
To add these, just copy and paste the css into the CSS field mentioned above and add the styles “fancy-gray” and “elegant-practical” to your style list. You’re all set. Now those styles are available to be used on your pivots. Enjoy! Do you have any css tables that you’d like to share? We’d love to see how you’re styling your pivots!
