Forum Discussion

TracyPuckett's avatar
TracyPuckett
Qrew Trainee
8 years ago

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

11 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)
  • 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.
  • 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
    • GauravSharma3's avatar
      GauravSharma3
      Qrew Commander
      Hi Dan,

      In one of my scenario I tried to put the legend on the report but it shows only on the default report.

      Is there any way where we can mention the report id?

      Thanks,
      Gaurav
  • 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.
  • 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?
  • 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/
  • 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.