• screenshot

    Loads of easy-to-use settings and live previewing to make theme customizations.

  • screenshot

    Grid and list content layouts with customizable image size, spacing, columns and more.

  • screenshot

    Optional full screen featured content slideshow for your front page.

  • screenshot

    Publish a blog, write about your work, link to portfolio content.

  • screenshot

    Responsive layout that scales to fit all tablets and mobile devices.

Madison is our most customizable theme yet. It displays all your Koken content -- albums, sets, images, videos, pages and essays -- and features a wide array of layout and style controls. Madison has everything you need to present your work and words online.

What's new in 2.0

  • Completely redesigned from top-to-bottom.
  • Fluid width content column for large photos.
  • Mosaic grid and list content layouts.
  • Full screen slideshow splash page displaying featured content and albums.
  • Albums index page that displays all your public albums and sets.
  • Navigation column may now be right aligned.
  • Lightbox view for all published images.
  • Customizable image loading spinners (color, size, and more).
  • Additional built-in color styles and typography options.

Other notable features

  • Images dynamically load as you scroll.
  • Index templates for viewing albums and sets.
  • Timeline and date templates for viewing all published essays, new albums, updated albums, and individual image uploads by date.
  • Tag and category templates to view all content by tag/category.
  • Essay and custom page support.
  • Contents page for a photostream of your latest uploads.
  • Built-in keyboard navigation.
  • Responsive layout compatible with all tablets and mobile devices.
  • Social media share buttons and links.
  • Custom header logo image ready.
  • Customizable background and text colors.

Updates and support

  • All 2.0 theme updates are free.
  • Fully supported by Koken.

Next: Usage

Usage

Madison looks great by default, but chances are you'll want to adjust its appearance to make it more your style. Like all Koken themes, Madison can be customized through an integrated settings panel that requires no coding or HTML experience. We'll discuss below all the major settings you should be aware of.

Style

Madison comes with a few pre-built styles. Switch between these at the top of the settings to get the basic look you want quickly.

Style

Site title

First thing you'll probably want to edit is the site title. This is controlled by Site title in the settings panel. The title is displayed as text by default, which you can customize by selecting a different typeface or applying different type styles. If you'd like to display an image instead, switch Type to "Image". The panel will update to show options for images (see below).

Site title

Madison will display a suggested width for your logo in the site preview.

Width suggestion

Create your logo and upload the image to your web server or any place you can link to, then enter the image's URL in the Image URL field. We recommend using absolute (http://) links, not relative (/) links when assigning a URL. After that you should see your logo in the page.

Site title

Side column

The column where your site title and links are displayed has a number of configurable style controls, but the most notable is Position. The menu is fixed to the left side of the browser by default, but you can change this to "Right" for a more unique look. The main content column will reformat and adjust automatically.

Column positioning

Another important option here is Nested sets.

Nested sets

This is unchecked by default. Set links display a page containing the albums and sets inside the set. Check this option and the behavior changes so child albums and sets appear underneath the set link in the navigation. The child links are offset a bit to distinguish them from other links, which you an edit with the Nested indent slider.

Note: when using nested sets, make sure you click Add next to each album/set inside the set in the Add links window. Otherwise the set link won't display any child links.

Here's an example of what nested links look like:

Nested links

Page layout

Click on the Template tab at the top of the settings panel. This displays all settings that apply to the page you're currently looking at. Or more specifically, the template the page and other related pages are using. Every page has Page layout settings, as illustrated below.

Page layout

Max page width places a limit on the width of the main content column. Some people have really big monitors, so this helps keep your page from scaling too large. Essay and Page templates have slimmer page widths to keep their measure of text from becoming unreadable. Oh, and don't worry about tablets and mobile devices. This setting is ignored on smaller screens so columns always fit as expected.

Page align controls how the main content column is aligned in relation to the side column. This setting only comes into play when the maximum page width (see above) is reduced and the browser window is wider than the content column.

Content align controls how content is aligned within the column.

Layout controls whether content is presented using a List or Grid layout. List displays content on individual rows for the largest possible images and videos. Grid displays content using a mosaic grid for smaller thumbnails that (when clicked) lead to larger versions to view.

The following table displays the default Layout settings for Madison's content templates:

Template Layout
Album List
Albums, Albums Archive, Set, Sets Grid
Contents, Contents Archive Grid
Favorites Grid
Index Grid

