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)

Title/logo

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

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.’

Content

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

Buttons

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

Sections

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

Variations

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.