Change Quickbase Font Throughout App

  • 1
  • 2
  • Question
  • Updated 3 months ago
  • Answered
Is there a way to change all fonts within an application to Arial size 14?
Photo of Brittany

Brittany

  • 210 Points 100 badge 2x thumb

Posted 1 year ago

  • 1
  • 2
Photo of Matthew Neil

Matthew Neil

  • 31,438 Points 20k badge 2x thumb
control + "plus symbol", it will zoom your screen and make everything bigger.

:)

But, no there is not a native/no-code way to change the font. 
Photo of Brittany

Brittany

  • 210 Points 100 badge 2x thumb
Thanks :) Is there a text-formula I could use to change all fonts within a table?
Photo of Ⲇanom the ultimate (Dan Diebolt)

Ⲇanom the ultimate (Dan Diebolt), Champion

  • 26,522 Points 20k badge 2x thumb

There are a variety of ways to do this but the biggest obstacle is that QuickBase was not designed to be skinnable so you might achieve setting the font in one area of the application that looks nice but the changes could bleed into other areas of the application where it does not look so nice. Thus you will probably have to do a lot of experimentation with settings no matter what road you go down.

I would start with Chrome and load this extension:

Font Changer
https://chrome.google.com/webstore/detail/font-changer-with-google/jgjhhoglgjdklldfgoffdiaceffijeke

Attached is a screenshot of setting the font to Arial 18pt using Font Changer:

If you think Font Changer can make the page look acceptable for your needs you could then pursue a script solution that could make the changes in just specific areas. I would not jump into a script solution immediately as you need to do a lot of experimentation on a fast cycle. There is no doubt script can do this but the main obstacle is that QuickBase was simply not designed to be skinnable and you will constantly be tying to override their CSS in just specific areas.

BTW, here are the settings I used for Font Changer:


(Edited)
Photo of Brittany

Brittany

  • 210 Points 100 badge 2x thumb
Hi! Sorry - I forgot to respond to your comment. Thank you for this information. I will have to look into this further, but this is a good start.
Photo of Gaurav Sharma

Gaurav Sharma

  • 5,756 Points 5k badge 2x thumb
Thanks Dan for this solution. Love it :)
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Is changing default font size still so challenging?
Is there a good script to just change the font size of the user input fields, and their labels (above or left) on a form?
Wouldn't mind trying some other fonts also.
Thanks.

Photo of Joshua Tate

Joshua Tate

  • 1,016 Points 1k badge 2x thumb
so my solution here is to:
A) Download the CSS file quickbase uses, then
B) Edit them in your choice of editor,
- personally i have both a visual code environment setup and Sublime Text 3
- Both with a tonne of pluggins to flow chart my code, push to Team Foundation Server to work with my team, ESlint for code syntax checking and highlight colours + much much more, i
- Two you ask? yer when im feeling in the mood for something different i swap (spending days at a time looking at the same interface i find tiresome).
- Use regular expression to strip all colour references for rgb, hsl/a and #. below will save you some trouble building one :). 
var cssColors = RegExp(/#(?:[a-f\d]{3}){1,2}\b|rgb\((?:(?:\s*0*(?:25[0-5]|2[0-4]\d|1?\d?\d)\s*,){2}\s*0*(?:25[0-5]|2[0-4]\d|1?\d?\d)|\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%(?:\s*,\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%){2})\s*\)|hsl\(\s*0*(?:360|3[0-5]\d|[12]?\d?\d)\s*(?:,\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%\s*){2}\)|(?:rgba\((?:(?:\s*0*(?:25[0-5]|2[0-4]\d|1?\d?\d)\s*,){3}|(?:\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%\s*,){3})|hsla\(\s*0*(?:360|3[0-5]\d|[12]?\d?\d)\s*(?:,\s*0*(?:100(?:\.0+)?|\d?\d(?:\.\d+)?)%\s*){2},)\s*0*(?:1|0(?:\.\d+)?)\s*\)/);
- With your favourite tool and a highlighters plugin you will see every colour as they are - do yourself a favour and remove duplicates then start matching the colours you want to use in a split screen.
- do yourself a favour and not both trying to add your font to the font family, replace via regular expression quickbases first option by regexp the various normal, italic, bold references with your choice of font. 
- you can do literally anything, just try to be as efficient as possible.
C) Once you have your regular expressions built and replacements mapped, create a service worker for your site (check out workbox by google - its the simplest implementation i have come across reducing your coding to the conditions alone)
D) Route the CSS file names via regular expression, etag headers are used by QB on cloudflare along with some other markers so generally these are cached automatically and set to 30 day retention. What we do here is use a proxy, if you dont have your own check out CORS anywhere, simple to setup, we will call the URL passing credentials include to the css resource, this will bypass origin control header issues and allow you to return the body, use your established regular expressions to make nessiary changes and then pass it as the response. You will ensure to retain the etag and other headers that come with the original file including content length ;) this will trick the browser into caching per the cache policy. If you have trouble you can always force caching in local storage/indexDB.