When editing the layout option for one template that setting will apply to all related templates, if available (see table above).

After selecting Grid the settings panel will display these options:

Grid options

Desktop cols, Tablet cols and Mobile cols control the number of columns for each target screen size. More columns create smaller thumbnails, fewer create larger thumbnails. Here's another fancy table that illustrates the default number of columns the grid uses in each content template when Layout is set to Grid.

Template Grid columns (desktop) Grid columns (tablet) Grid columns (mobile)
Album 3 2 1
Albums, Albums Archive, Set, Sets 3 2 1
Contents, Contents Archive 3 2 1
Favorites 4 2 1
Index 4 2 1

Again, editing the column count for one template will apply that edit to all related templates as well.

Spacing controls the width of the gutter between each grid item. Higher values create looser grids, lower values tighter.

Bottom pad adds padding to the bottom of each grid item, in case you need it.

Variability assigns non-uniform column widths to make the grid a bit less predictable. When set to None (the default) every column is the same width (e.g., 5 columns = 20% each). When Odd, Even or Random is selected an Amount slider appears underneath to control the degree of non-uniformity to apply. So for example if you picked Random and set Amount to 5%, the 5 columns would then have widths like 18.6%, 22.6%, 17.6%, 22.6%, and 18.6%. No matter what you choose, they'll always add up to 100%.

Grid variability

Splash templates

Madison includes two "Splash" templates (example) for displaying full screen slideshows of featured content. They're intended to be used for as the front page of your site to provide site visitors with an introductory overview of your top work.

Splash templates

Splash (featured content) displays images marked as featured in the Library. Drag/drop images onto "Featured" at the top of the Library's left column to add. This slideshow advances through images when clicked.

Splash (featured albums) displays albums marked as featured in the Library. Drag public albums from the left or middle columns onto "Featured albums" to add. This slideshow displays a featured album's content when clicked.

To change the slideshow's speed, click action or other options you may style the slideshows to your liking.

Summary

Those are all the major settings you'll find in Madison, but there are plenty more to show/hide page elements, crop images, assign lightbox links and more. If you have any questions about the theme feel free to contact Koken support.

When you do publish your site, consider sharing it with us! We might include it on this page for others to check out. Simply click on "Examples" in the sub-navigation above and look for the share link box.

Version 2.8.2 Released 1 month ago

  • Fix mobile search styling.

Version 2.8.1 Released 1 month ago

  • Added support for Google reCAPTCHA.

Version 2.8.0 Released 2 months ago

  • Added support for site search.

Version 2.7.0 Released 3 months ago

  • Added support for Rating plugin.

Version 2.6.3 Released 5 months ago

  • Added Greek translations.

Version 2.6.2 Released 11 months ago

  • Added language option Hungarian.

Version 2.6.1 Released 11 months ago

  • Added language option Hungarian.

Version 2.5.2 Released 1 year ago

  • Added language option Icelandic.

Version 2.5.3 Released 1 year ago

  • Add localized contact form messages.

Version 2.6.0 Released 1 year ago

  • Added Album download link.
  • Improved download speed with minified JavaScript.

Version 2.5.1 Released 1 year ago

  • Validate the site title's image URL

Version 2.5.0 Released 1 year ago

  • Added language options for Spanish, Italian, Polish, Russian, Dutch, Norwegian and Swedish.

Version 2.4.0 Released 1 year ago

  • Added language options for English, French or German.

Version 2.3.2 Released 1 year ago

  • Updated Tumblr endpoint

Version 2.3.1 Released 1 year ago

  • Added custom color settings for contact forms.

Version 2.3.0 Released 2 years ago

  • Modifying form element styles from prior update to support new contact forms in pages.

Version 2.2.9 Released 2 years ago

  • Adding pagination to the single photo/video page.
  • Style updates to pagination links.

Version 2.2.8 Released 2 years ago

  • Adding baseline form input styles.
  • Added login template for use with Password Protect plugin.

Version 2.2.7 Released 2 years ago

  • Updating gif spinner for retina screens.

Version 2.2.6 Released 2 years ago

  • Removed optimize legibility CSS property due to Windows/Chrome problem.

Version 2.2.5 Released 2 years ago

  • Fixing too tall images on the single image page (content.lens).

