CSS Tips, Forms

Back to Blog

Style your Dubsado Package Rows using CSS

This tutorial refers to the legacy Dubsado Builder only. These instructions are not relevant to the new builder (2022 release). Make your Dubsado packages stand out with beautifully designed rows. Well designed proposals help you stand out amongst the crowd and help you get booked up fast. This tutorial will show you how to use […]

This tutorial refers to the legacy Dubsado Builder only. These instructions are not relevant to the new builder (2022 release).

Make your Dubsado packages stand out with beautifully designed rows. Well designed proposals help you stand out amongst the crowd and help you get booked up fast.

This tutorial will show you how to use a little bit of code to style the rows within your Dubsado Proposals and Forms!

Make sure you’ve finished building your form first!

Styling your package rows should happen when you’re finished with the layout of your forms, this is because the code needed to style the packages references the specific row that the packages sit in. If you decide to move your rows up or down a few after you have already them, they will get muddled and the styles will apply to the wrong rows.

Step One: Set up your package rows

First things first, you’ll want to set up your package rows. We do this using the Column module, choose how many columns you’d like, and make sure you hide the title.

You then need to add one package module to each of the columns, you can also do all of the main text styling using the native Dubsado packages module, such as text size and colours. If you’d like to style your package buttons, I have a tutorial for that here.

Step Two: Find your row number

We now have to work out which row our code needs to reference. Simply count down each row from the top of your form to know which row your packages are in.

Don’t feel like counting or simply have too many rows on your form to count?

We can use something called the developer tools on your browser to do this, I’m using Chrome. Whilst you can use any browser with developer tools, this guide will only show you how to use them on Chrome. To open up your developer tools, in your toolbar, go to View > Developer > Inspect Element

We now have to work out which row our code needs to reference. Simply count down each row from the top of your form to know which row your packages are in.

Once you’ve opened your developer tools and the inspect element tool, you’ll notice that when you move your cursor around the screen it highlights different elements as you hover over them.

Hover the cursor over one of the columns, you’ll see when you are hovering over elements, the code in the main developer tools moves to highlight the corresponding code.

With the one of the package columns selected, right click on the highlighted code go to copy > copy selector

Next, paste the code somewhere accessible such as the notepad app on your computer.

Once you’ve pasted your code you need to find the row number, I’ve highlighted it in the code below. You’re looking for the part which says nth-child(). There will be a couple of places where you see nth-child. Look for the second to last one, it will almost definitely be the one with the highest number.

You can see in my code the nth-child is the 24. Which means my row is the 24th row.

Once you’ve got the row number you can go ahead and delete the code you just copied.

Once you know which row you need to style, make a note of that number. 

Step Three: Add the code to your form

Copy and paste the code into a code block, make sure it is wrapped in <style> tags. The code block can go anywhere you like on the form. I usually like to keep them at the top or the bottom so I can easily find them later.

I have prepared two styles for you to copy, one for two inner columns and one for three inner columns. You will soon learn how to customise them yourself so it won’t matter too much which one you choose.

Two Columns Code

/****** ROW - TWO COLUMNS ******/

/* ----- Main Row Style - EDIT ----- */
.jb-form.ng-scope > section > div:nth-child(15) {
    background: linear-gradient(to bottom, #d6b981 0%,#d6b981 50% ,white 50%, white 100%);
}

/* ----- Column Style - EDIT ----- */
 .jb-form.ng-scope > section > div:nth-child(15) .column {
    margin:50px;
    background: #f8f0e1;
    text-align: center;
    padding: 5%;
    width:25vw;
    min-width:350px;
    box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.25);
}

/* ----- Main Row Style - DON'T TOUCH ----- */
 .jb-form.ng-scope > section > div:nth-child(15) {
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
}

#edit-form .jb-form.ng-scope > section > div:nth-child(15) .column{
margin-left:0.5%!important;
margin-right:0.5%!important;
}

.jb-form.ng-scope > section > div:nth-child(15) {
    width: 100vw;
    margin: 0 -50vw;
    position: relative;
    left: 50%;
    right: 50%;
}


ng-form > div > section > div:nth-child(15) > div.col-sm-12.ng-scope{
  display:none;
}

.packageNotSelected{
background-color:transparent;
}

Three Columns Code

/****** ROW - THREE COLUMNS ******/

/* ----- Main Row Style - EDIT ----- */

