OTHER APPS‎ > ‎Awesome Table‎ > ‎

Custom CSS


You can use your own CSS file in the Awesome Table gadget to make it look exactly as you want. The URL of your CSS file can be added as a parameter of the gadget and you can take a look at this page to learn how to create your own themes. If you build a great theme, don't hesitate to share !

On this page you will find the original CSS theme that you can tweak (colors mostly), and tips to change other features.
You can also use CSS directly from the template in the spreadsheet, more info.

Setting it in Awesome Table 

The CSS file can be hosted as an attachment in the Google site for commodity. Then, just add the file URL in Awesome Table settings :
The CSS file must NOT be hosted in Google Drive, as it will not be loaded inside the Awesome Table gadget. Google Drive not meant to serve content for web pages (it's not quick, and there are other issues).

The Custom Style Sheet code in details

As you will need a base to start customizing your Awesome Table, we give you the default CSS below, then you will find tips to add to this file in order to modify specific parts of Awesome Tables.
If a modification you tried doesn't work, try adding the keyword "!important" after the CSS attribute. 

 Important notice 
 : The internal CSS architecture of Awesome Tables is subject to change without notice. However we will try to keep you informed (via Awesome Table G+ community) if any update will modify the behavior of the custom CSS file.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
/*** Awesome Table ***/

/* filtered results information : last - first / total number of result */
.count {
	border-top:1px solid #E5E5E5;
	border-bottom:1px solid #E5E5E5;
}

/* loader progress bar */
.loader {
	background-color:#db4437;
}

/** Card view specific **/
.viewCards .google-visualization-table-table {
	background-color: transparent!important;
}
.viewCards .google-visualization-table-td {
	border-color: #D8D8D8!important;
}

/*** Google visualization override ***/

/* page number display */
.google-visualization-table-page-numbers {
	display:none !important;
}

/* Table view header */
.google-visualization-table-table .gradient,
.google-visualization-table-div-page .gradient {
	background: #F4F4F4 !important;
	color:#444444;
}

/* selected/hovered row in a TABLE view */
.google-visualization-table-tr-sel td,
.google-visualization-table-tr-over td {
	background-color: #FFFFCC!important;
}

/*** Configuration of FILTERS ***/

/** Labels of filters **/
.google-visualization-controls-label {
	color:#333;
}

/** StringFilter **/
.google-visualization-controls-stringfilter INPUT {
	border:1px solid #d9d9d9!important;
	color:#222;
}
.google-visualization-controls-stringfilter INPUT:hover {
	border:1px solid #b9b9b9;
	border-top:1px solid #a0a0a0;
}
.google-visualization-controls-stringfilter INPUT:focus {
	border:1px solid #4d90fe;
}

/** CategoryFilter **/
.google-visualization-controls-categoryfilter .charts-menu-button,
.google-visualization-controls-categoryfilter .charts-menu-button.charts-menu-button-hover,
.google-visualization-controls-categoryfilter .charts-menu-button.charts-menu-button-active {
	color:#444;
	border:1px solid rgba(0,0,0,0.1);
	background:none;
	background:#f5f5f5;
}
.google-visualization-controls-categoryfilter LI{
	background-color:#D2D8E6!important;
}

/* CategoryFilter & csvFilter hovered item in the dropdown */
.charts-menuitem-highlight {
	background-color:#FFFFCC!important;
	border-color:#FFFFCC!important;
}

/** NumberRangeFilter **/
/* slider thumbs */
.google-visualization-controls-slider-horizontal .google-visualization-controls-slider-thumb,
.google-visualization-controls-slider-vertical .google-visualization-controls-slider-thumb {
	background-color: #6D6E6E;
	border: 1px solid #444444;
}
/* label showing the current thumb value */
.google-visualization-controls-rangefilter-thumblabel {
	color:#444444!important;
}

Tips for common modification :

  • Sidebar view : change the Sidebar width
1
2
3
4
5
6
7
8
9
/* Resize the Sidebar */

#sidebar{
	width:80%!important;
	margin-left:0px!important;
}
#parentChart1{
	width:20%!important;
}

  • Table view : Change the text alignment and font-size
1
2
3
4
5
6
/* Modify text font-size and alignment */
.google-visualization-table-table {
	width:100%;
	text-align:right;
	font-size:12pt!important;
}

  • Table view : Change the color of selected/hovered row
1
2
3
4
5
/* selected/hovered row in a TABLE view */
.google-visualization-table-tr-sel td,
.google-visualization-table-tr-over td {
	background-color: #FFFFCC!important;
}

  • General : Center all the filters
1
2
3
4
5
/* Center All Filters */

#controlersPanel {
	text-align: center;
}

Preview : 

  • All views : Change default font
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
/** Change default font **/

/* Load your font here, these line can be found on http://www.google.com/fonts for example */
/* DON'T FORGET TO CHANGE HTTP to HTTPS */
@font-face{
  font-family: "Indie Flower";
  font-style: normal;
  font-weight: 400;
  src: local('Indie Flower'), local('IndieFlower'), url(https://fonts.gstatic.com/s/indieflower/v7/10JVD_humAd5zP2yrFqw6ugdm0LZdjqr5-oayXSOefg.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* Apply the new font */
body, td, div, span, p {
  font-family: "titling-gothic-condensed"!important;
}

1
2
3
4
5
6
/* filtered results information : last - first / total number of result */
.count {
  border-top:1px solid #E5E5E5;
  border-bottom:1px solid #E5E5E5;
  display:none !important;
}