Follow
Branding of the ProofHQ Site - Advanced

Overview

Advanced branding is available on our Select and Premium plans and is included in the cost of the plan.

Advanced branding options include customization of the following:
  • Header and text colour
  • Web application header
  • Menu bar and text colour
  • Dashboard welcome box and quickstart box
  • Footer text
  • Favicon
  • Page title
  • Help links

Custom domains

Advanced branding

 
You'll find the Branding configuration section in the Settings tab of your Account Settings page. To apply the changes to your account make sure that Branding option is set to Enabled (1).
Advanced_Branding.png
Please see the section below for more detailed information on how to configure the Advanced branding options (2-14).

Please see the Basic branding help page for instructions on Proof branding (15) and Email branding (16).

Advanced branding configuration

Web application branding
Web_branding_image.png
You have a choice of three branding options for the web application header (2):

  • Branding image in the header
  • Your account name in the header
  • If you disable branding the ProofHQ logo will remain in the header of the web app

Branding image - resizes to a maximum size of 550x90px. You can use JPGs, GIFs or PNGs, and the transparent backgrounds are supported.

Account name - taken from your account details and displayed using white font. Your account name can have up to 60 characters (including spaces and punctuation marks).

Header

In this field (3) you can set the header's background and you can choose a solid color or a background image.

Color - here, as in all other branding fields of the color scheme configuration you can either enter a Hex color value of your choice or use a handy color picker (clicking the text field opens the pop-up). The default header background color is #232d2e.

Branding_-_color_picker.png

Background image - can be combined together with the Branding image.

  • You can use JPGs, GIFs or PNGs - for the files with transparency a white background color displays.
  • Header's height is 96px and the uploaded image will not be resized for the No repeat option.
  • Background image is positioned to the top left.

Header links
In this field (4) you can modify the user name color and color of the links in the Header menu visible in the top right corner of your account.

Header_links.png

Sidebar

Choose colors for the Menu bar (5) and Menu font (6) to customize your Sidebar

Menu_bar.png

NOTE Hover color adjusts automatically by adding a constant Hex value to your selected Menu bar color.

The New proof button color cannot be customized.

Welcome box

In this field (7) you can set the Welcome box color that is displayed on the Dashboard page.

Welcome_box.png

Section headers

These fields allow you to customize the background (8) and the font color (9) of the section headers on the Account Settings pages.

Section_headers.png

Footer

In this field (10) of Branding configuration you can compose a footer that will be displayed at the bottom of all the account pages. You can use the built-in WYSIWYG editor or you can simply paste your own design.

Footer.png

NOTE You can't edit HTML in the footer text editor, but you can paste a copied design (including all the links and images).

Favicon and Page title

You can customize how your ProofHQ pages are presented in the browsers by setting your own favicon image (.ICO file) (11) and Page title (12) - these will be displayed in the browsers' tabs/windows headers for all the account pages.

Favico_and_Page_title.png

NOTE Your favicon will be displayed also in the headers of the ProofHQ Viewer windows for all the proofs created on your account.

Help links

You can customize your own help links to point your users and reviewers to your own content. To activate this set the Help links option (13) to Enabled and add your links in the next fields (14). You can configure up to four links, and they will be available:

  • in the Header menu under the Help link
    Help_links1.png
  • in the Help panel of the ProofHQ Viewer sidebar
    Help_links2.png

For an additional charge, customers on Enterprise plans also have the option to fully customize the following:

  • Fully customize your landing pages (e.g. login and logout pages, forgot password page)
  • Fully customize your domain

Please contact us at sales.team@proofhq.com to find out more about the additional branding options.

Custom page branding

Custom branding of the ProofHQ pages is a paid service and by default includes full customization of the following:

Guidelines

1. Design elements

Please create your design in a .PSD file with all the elements placed in the separate layers - this will allow us to prepare the scalable pages for you.

There are no particular restrictions on the .PSD files, and the look and layout of the pages is completely up to you. However please make sure that the key elements are included in your design:

pages

Login Page
login.png

Logout page
logout.png

Forgot password
Forgot_password.png

alerts

Inactivity alert
Inactivity.png

Invalid email address
incorrect_password.png

Inactivity and incorrect email address
inactivty_and_credentials.png

NOTE The separate designs for the alerts are not required. If you’d like us to leave the default style of the messages, as shown on the screencasts above, please let us know. The team will match the colors with your design.

If you'd like to have placeholder text in the text fields, please include this in your designs.

IMPORTANT
The wording of the alerts cannot be changed as these are the system messages.


2. Fonts

Please make sure that the text is not rasterized but kept as the text layers, unless you want the particular elements to be displayed as images on your landing pages.

If you use custom fonts in your design, please make sure to include the following font files: EOT + .TTF + OTF + SVG + WOFF for support in all browsers.

NOTE  You need to hold an appropriate license, which allows implementing your selected fonts on the web pages.

If you use the standard and widely available fonts, the font files are not required. Please see the following lists for reference:


3. Screen resolution


We support 1024x768 screen resolution (1366x768 for wide screens) and upwards. However, for the landing pages designs we do recommend using higher resolution for the better results on the various screens. The best practice would be to determine what screen resolution is the most common on your users’ machines and prepare a slightly bigger design.

4. Browsers compatibility

The newer browsers generally don’t require any custom code to display the pages properly. However, if your users have the older browser versions installed on their machines some code adjustments may be needed.

By default we do prepare the pages compatible with the following browsers:

  • Internet Explorer 9+
  • Safari 6.x+
  • Chrome 22+ *
  • Firefox 15+ *

* Preferred browsers

NOTE
 ProofHQ will not design your custom pages, the PSD files must be supplied by you, but if you have any questions, please contact our Support team.

Custom domains

Our Select and Premium plans include the option to purchase a fully-branded domain. This means that you can customize your URL as well as all links included in notification emails. 

For more information, please see Custom Domain setup process.

If you are interested in fully customizing your domain, please contact us at sales.team@proofhq.com