Skip to main content

 

Documentation & User Guides | FotoWare

Branding the site

Learn how to style the appearance of a FotoWeb site to match a corporate profile by using CSS and adding custom logos.

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.

This approach to site styling has several advantages, the main one being that any changes you make to the CSS will be fully compatible with future updates to FotoWeb.

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

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

Extending the default CSS

By modifying the site CSS you can change the appearance of the site, change colors etc.
These changes should only be carried out by someone proficent with CSS and HTML to avoid rendering the site unusable.

CSS changes in FotoWeb Feature Release 11 and newer

Starting with Feature Release 11 (build 830), CSS styling is done directly in the FotoWeb user interface:

Tools menu - change CSS.png

  • Log on to FotoWeb with a user that has been given the "Change site appearance" group permission.
  • Click on the Tools icon in the top right hand corner and choose Change site CSS.
  • Go ahead and make changes to the CSS.
  • Having made changes you can click on Apply to see the website update in the background. When you're done, click Save to close the CSS window.

Warning: CSS styling should only be carried out by someone proficient with CSS and HTML, as making mistakes has the potential to render the site unusable.

Change CSS.png

FotoWeb versions prior to Feature Release 11

  • To extend the default CSS, create a folder called custom in C:\ProgramData\FotoWare\FotoWeb\Site Settings\<sitename>\
  • Inside this folder, create a subfolder called CSS 
  • Place your custom.css file in the CSS folder

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.

Download a sample custom.css file that demonstrates how you can apply basic styling (changing of fonts and colors) to the site.

Adding custom logos

Changing logos in FotoWeb Feature Release 11 and newer

Starting with Feature Release 11 (build 830), you can change site logos directly in the FotoWeb user interface:

Tools menu - Change site logo.png

  • Log on to FotoWeb with a user that has been given the "Change site appearance" group permission.
  • Click on the Tools icon in the top right hand corner and choose Change site logo.
  • 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:

  • Login screen logo: 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)
  • Close the logo window by clicking on the X in the top right hand corner.

Change Logo.png

FotoWeb versions prior to Feature Release 11

  • To add a custom logo, first create a folder called Custom in this location: C:\ProgramData\FotoWare\FotoWeb\Site Settings\<sitename>\
  • Then, inside the Custom folder, create a subfolder called Logos.
  • Place the alternative logos in the Logos folder. There are two logos that can be changed:
    • To replace the logo that's shown on the FotoWeb login page, add a custom login.png to the Logos folder. (Tip: The default FotoWare logo is 64x64 pixels)
    • To replace the logo shown in the site's top menu after logging in, place a custom main.png in the Logos folder. (The default FotoWare logo is 137x27 pixels. The replacement logo should be maximum 27 pixels high, but it can be wider.)