Note: This method will ensure that unless quick-base renames items outside of what you can reasonably cover via regular expression you will get a fully customised CSS - colours, font, anything you want really. 
- do yourself a favor and strip out any code from JS files you dont want and replace functions with your own, you can even replace the table generator with tabulator which uses a virtual dom that gives you live updates without refreshing, check out the library for more info but you will see you have full control on everything (better than the one Quickbase is working on and talked about in there August release). 
- Insert your code earlier in the propagation cycle, use chrome dev tools and lighthouse along with available web resources to calculate the best point resources should be loaded to improve the loading time. I have my sites loading just as quick but completely customised.
- Quickbase uses React, there are other-ways of doing what you are asking, the best way of course is Quickbase providing customers a method of downloading the react theme template (you can do this yourself using the React Dev tool in Chrome) and a facility to upload the theme in place of their default.


Below is an example of a service worker for my main page, i dont do it this way in production but an example none the less (Cant fish for you, just giving you some pointers on fishing yourself)



self.addEventListener("fetch", event => {

  if (event.request.mode === "navigate" && event.request.method !== "POST") {

    var navTesturl = new URL(event.request.url);

    function callmeMaybe(){
      return new Request(navTesturl, {
        method: "GET",
        credentials: "include",
        destination: "document",
        mode: "same-origin",
        cache: "no-cache"
         })
      };

  if (navTesturl.href.includes("yourrealm.quickbase.com") && navTesturl.href.includes("=return") !== true   && navTesturl.href.includes("redirect=") !== true && /(DBtable\?a=dbpage&pagename=(?:serviceworker|importworker|DevServiceWorker)\.js)/.test(navTesturl.href) !== true && /(tableid\?a=dbpage&pageID=(?:150))/.test(navTesturl.href) !== true) {
  //Iterate through condition checks until you know which page and what conditions the worker will act upon.  
    if (navTesturl.href.includes("db/main")) {
      
      if (/(\/db\/main)/.test(navTesturl.pathname) && event.request.redirect == "manual") {

      event.respondWith(fetch(callmeMaybe()).then(response => {

      return response.text().then(body => {
      // Main Page Body Response literal block starts here   
      
      var oldColBarg = RegExp(/(var gCustomBrandColor = "";\n....<\/script>)/);
      var newColBarg = `var gCustomBrandColor = "#ccccccc";
      </script>
      <style> 
      #customBrandBar,
      #customBrandBar .CustomBrandLink,
      #navTop > #navTopAppBar,
      #navBars .BrandBarSpacer,
      #navBars #backToTop {background-color: rgba(0, 0, 0, .65)!important;
      #customBrandBar .CustomBrandText,
      #customBrandBar .CustomBrandLink{color: white !important}; 
      </style>`


      var oldIco = RegExp(/(<link rel="icon" href="\/favicon\.ico" \/>\n<link rel="shortcut icon" href="\/favicon\.ico" \/>)/);
      var newIco = `<link rel="icon" href="https://yourrealm.quickbase.com/up/dbtable/g/rx/eg/va/favicon.ico"; />
          <link rel="shortcut icon" href="https://yourrealm.quickbase.com/up/dbtable/g/rx/eg/va/favicon.ico"; />`
      var searLogo = RegExp(/(<a href="\/db\/main\?a=myqb" class="LogoQuickBase FS-H1"><span class="Alt">Quick Base<\/span><\/a>)/);
      var newLogot = `<img class="CustomBrandImage" src="https://yourrealm.quickbase.com/up/tbtable/g/rh/eg/va/Logo.png"; alt="custom brand image" border="0">`;
      var noCom = RegExp(/(,\n      'marketplace.initshare',\n      'marketplace.utils')/); 
      var noComRe = "";
      var bodab = body.replace(oldColBarg, newColBarg);
      var bodc = bodab.replace(oldIco, newIco);
      var bodd = bodc.replace(searLogo, newLogot);
      var bode = bodd.replace(noCom, noComRe);
      var markups = '';
      markups += `<script src=${scriptFilecb}></script>`;
      var newbody = bode+markups;
      //build and return new body in response
      return new Response(newbody, {
        headers: response.headers
      });
    }
    )}))}
Photo of Gary Boyd

Gary Boyd

  • 800 Points 500 badge 2x thumb
Yep - still as complicated. Thanks for the detailed response but out of my depth. I was hoping that similar to the way the grey background of fields was removed with a line of iol, the font of the input fields may be able to be changed, but couldn't get it to work. The remove the grey was from https://community.quickbase.com/quickbase/topics/change-default-field-background-color-on-form-in-di...

$("table.LabelsAbove div.cell").css({backgroundColor: "white"});
$("table.LabelsLeft td.cell").css({backgroundColor: "white"});