Template Customization Guide: Acid

The ‘Acid’ template pairs well with stylish artist portrait photos or live shots. Make use of its site title blend modes to contrast your text against your header image while having a strong pop of color to reinforce your brand.

The ‘Acid’ website template is fully responsive and designed to look great on any device. This template features menu positioning options, section background opacity sliders to let your page background image shine through, page alignment options, and much more.

Experimenting with the ‘Acid’ template gives you the freedom to flex your creative muscles, creating a unique customized look.

To try out the ‘Acid’ template, click on the ‘Edit Theme’ tab at the top of your Bandzoogle control panel, then ‘View Themes.’ There are a few different style variations to choose from to get you started, and you can use the template editing tools to customize it with your own colors and fonts.

You can change templates any time, with your current page content staying intact as you update your design.

Acid Template Features

Header Image

'Acid' features a full-width header image that sits behind your ‘Site Title’ and ‘Site-wide My Sites’ features. Additional settings in your ‘Menu’ and ‘Page’ settings will affect how your header is styled in relation to these elements. In this part of the ‘Edit Theme’ controls, you can adjust your header image as follows:

  • Add an image filter
  • Customize the mobile header height
  • Adjust the image height (non-mobile)
  • Adjust the header height for your inner pages (all pages except the Home page)


With the 'Acid' template you can use a text title, upload a custom logo, or set this option to ‘none.’ The title will appear over top of your main image and is where you can make use of this theme’s unique blend modes to create a unique look. It features the following options:

  • Text: Enter your band or artist name text in the ‘Site Title’ field; select the font color; set the font style, size, and spacing, and toggle on/off the ‘uppercase’ option
  • Logo: Click ‘Choose An Image’ to upload a logo, and adjust the size using the slider
  • ‘None’: This option leaves the site title area blank

You can further customize your title/logo with these options:

  • Loading animation: toggle on/off
  • Loading animation style:
    • Puff In
    • Flip In
    • Slide In From Back
    • Blur In
    • Wipe In
    • Box Highlight
  • Site title font color: select a color for your title text
  • Site title font: customize the font used for your title
  • Blend modes: choose how you would like your font color to blend with the header image behind it
    • Normal
    • Multiply
    • Screen
    • Overaly
    • Darken
    • Lighten
    • Color dodge
    • Color burn
    • Hard light
    • Soft light
    • Difference
    • Exclusion
    • Hue
    • Saturation
    • Color
    • Luminosity
  • Alignment: Left, center, or right
  • Scale title to fit: Automatically size your title text to fit the screen horizontally
  • Opacity: Adjust the transparency of your title text


The ‘Acid’ website template offers menu design options such as item spacing, positioning, buttons, and more. The ‘Menu’ displays your page names as clickable buttons and ‘Acid’ provides the following options for customization:

  • Menu font color
  • Menu font hover color
  • Submenu background color
  • Submenu font color
  • Mobile font color
  • Mobile background color
  • Menu font: type, style, size, and upper/lowercase
  • Hover background color: selected pages will have this background color
  • Menu item spacing: use the slider to adjust the spacing between menu items
  • Menu position: ‘before header’ or ‘after header’
  • Menu bar background color
  • Menu button size: extra small, small, medium, or large
  • Separate navigation: toggle on/off

Note: The menu will take on the animation style set in your Title/Logo area. If you are not using a site title or logo, adjust the menu animation options under ‘None.’


With the ‘Acid’ template, you can add a page background image to complement or contrast your page contents. This template includes a variety of page customization options, including the following:

  • Page background image: upload an image from your device to display in the background of your website
  • Page background opacity: use the slider to add an opaque filter to your page background image. The color of the opaque filter is set in the next options
  • Page background color: Customize the color of your site’s background, which will display behind your content sections
  • Page content width: set your content area to fill from 50% up to 100% (full width) on the page.


The ‘Content’ styling will determine the overall content choices throughout your website. This includes your content font, heading fonts and some page display options. The 'Acid' template allows you to adjust the following content options:

  • Content font: set the font type, style, size, line height, upper/lowercase, and link style
  • Title font: set the font type, style, size, line height, letter spacing, and upper/lowercase
  • Heading 1 font: set the font type, style, size, line height, and upper/lowercase options
  • Heading 2 font: set the font type, style, size, line height, and upper/lowercase options
  • Apply borders to header: choose whether your page background color will display as a border around your header image or not
  • Content outer border: toggle the border on the sides of your content on/off
  • Content inner border: turn the border on the top/bottom of your content on on/off
  • Border size: use the slider to adjust the thickness of the border
  • Border radius: curve the corners of your content sections


Many of the features on your website include buttons, such as the ‘Mailing List Sign-up Form’ and the ‘Custom Form.’ Here’s how buttons can be customized with your website design:

  • Shape: rounded, square, or pill
  • Style: outline or solid

Site-wide MySites

The ‘Acid’ theme displays your site icons along the bottom of your header image on every page of your site. These icons can be customized using the following settings:

  • Button size: adjust the size of your buttons using the slider
  • Button color: change the color of your buttons
  • Button hover color: the color the icon will display as when hovered over
  • Button alignment: left, center, right


With the ‘Acid’ template, you can apply different section styles throughout your website pages to define certain areas of your content. Customize the section styles in the ‘Edit Theme’ tab as follows, then apply those styles to blocks of content using the ‘Edit Content’ tab. You can customize your sections using these options:

  • Content font color
  • Link color
  • Title font color
  • Heading 1 font color
  • Heading 2 font color
  • Button color
  • Button hover color
  • Background color
  • Background color opacity


Every Bandzoogle template provides a few pre-designed variations to help get you started. You can apply one of the variations below and start working on your content right away, or further customize a variation to suit your style. The ‘Acid’ template provides the following variations:

  • Playful: The playful variation frames your page content and header image with a white page background and border. Featuring complimentary hues of teal and coral, this variation is primed for a pop artist who is ready to stand out.
  • Neutral: The neutral variation is the perfect canvas for an ambient or classical musician. It’s set up with structural, sans-serif fonts and a grayscale color palette which compliments a monochrome page background image.
  • Sombre: The sombre variation is perfect for a rock-and-roll band with an edge. The black, red, and white color palette is iconic when paired with sleek fonts. The page background image in this variation creates a border around the content.
  • Elegant: The elegant variation offers a stylish surprise with its unique cursive fonts, cornflower-blue content background, and gold highlights. This variation is a great match for a country music artist.
  • Minimal: The minimal variant uses soft color contrasts and is great for those who don’t want to distract from their main header image.
  • Bold: Make your main image really pop with strong blue and purple overlay tones. Great for pop artists or anyone with a synth-heavy ambient sound.

'Acid' Template Tips

  • Try setting a slight opaque menu bar background color and toggle off the ‘separate navigation’ option so your menu will float over your header image.
  • Experiment with different combinations of site title color and blend modes. Each blend mode will have a unique reaction with different colors. Try a dark color and a light color to see which blend matches best with your header image.
  • Try increasing your page border width and rounding your section corners using ‘Border radius’ to really show off your background color and create a softer, more playful look for your site.