Showkase Customization

Basic Customization

Showkase uses Themes to modify the global look of a site.

Changing the Theme

To switch to a different theme, do Site -> Change Theme, then select the theme you require.

• 'Maribo' is a clean, minimalist theme using large type sizes and an open layout. View Maribo Example.
• 'Boma' is a responsive design with left aligned navigation. View Boma Example.
• 'Kosel' is a responsive design with top aligned navigation. View Kosel Example.
• 'Manager' is an easy way to manage galleries in an existing website without needing to convert the whole website to Showkase. It is also suitable for people upgrading to Showkase from svManager. Gallery pages are full-screen with no navigation to minimize style clashes with the rest of your site. Only gallery pages are supported.

Customizing a Theme

To customize a theme, go to Site > Customize Theme. Options will vary between themes, for instance:

• Logo Image
• Max site width (px)
• Fonts for headings and body text. Font base size.
• Site colors. Either select a predefined color scheme, or select 'custom' and specify a palette for individual site elements.

Customizing Image Viewers

The built-in Juicebox and SimpleViewer image viewers have many configuration options available. Check the Juicebox or SimpleViewer support pages for full details.

Customize All Viewers

To configure all image viewers across the site, go to Site -> Customize Viewers, select the viewer you which to configure and click 'Edit'. From here you will be able to select config settings for all galleries on your site using this viewer. After making updates, click 'Update' and then 'Publish'. Note that Config options marked as 'Pro Viewers Only' require the appropriate Pro viewer to be installed. Check here for details.

Customize Individual Viewers

Edit the individual viewer page in the Customize tab. Individual page settings will override the settings in Customize All Viewers.

Individual page viewer settings were introduced in Showkase version 1.1.0. Prior to that the recommended method was to use gallery preset files. The preset file method is now deprecated and support may be removed in a future version.

Adding Custom Styles and Fonts

If you are familiar with CSS then you can add your own styles. Showkase themes have a custom.css file inside their css folder. For instance _themes/boma/css/custom.css. The custom.css file is loaded after other CSS files so you can add your own CSS rules in this file to override the default styles. Take a backup of the file in case you accidentally overwrite it during a Showkase upgrade. Browser plugins such as Firebug are a great help in understanding which styles are being applied and why.

For full control over a theme, consider creating a new theme. Please note that adding custom styles requires CSS experience. We cannot provide support for using custom CSS.

Fine-Tuning the Showkase Websafe Fonts

Showkase themes will usually offer a selection of fonts in the theme customize screen. This includes most fonts that are commonly installed on Windows, Macintosh and mobile devices – sometimes called ‘websafe fonts’. You can override the font styles from the theme by adding your own more specific styles in the custom.css file.

Adding Web Fonts

Web fonts need not be installed on your user’s computer. They are downloaded automatically from your server. Note that distributing fonts from your server in this way is subject to copyright law. If you want to learn more then google something like “web fonts tutorial” or “@font-face tutorial” to find the latest advice.

The easiest way to get your fonts is to go to a web site such as Font Squirrel which provides free fonts in the form of a ‘kit’ containing all the necessary files and CSS code.

There is nothing very different about using web fonts in Showkase. This is the procedure in outline:

1. Get a font kit from Font Squirrel or elsewhere
2. Create a new fonts folder in your Showkase web site content folder
3. Upload all the font files from the kit to your new fonts folder
4. Copy the @font-face CSS rule provided by the font kit into your Showkase theme custom.css file
5. Change the paths in the @font-face rule so they lead to the files in your font folder
6. Add CSS font-family rules to access the web font by name and provide fallback fonts

Here’s an example of how your custom.css file might look:

/* Download the font to the users computer */
@font-face {
  font-family: 'NewRockerRegular';
  src: url('/fonts/NewRocker-Regular-webfont.eot');
  src: url('/fonts/NewRocker-Regular-webfont.eot?#iefix') format('embedded-opentype'),
       url('/fonts/NewRocker-Regular-webfont.woff') format('woff'),
       url('/fonts/NewRocker-Regular-webfont.ttf') format('truetype'),
       url('/fonts/NewRocker-Regular-webfont.svg#NewRockerRegular') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* Use it */
header .hgroup h1 {
  font-family: 'NewRockerRegular', Arial, sans-serif;
  font-size: 18px;
  line-height: 1.5;
}

Note the fairly specific css targetting header .hgroup h1 to make sure the corresponding rule from the theme css is overridden – this will not necessarily work in all themes, you will need to adapt it. Do not use too many web fonts or your site will load very slowly and may show a flash of unstyled text while the fonts are downloading.