Skip to main content

 

Documentation & User Guides | FotoWare

Changing the appearance of 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 style a FotoWeb site

The FotoWeb interface has been made to be easy to style 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

  • 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

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.

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.

Adding custom logos

  • 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.)