NextProof allows you to customize and brand your gallery theme with complete precision. We use a powerful templating system, allowing you to change any or all of the following:

• The CSS styles of your gallery pages (colors, borders, element properties)
• The images used in your gallery pages (buttons, graphical elements)
• The actual HTML structure of your pages

Depending on what you want to accomplish, the difficulty level of creating a custom theme can range from simple to advanced. If you don’t want to create a custom theme yourself, we offer premium themes and custom design services.

Additionally, you’re more than welcome to have an outside designer build your custom theme for you.

How does a custom theme work?

How do I create and upload my custom theme?

How do I test my custom theme?

How do I change the background colors in my custom theme?

How do I replace the graphical elements in my custom theme?

How do I use the liquid templating system?

Custom Theme Basics

How does a custom theme work?

A custom theme works by applying a collection of files (known as “assets”) when rendering any gallery in your account which is set to use your custom theme.

When creating or editing a gallery, you’ll see a “Custom” option when choosing a theme.

When this is selected, the gallery will use the custom assets you have uploaded. These assets include CSS styles, graphical elements, and template files (known as “liquid” files).

Custom theme assets can be updated from your Settings area. From the NextProof control panel, choose Settings, then choose Custom theme assets from the right-hand column. From this page, you can download a sample set of assets and upload your new/updated assets.

How do I create and upload my custom theme?

From a high-level perspective, a custom theme works like this:

1. You download one of our existing theme packs
2. You make changes to the CSS, graphical elements, and/or template files
3. You upload your changes
4. You set any gallery to use your new, custom theme

Download an existing theme pack

You can find themes to download and customize from the settings area or our theme gallery.

From the NextProof control panel, choose Settings, then choose Custom theme assets from the right-hand column. Here, you can download the basic sample theme. This is also where you upload your custom theme elements once you’ve made changes.

You can also visit our theme gallery. Here, you can download assets from any of the default themes or purchase premium themes.

Making changes

Once you’ve downloaded the sample theme, you’ll need to unzip the file. You should see a collection of files and folders like this:

Now you can make changes to theme by simply editing the files and/or replacing images. The assets folder contains the graphical elements (like buttons) and CSS files. The templates folder contains the liquid template files which define the HTML structure of your pages.

To edit or replace graphical elements, you’ll need an image editor such as Adobe Photoshop. To edit CSS and liquid files, you’ll need a plain text editor. We prefer editors designed for coding such as TextMate (Mac) and E-TextEditor (Windows). You can, however, find several free plain text editors online.

Upload your changes

Once you’ve made changes to your custom theme, you’ll need to upload them back to your NextProof account. First, you need to archive the assets and templates folders (and their contents) into a single .zip file. Next, navigate to the Custom theme assets page in the NextProof control panel. Upload your .zip file and your new custom assets will be saved.

IMPORTANT: be sure to zip up only the assets and templates folder before uploading. If you zip the parent folder, your customer theme files will not be saved.

Update galleries to use your custom theme

Remember, your custom theme only applies to galleries set to “Custom”. To update an existing gallery, simply click Settings and products for the gallery you wish to update and select “Custom” for the theme. After saving your changes, the gallery will now render using your custom theme assets.

How do I test my custom theme?

We always recommend testing your custom theme before applying it to a live gallery. The best way to do this is to simply create a test gallery (call it “Sample Gallery”) and apply the “Custom” theme to it. You can also password-protect this gallery while you edit and test your custom theme.

How do I change the background colors in my custom theme?

Often you’ll want to simply change the background color of one of our default themes. This can be accomplished by simply modifying the CSS for that theme and uploading the assets.

Changing the background can be done by first downloading the assets for the theme you want to modify.

Then, open the style.css file (located in the assets folder) with your text editor. Near the top of the file, you’ll see the body selector. This sets styles for the entire body of the page. Within this selector, you’ll find a background or background-color declaration. You can modify the background color of your pages by editing the value. Values are in RGB Hex.

body {
  padding : 0;
  margin : 0;
  font : 0.74em Arial, sans-serif;
  line-height : 1.5em;
  background : #212121;
  color : #fff;
  height:100%;
}

You can change the background color of other page elements as well (such as headers, footers, and the sidebar). Simply locate the appropriate CSS selector and modify the background or background-color declaration.

Determining RGB hex values in Photoshop

You can use Adobe Photoshop’s color picker to determine hex value of any RGB color. Simply click on the foreground color swatch and the hex value will be displayed for any color you select. RGB hex values are displayed as 6 alpha-numeric characters at the bottom of the color picker.

How do I replace the graphical elements in my custom theme?

You can easily edit or replace graphic elements in a theme.

Changing these elements can be done by first downloading the assets for the theme you want to modify.

In the assets folder locate the image element you wish to edit or replace. These are generally PNG or JPEG files. You can edit the existing image in Photoshop or create an entirely new image and save it with the same name.

How do I use the liquid templating system?

Our custom themes employ the powerful liquid templating system. This allows you to modify the HTML structure of your gallery pages and still display all the dynamic elements of your gallery and images.

Note: some of this material comes from the Shopify Wiki (which also uses liquid)

Liquid basics

There are two types of markup in liquid: Output and Tag. Output markup is surrounded by two curly brackets, like this:

{{ gallery.name }}

Tag markup is surrounded by a curly bracket and a percent, like this:

{% if id == image.id %}
...
{% endif %}

Output blocks will always be replaced with the data which they reference. If your liquid template has a gallery object exposed to it you can print the name of the gallery to the screen by referencing {{ gallery.name }}.

Tags drive the logic of templates. They are responsible for loops and branching logic such as If / Else.

Existing liquid tags

Most of the liquid tags you’ll see in the theme packs you download are there for a specfic reason. They produce the dynamic content in your gallery pages. Unless you know what you’re doing, it is not recommended that you remove these tags. You can, of course, move these tags (or blocks of tags) to other locations on the page.

For example, perhaps you want the Next and Back buttons below the image preview in your gallery page. You can do this by simply moving the appropriate liquid and HTML tags down the page.