Branding the site
The FotoWeb interface has been made to be easy to brand using industry standard CSS. You can 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.
Note: 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.
Modification of the CSS as described below should only be done by someone proficient with HTML and CSS.
Changing the site appearance
Site appearance settings are fonly shown for users who are members of a group with the Change site appearance group permission.
From the Tools menu (cogwheel icon) go to Site Configuration > Appearance > Branding.
Adding custom logos
Go to the Change logos tab 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 logo, select the X in the top right corner of the logo, as seen below.
When you're done, close the dialog by selecting 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.
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 selecting the X in the top right corner of the overlay window.
Extending the default CSS
Only someone proficient with HTML and CSS should modify the CSS.
By modifying the site CSS you can change the appearance of the site, alter colors, and so on.
Go to the Change CSS tab to make changes. Changes are immediately applied when you select Apply. To reset your changes, select Reset to initial.
When you're done, close the dialog by selecting 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. You don't need to restart the FotoWeb service.
Determining which elements to change
Now, access the website and log on. The next step is to decide which elements you would like to change. You can, for example, use the "Inspect element" feature in Google Chrome 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.