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.
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.
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.
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).
Madison will display a suggested width for your logo in the site preview.
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.
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.
Another important option here is 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:
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.
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:
|Albums, Albums Archive, Set, Sets||Grid|
|Contents, Contents Archive||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:
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)|
|Albums, Albums Archive, Set, Sets||3||2||1|
|Contents, Contents Archive||3||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%.
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 (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.
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.