.jb-form.ng-scope > section > div:nth-child(16) {
    background: url(https://www.alicelouiseva.com/wp-content/uploads/2020/04/Palms-scaled.jpg);
    background-size: cover;
    background-attachment: fixed;
}

/* ----- Column Style EDIT ----- */

 .jb-form.ng-scope > section > div:nth-child(16) .column {
    background: white;
    margin:5%;
    color: black;
    text-align: center;
    padding: 2%;
    width:20%;
    min-width:250px;
    box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.25);
}



/* ----- Main Row Style - DON'T TOUCH ----- */
 .jb-form.ng-scope > section > div:nth-child(16) {
    display:flex;
    justify-content:center;
    flex-wrap: wrap;
}

#edit-form .jb-form.ng-scope > section > div:nth-child(16) .column{
margin-left:0.5%!important;
margin-right:0.5%!important;

}

.jb-form.ng-scope > section > div:nth-child(16){
    width: 100vw;
    margin: 0 -50vw;
    position: relative;
    left: 50%;
    right: 50%;
}


ng-form > div > section > div:nth-child(16) > div.col-sm-12.ng-scope{
  display:none;
}



.packageNotSelected{
background-color:transparent;
}

Step Four: Updating the row in the code

You need to take that row number and use it to update the nth-child() row number in my code, that you just copied into the code block.

There are 6 places you need to update. You MUST update the number in both the editable and the DON’T TOUCH code.

You’ll notice that there are comments in the code that tell you which bits you can edit and which bits you should not touch. We will take note of that in the next step. In this step, it is important that you update the row number in all sections of my code.

Step Five: Editing the background style

Your row should now be styled to match mine – now it’s time to make some changes! The only bits you’ll need to edit are the bits that have an EDIT comment. Don’t make changes to the DON’T TOUCH code!

Look for the Main Row Style code. You can change the background color, background image, or style. Below I’ve provided a few examples of changes you could make to the code. Remember, your nth-child() needs to reflect your row number.

50% Colour Background

/* ----- Main Row Style - EDIT ----- */
.jb-form.ng-scope > section > div:nth-child(15) {
    background: linear-gradient(to bottom, #d6b981 0%,#d6b981 50% ,white 50%, white 100%);
}

Fixed Background Image

/* ----- Main Row Style - EDIT ----- */
.jb-form.ng-scope > section > div:nth-child(15) {
     background: url(https://www.alicelouiseva.com/wp-content/uploads/2020/04/Palms-scaled.jpg);
    background-size: cover;
    background-attachment: fixed;
}

Scrolling Background Image

/* ----- Main Row Style - EDIT ----- */
.jb-form.ng-scope > section > div:nth-child(15) {
    background: url(https://www.alicelouiseva.com/wp-content/uploads/2020/04/Palms-scaled.jpg);
    background-size: cover;
    background-attachment: scroll;
}

Solid Colour Background

/* ----- Main Row Style - EDIT ----- */
.jb-form.ng-scope > section > div:nth-child(15) {
   background-color:#d6b981;
}

Step Six: Editing the columns style

You can also edit the columns within the row. Look for the Column Style Code. Below I’ve provided a breakdown of each line of code so you can understand the implications of each edit you make.

The full column styling is below.

 .jb-form.ng-scope > section > div:nth-child(16) .column {
    background: white;
    margin:5%;
    color: black;
    text-align: center;
    padding: 2%;
    width:20%;
    min-width:250px;
    box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.25);
}

Column Background Colours & Shadows

You can change the background colour of your column here, or even add a background image. 

background: #f8f0e1;

Column Box Shadows

The box shadow can be removed by simply deleting this line of code or changing the numbers to 0.

box-shadow: 2px 2px 10px 2px rgba(0,0,0,0.25);

Column Size and Margins

The margin is the space outside of the column box, if you want there to be more space at the top or bottom of your row you can increase this number.

The padding is the space between the content and the edge of the column box, if you increase the padding there will be more white space.

The width is how much space the box will take up, if you have more than three packages you will likely need to decrease the width. 25vw means it will take 25% of the screen width. We add min-width:350px to ensure that on smaller width devices the package takes up at least 350px instead of only 25% of the screen.

  margin:50px;
  padding: 5%;
  width:25vw;
  min-width:350px;

Take it further…

Why not style some other rows! You don’t have to be restricted to package rows, in fact you could apply the exact same method to style any row you like! Take a look below at a column filled with form fields. I’ve created this using two-column modules. The first is a single column module and then I’ve added a two-column module inside.

Menu

Search...

My Portal