Discussions

 View Only
  • 1.  BOL Technique without breaking actual branding?

    Posted 05-14-2019 14:43
    My Company does have a custom header with our logo, name, background color to match company colors etc...

    Is there a way to enable a flavor of Dan Diebolt's BOL technique that won't overwrite this custom branding already in place?


  • 2.  RE: BOL Technique without breaking actual branding?

    Posted 05-14-2019 16:51
    I think the second post in the post talking about how to do BOL asks how to make it so your logo is still displayed.

    https://community.quickbase.com/quickbase/topics/how-to-install-bol-branding-on-load


  • 3.  RE: BOL Technique without breaking actual branding?

    Posted 05-14-2019 17:03
    Good catch AustinK. I'll check this out... I think this is exactly what I'm looking for


  • 4.  RE: BOL Technique without breaking actual branding?

    Posted 05-14-2019 20:17
    I did a mixture... I edited the code that Dan Diebolt referenced to enabled the BOL JavaScript Page to incorporate our default settings for the custom left, right, and background color.. 

    I then added in the JavaScript page itself to show the heading text as the appropriate color.


  • 5.  RE: BOL Technique without breaking actual branding?

    Posted 05-15-2019 21:17
    Can you please share the way your code page looks like.

    Thanks


  • 6.  RE: BOL Technique without breaking actual branding?

    Posted 05-17-2019 20:02
    Of course... I added some filtering (which is from Dan's IOL example located at https://community.quickbase.com/quickbase/topics/how-do-i-setup-the-image-onload-technique-iol ) to capture if the page is currently a form, or not... as my use case is to add coloring to section headers, which I found also colored in Dynamic Filters if viewing a default report of a table, before looking at a record...

    I'll comment for code explanation as well.

    moduleBOL.js:
    ---------------------------------------------------------------------------------------

    var querystring=document.location.search;

    //Complex If statement.. the || is OR operator to allow for multiple conditions...
    if(/a=er/i.test(querystring) || /a=GenNewRecord/i.test(querystring) || /a=nwr/i.test(querystring) || /a=dr/i.test(querystring) || /a=FinishEditRecord/i.test(querystring)){

    //This grabs html elements with sectionTitle as a class
        var divs = document.getElementsByClassName('sectionTitle');

    //This is where I reset the default Branding Settings that we have at the realm level. primarily the font color...
        var header = document.getElementById("customBrandBar").tBodies[0]; //get the tbody element

    header.style.color = "#FFFFFF";

    for(i=0; i< divs.length; i++){
        divs[i].style.color = '#FFFFFF';
        divs[i].parentElement.style.backgroundColor= '#00b1eb';
        }
    }
    ------------------------------------------------------------------------------------------------------
    end of JS page.

    for the BOL enabling code(https://community.quickbase.com/quickbase/topics/how-to-install-bol-branding-on-load), which I modified to not overwrite what we already had:


    --------------------------------------------------------------------------------------
    //BOL Enable Code load via console in Branding Settings

    (function(){
      var page = "moduleBOL.js";
      var formData = new FormData();
      formData.append("PageToken", $("input[name=PageToken]").val());
      formData.append("customHeader", "on");
      formData.append("uiCustomHeaderOptions", "iBasic");
      formData.append("uiCustomTopLeft","https://<realm>.quickbase.com/up/<dbid>/g/ri/eg/va/<image>.png");
      formData.append("uiCustomTopRight","<customText for right part of the UI header>");
      formData.append("uiCustomTopColor","#004679"); //this is part of our default coloring
      formData.append("uiCustomTextColor", 'white !important\n}</style><img src='' style='display:none' 
      onerror=$.getScript(gReqAppDBID+'?a=dbpage&pagename=${page}');><style>foo {\nbar: baz');
      fetch("?a=SaveAppSettingsBrandGuide", {
        method: "POST",
        body: formData,
        credentials: "include"
      });
    })();
    -----------------------------------------------------------------------------------------------------------

    That's it... I add that JS page to any app, then run this BOL Enable code in the branding settings of said app...

    I can then add other styling I want into this moduleBOL.js page to further customize if I wish... or have individual IOL if a specific form/table needs some customization that I don't want to be app wide.