FreeFallFilms Help

You can add custom css to your jump display pages.

This is available under Dropzone settings

This gives you a lot of power to tweak things to your branding - but it also lets you break things!

I recommend minimising the changes you apply!

Styling

The simplest changes to styling are by simply changing the variables for your theme and navbar colours.

Note - you must use RGB colours in variables for them to work correctly.

:root {
  /* Primary Theme Colour */
  --dz-primary-rgb: 255, 0, 0;

  /* Colour for top/bottom navbars */
  --dz-nav-background-rgb: 0, 0, 0;
}

White header & footer - using the primary theme colour for borders between the header/footer and the main content


:root {
  /* Primary Theme Colour */
  --dz-primary-rgb: 0, 113, 186;

  / Colour for top/bottom navbars /
  --dz-nav-background-rgb: 255,255,255;
}

#dz-contact a {
  /* Email,phone link in top navbar */
  color: black !important;
}

.dz-header {
  /* Add border to bottom of header */
  border-bottom: 2px solid;
  border-color: rgba(var(--dz-primary-rgb), 1);
}

.dz-footer {
  /* Add border to top of footer */
  border-top: 2px solid;
  border-color: rgba(var(--dz-primary-rgb), 1);
}

And again - but with gradients for those borders

:root {
  /* Primary Theme Colour */
  --dz-primary-rgb: 209, 46, 137;

  /* Colour for top/bottom navbars */
  --dz-nav-background-rgb: 255,255,255;
}

#dz-contact a {
  /* Email,phone link in top navbar */
  color: black !important;
}

.dz-header {
  /* Add gradient border to bottom of header */
  border-bottom: 2px solid;
  border-image: linear-gradient(to right, #D12C89, #3D12A0) 1;
}

.dz-footer {
  /* Add gradient border to top of footer */
  border-top: 2px solid;
  border-image: linear-gradient(to right, #D12C89, #3D12A0) 1;
}

Standard CSS

If you want to get stuck in, then you can modify styles directly by adding your own css.
The main styles are...

dz-header, dz-footer
dz-info (covers the Phone number or email icon in the banner)
dz-title, dz-tagline (Dropzone Name, and tagline)
dz-btn (base class for buttons)
dz-btn.inactive-tab (Button for currently-inactive tabs)

Note - I if you make changes, it will be your responsibility to update things for future site changes!

Feel free to Contact me for help

Custom styling