How to Hide Dubsado Navigation Tabs

Dubsado Customizations
Written By Colin Tierney

Did you know that with a little bit of CSS, you’re able to hide the names at the top of your Dubsado forms? While it’s not always necessary, I like to hide form names when I want to send my clients something other than a Proposal followed by an Invoice. This works especially well for quote-like proposals.

Flat lay view of a tablet on the left and a Majesty Palm leaf on the right. The table is displaying a Dubsado Proposal form with an image of a man with a fedora hat petting his dog in front of a computer inside of a studio.

For example, when I’m working on a visual identity project, I like to present a case study for my clients to view. I’ll choose a Proposal form to start (since they seem to be the most robust Dubsado form), then I’ll begin adding blocks to the form to create the case study. These forms usually contain the research phase of a project—explaining why I made certain design decisions—the iterative process, refinements made, logo concepts and how they can be implemented through the use of mockups. All of this helps to tell my client’s story while keeping everything within Dubsado’s platform.

If you can relate to this practice, perhaps you’d like to hide your form names as well.

The code

This is your CSS. Head to “Form styling” > scroll down > click the “Edit CSS” button. Then, copy and paste the following code:

/* HIDE NAVIGATION TABS */
.client-view-tabs.hide-in-print {
     display:none !important;
}

After adding this code snippet and then previewing your live form, you’ll notice—since the form names are removed—that there’s extra white space (padding) at the top. So let’s go ahead and narrow that space.

In the same code block from above, copy and paste the following code:

/* REMOVE FORM PADDING */
.form-viewer.dubsado-form {
    padding: 0px !important;
}

Now you should see a narrower gap in between the top of the page and your header!

Colin Tierney http://www.tierneystudio.com