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 make simple branding changes to the Fotoware interface using industry-standard CSS. You can change the 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 for the home page and you can configure and enable cookie warnings for your site. 

Note: Branding using CSS Overrides has been deprecated and will be removed in the future. We will offer similar capabilities through native configuration and will not remove the support until the most common styling options have been provided through such a configuration.

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

Changing the site appearance

  1. From the Tools menu (cogwheel icon), go to Site Configuration > Appearance > Branding. 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 must be exactly 550x88px.
  1. Select  X in the top right corner to close the dialog when finished.

Tip: To remove the custom logo and revert to the default Fotoware logo, 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 pixels in width (2000 pixels is sufficient). 

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

Appearance - Home page background image.png

Extending the default CSS

You must be proficient with HTML and CSS to modify the CSS as described below.

Appearance - Change CSS.png

By modifying the site's CSS, you can change the site's appearance, 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 finished.

Testing your changes

Refresh the browser to 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 used throughout the interface and then make a reference to that class or ID in your CSS to override its styling.

Cookie warnings

For information on configuring and enabling cookie warnings, see Configuring cookie warnings.