Skip to main content
Question

How can I color the background for the column headers in my report? I need 5 subtle colors across by 10 column headers.

  • January 18, 2017
  • 0 replies
  • 126 views

How can I color the background for the column headers in my report? I need 5 subtle colors across by 10 column headers.
This topic has been closed for replies.

Can you tell us what kind of report this is (Table or Summary)  and what type of fields are in the columns.  (text or numbers)

  • Author
  • Registered
  • January 18, 2017
It is a table report.  There are numbers in most of the columns but one column either has "yes" or "no" or it was recently changed to checkmarks.

  • Registered
  • January 18, 2017
Use the image onload technique with script similar to this:

$("table.searchResults thead tr:eq(0) td:eq(1)").css("background-color", "#FFE173");
$("table.searchResults thead tr:eq(0) td:eq(2)").css("background-color", "#E84F3A");
$("table.searchResults thead tr:eq(0) td:eq(3)").css("background-color", "#8C4CFF");
$("table.searchResults thead tr:eq(0) td:eq(4)").css("background-color", "#3AE8E5");
$("table.searchResults thead tr:eq(0) td:eq(5)").css("background-color", "#B2FF40");

See screenshot of manually executing this code through the console. 

Colors selected through Adobe Kuler with these settings:

https://goo.gl/RnYbim

  • Author
  • Registered
  • January 18, 2017
That is exactly what I am looking to do, but I am not a "proficient" QB Administrator.  I am not sure where to insert the script and my screen does not look like that on the right hand side.

  • Author
  • Registered
  • January 18, 2017
So I managed to get everything to work in the "console" while manually executing, but it disappears when I click off.  I assume that is because the script is not loaded where it should be to keep it every time the page reloads.  I am not sure how to use the IOL technique and where to put the script.  I have tried numerous things but nothing works and I really need some specifics.  Do you have screen shots of where to go within the table example you showed?

  • Registered
  • January 18, 2017
Your are on the right track. The step-by-step instructions for implementing the image onload technique are documented here:

https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=294

I should mention that the image onload technique is cutting edge technology for customizing QuickBase. Why even employers are asking for engineers skilled in the art of image onload as exemplified by this recent job posting:
This position requires a high level of skills on the following:
o Proven proficiency and experience in the QuickBase platform including complex parent/child relationships, dynamic form rules, embedded form reports, pages and dashboards, and specially HTTP API calls, "Image onLoad" using BackboneJS and Exact Forms
o Proven proficiency in JavaScript, Ajax, well formed HTML5, CSS3 and XML
http://orlando.craigslist.org/sof/5963631940.html
If you need assistance implementing this solution fee free to contact me using the information in my profile:

https://quickbase-community.intuit.com/users/513/

  • Registered
  • January 19, 2017
I added the code to moduls.js pages and posted it here:

Pastie Database
https://haversineconsulting.quickbase.com/db/bgcwm2m4g?a=dr&rid=546

As you can see in this case I don't typically repeat whole IOL instructions and sometimes just post the essential code. This is just a shortcut for me to save time in the case it confuses anyone.

This is really cool, but how can you make a column header nowrap ?

In general, and nothing to do with changing the native behavior of QuickBase, if you want to force a column to not wrap you can either change the field name or the column header override name to one with no spaces.

So for example  Monthly Sales Forecast will wrap.
but
Monthly_Sales_Forecast 

will not wrap.

OH!   That was painless :)
Thanks Mark!