Skip to main content

 

Documentation & User Guides | FotoWare

Branding the site

How to brand a FotoWeb site

The FotoWeb interface has been made to be easy to brand using industry standard CSS. This way it is possible 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 pager when a user logs in.

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

Changing the site appearance

Site appearance settings are found in the Tools menu, as shown in the screenshot below. It is only shown for users who are members of a group with the "Change site appearance" group permission.

Adding custom logos

Go to the Change logos tab in the Appearances overlay to set logos for the different views.
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.

Close the logo window by clicking on the X in the top right hand corner.

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.

When you're done, close the dialog by clicking on the X in the top right corner of the overlay window.

Changing the home page background image

The home page background image can be changed by going to the Change background image tab in the Appearances overlay.

This is the image  used in the banner behind the search bar on the site, and it must have a ratio of 5:1.

When you're done, close the dialog by clicking on the X in the top right corner of the overlay window.

Extending the default CSS

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

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

These changes should only be carried out by someone proficient with CSS and HTML to avoid rendering the site unusable.

Go to the Change CSS tab in the Appearance settings overlay to make changes. Changes are immediately applied when you click on the Apply button. To reset your changes, click on the Reset to initial button.

When you're done, close the dialog by clicking on the X in the top right corner of the overlay window.

Testing your changes

Having made changes to the custom site CSS you can simply refresh the browser to display the changes. There's no need to restart the FotoWeb service.

Determining which elements to change

Now 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.