2 New Styles Your CC Pivot 2 Reports

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


#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


#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!

zp8497586rq
Court Bowman

Author Court Bowman

Court Bowman has been working with in the IT field his whole life, working as a network engineer, database developer in Oracle and Progress and as a IT director for several firms. He has been working with FileMaker Pro since version 2 and has been a reoccurring speaker at the FileMaker developer conference. Apart from his expertise in FileMaker Pro he has experience in system architecture and design, data modeling and database architecture. He also has years of experience as a process and workflow consultant and has helped with the design and deployment of hundreds of systems in FileMaker and on the web.

More posts by Court Bowman

All rights reserved Cleveland Consulting.