Skip to main content
Documentation & User Guides | FotoWare

Branding the site

  1. Last updated
  2. Save as PDF

How to brand a FotoWare site

You can easily brand the FotoWare interface using industry standard CSS to change the overall color scheme, fonts, and other design elements to fit your corporate profile. You can also replace the FotoWare logos on the site with your company logos and select a header image that's used on the home page when a user logs in.

Note: You can only style the main FotoWare user interface. The FotoWare Pro interface cannot be modified.

Changing the site appearance

Go to Tools > Site Configuration. Open the Appearance node in the configuration tree. This is only available for users who are members of a group with the Change site appearance group permission.

site_config_appearance.png

Adding custom logos

  1. Open the Change logos tab.
  2. Use the browse link to locate the logos or drop them into the window.

Note: The logos must be PNG format and of a certain size:

  • Favicon: The favicon displayed on the browser tab. This must be a square of exactly 32x32 px.
  • Login logo: Used on the login screen. This should be square, but other dimensions will also work. The maximum logo size is 340x340px. The default FotoWare symbol is 64x64px
  • Main logo : Shown in the top banner. This must be 54px high, floating width. (The original FotoWare logo is 274x54px)
  • Mobile apps logo: Shown on iOS and Android devices. The size mus t be exactly 550x88px.
  1. Select  X in the top right corner to close the dialog when you're finished.

Tip: To remove the custom logo and revert to the default FotoWare one, select the the X in the top right corner of the logo, as seen below.

 

Appearance - change logos.png

Changing the home page background image

Open the Change background image tab.

This is the image used in the banner behind the search bar on the site. It must have a ratio of 5:1 and not exceed 2400 pixel width (2000 pixel is sufficient). 

Select  X in the top right corner to close the dialog when you're finished.

Appearance - Home page background image.png

Extending the default CSS

Only someone proficient with HTML and CSS should modify the CSS as described below.

Appearance - Change CSS.png

By modifying the site CSS you can change the appearance of the site, alter colors etc.

To avoid rendering the site unusable, these changes should only be carried out by someone proficient with CSS and HTML.

  1. Open the Change CSS tab and make the changes.
  2. Select Apply. The changes are applied immediately.  To reset your changes, select Reset to initial.
  3. Select X in the top right corner to close the dialog when you're finished.

Testing your changes

Refresh the browser so display the changes to the custom site CSS. You don't need to restart the FotoWare service.

Determining which elements to change

Access the website and log on. The next step will be deciding which elements you wish to change. You can for example use Google Chrome's "Inspect element" feature to expose the elements that are used throughout the interface and then make a reference to that class or id in your CSS to override its styling.