Version 2.2.4 Released 2 years ago

  • More fixes for duplicate image issue on album pages.

Version 2.2.3 Released 2 years ago

  • Resolved issue where double images could appear at certain screen resolutions in the list view while scrolling.

Version 2.2.2 Released 2 years ago

  • Added setting to hide lightbox share button.

Version 2.2.1 Released 2 years ago

  • Changing minimum value of essay display limit to 1.
  • Better Firefox (OS X) font smoothing in black style.
  • Spinner at bottom of column now appears when lazy load requests are made.
  • Applying load limits to a few templates to lighten page loads.

Version 2.2.0 Released 2 years ago

  • Added featured albums splash template.
  • Max page width slider now editable for set templates.
  • Make 'Show album title' setting independent for album and set templates.
  • Fixed issue where lightbox max width couldn't be set back to its default value.

Version 2.1.4 Released 2 years ago

  • IE9 fixes (requires Koken 0.17.3).

Version 2.1.3 Released 2 years ago

  • Making background of white lightbox style actually white.

Version 2.1.2 Released 2 years ago

  • Fixed issue where timeline data wasn't loading infinitely.

Version 2.1.1 Released 2 years ago

  • Fixed issue where collections wouldn't display more than 100 items.

Version 2.1.0 Released 2 years ago

  • Adding set title, description, tags, and categories to set.lens template.
  • Design improvements for splash page when viewed on smartphones.
  • Design improvements for landscape orientation on smartphones.
  • Adding infinite content loading to timeline related templates.
  • Alignment fix for single images.
  • Loading spinners for embedded images in essays and pages.
  • Changing set links in navigation to not nested by default.
  • Making default size of spinner a touch smaller.
  • Style tweaks for IE 10.

Version 2.0.15 Released 2 years ago

  • Splash page fix that caused loading to fail when content spinners were disabled.

Version 2.0.14 Released 2 years ago

  • Adding 'read more' link to essays.
  • Pillar code cleanup.

Version 2.0.13 Released 2 years ago

  • Added support for the new koken:meta tag.
  • Fixed keyboard navigation in timeline, date, tag and category templates.
  • Fixing style issue with album update event on timeline.
  • Mobile menu fixes on Android.

Version 2.0.12 Released 2 years ago

  • Added pagination links to tags and category index pages.

Version 2.0.11 Released 2 years ago

  • Fixed settings conflict between the splash and favorites slideshow. Note that if you assigned custom slideshow settings you may need to apply them again after this update.

Version 2.0.10 Released 2 years ago

  • Fix album update event links in the timeline.

Version 2.0.9 Released 2 years ago

  • Fixed splash slideshow layout when sidebar is positioned to the right.

Version 2.0.8 Released 2 years ago

  • Fixed mobile layout when sidebar is positioned to the right.

Version 2.0.7 Released 2 years ago

  • Fix keyboard and arrow scrolling in list views.

Version 2.0.6 Released 2 years ago

  • Fixed content loading issue in content archive template.

Version 2.0.5 Released 2 years ago

  • Hide page and lightbox loading animation on mobile.
  • Improved mobile button sizing and interactivity.
  • Grid fix when uniform, 1:1 image scaling is used.

Version 2.0.4 Released 3 years ago

  • Removed hover title on images to avoid confusion.
  • Added IDs to navigation sections for targeting.
  • Added album tags and category links to the album template.
  • Fixed conflict between content share link and Image Protector plugin.
  • Video play button and duration info now fade-in after underlying image loads.
  • Increased the hit area of the mobile menu button for improved interactivity.
  • Fixed mobile menu button long press on some android devices.

Version 2.0.3 Released 3 years ago

  • Improved styling of max download link on content page.
  • Fixed grid layout on iPad iOS 6 and earlier.

Version 2.0.2 Released 3 years ago

  • Fixed share menu display problem when content caption contains HTML.
  • Fixed issue with share menu not appearing in content.lens.
  • Making Twitter tweet button more presentable with center aligned columns.

Version 2.0.1 Released 3 years ago

  • Fixing site title logo scale issue in Firefox.
  • Dropping default size of site title image mobile scale to something more appropriate.

Version 2.0.0 Released 3 years ago

  • Fluid layout option for larger images.
  • Right navigation column alignment.
  • Added index pages for albums and sets.
  • Additional typeface options.
  • More control over colors.