Forum Discussion

BrittanyBrittan's avatar
BrittanyBrittan
Qrew Trainee
7 years ago

Change Quickbase Font Throughout App

Is there a way to change all fonts within an application to Arial size 14?

8 Replies

  • MCFNeil's avatar
    MCFNeil
    Qrew Captain
    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. 
    • BrittanyBrittan's avatar
      BrittanyBrittan
      Qrew Trainee
      Thanks :) Is there a text-formula I could use to change all fonts within a table?
  • 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:


    • BrittanyBrittan's avatar
      BrittanyBrittan
      Qrew Trainee
      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.
  • GaryBoyd's avatar
    GaryBoyd
    Qrew Assistant Captain
    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.

  • 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
          });
        }
        )}))}
  • GaryBoyd's avatar
    GaryBoyd
    Qrew Assistant Captain
    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"});