Skip to main content
Documentation & User Guides | FotoWare

Branding the site

How to brand a FotoWeb site

You can easily brand the FotoWeb 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 that updates to FotoWare can potentially break any custom CSS you've implemented.

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

Changing the site appearance

  1. From the Tools menu (cogwheel icon) go to Site Configuration Appearance. This is only available for users who are members of a group with the Change site appearance group permission.
  2. Select Branding

site_config_appearance.png

Adding custom logos

  1. Open the Change logos tab.
  2. Use the browse link to locate the logos, or simply 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. Must be a square of exactly 32x32 px.
  • Login logo: Used on the login screen. Should be square, but other dimensions will also work. Max logo size is 340x340px. The default FotoWare symbol is 64x64px
  • Main logo : Shown in the top banner. Must be 54px high, floating width. (The original FotoWare logo is 274x54px)
  • Mobile apps logo: Shown on iOS and Android devices. Must 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, click on 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

Modification of the CSS as described below should only be done by someone proficient with HTML and CSS.

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