Support Center

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.

Helper classes

Helper classes

Last Updated: Mar 23, 2015 12:04PM EDT

Koken adds unique HTML classes to dynamically published content for targeting purposes in style sheets and Javascript code. Here's a list of all the classes you can expect to see.

General

  • .k-note - Wraps fallback text output by <koken:navigation>, <koken:pulse> and <koken:note>.

Links

  • .k-nav-current - Assigned to <a> tags in navigation groups that are associated with the current page in view.

  • .k-current - Assigned to the <a> tag in data returned by <koken:parent> that matches the detail page currently in view.

  • .k-pagination-current - Assigned to the current page number published by <koken:pagination>.

Body

Every template's <body> tag is assigned namespaced classes that represent the template's native data source and template type.

Template Data class Template class
album.lens .k-source-album .k-lens-album
albums.lens .k-source-albums .k-lens-albums
archive.albums.lens .k-source-archive-albums .k-lens-archive-albums
archive.contents.lens .k-source-archive-contents .k-lens-archive-contents
archive.essays.lens .k-source-archive-essays .k-lens-archive-essays
categories.lens .k-source-categories .k-lens-categories
category.lens .k-source-category .k-lens-category
content.lens .k-source-content .k-lens-content
contents.lens .k-source-contents .k-lens-contents
date.lens .k-source-archive-timeline .k-lens-date
error.lens - none - .k-lens-error
essay.lens .k-source-essay .k-lens-essay
essays.lens .k-source-essays .k-lens-essays
favorites.lens .k-source-favorites .k-lens-favorites
index.lens .k-source-index .k-lens-index
page.lens .k-source-page .k-lens-page
page.lens .k-source-page .k-lens-page
set.lens .k-source-set .k-lens-set
sets.lens .k-source-sets .k-lens-sets
tag.lens .k-source-tag .k-lens-tag
tags.lens .k-source-tags .k-lens-tags
timeline.lens .k-source-timeline .k-lens-timeline

When loading a custom content template the data class is equal to the template's assigned data source and the template class uses the template's file name. For example:

*.lens .k-source-[source] .k-lens-[file name]

In addition to template classes the <body> tag may also be assigned the following.

Images

  • .k-lazy-loading - Assigned to <img> tags while loading (as part of Koken's built-in lazy loading). This allows theme designers to style images if necessary in their CSS (with a progress spinner, etc). To turn on lazy loading, add lazy="true" to <koken:img>.

  • .k-lazy-loaded - Assigned to <img> tags when the lazy image loads (see above).

  • .k-lazy-loading-background - Assigned to the <div> element generated by <koken:background> when the background image is lazy loading.

  • .k-lazy-loaded-background - Assigned to the <div> element generated by <koken:background> when the background image has loaded.

Videos

  • .k-video - Assigned to the parent <div> of videos displayed in essays and content pages.

Visibility

  • .k-unlisted - Assigned if a page is accessed through an unlisted site URL. Applies to all content types (images, videos, albums and sets) with editable visibility.

  • .k-password-protected - Assigned if a page is accessed by password. Applies to all site pages. Password Protect plugin required.

Lightbox

  • .k-link-lightbox - Assigned to hyperlinks published by <koken:link> that include the lightbox="true" parameter.

  • .k-lightbox-loading - Appended to the body tag when a lightbox-enabled link is clicked and the lightbox is requested. Once the lightbox loads the class is removed.

  • .k-link-lightbox-loading - Appended to the <a> tag that was clicked and triggered the lightbox in the parent page. Class is removed once the lightbox loads.

Essays and pages

Essays and pages allow publishers to insert rich media elements – including photos, videos and slideshows – into their written copy. Here are the classes:

  • .k-content-embed - Assigned to the top-level <figure> element in the media markup.

  • .k-content - Assigned to the element wrapping the actual media element.

  • .k-content-text - Assigned to the element wrapping the title and caption underneath the media.

  • .k-content-title - Assigned to the element displaying the media's title.

  • .k-content-caption - Assigned to the element displaying the media's caption.

Contact form

Pages support custom contact forms. These forms are published with a series of classes to help you make style adjustments that go beyond baseline form styles.

  • .k-contact-form - Assigned to the parent <form> element.

  • .k-contact-form-required-field - Assigned to the parent <fieldset> of an input field that has been flagged as required.

  • .k-contact-form-email-field - Assigned to the parent <fieldset> of an input field is for entering an email address.

  • .k-contact-form-textarea-field - Assigned to the parent <fieldset> of a textarea.

  • .k-contact-form-text-field - Assigned to the parent <fieldset> of a general input field.

  • .k-contact-form-tel-field - Assigned to the parent <fieldset> of a telephone number input field.

  • .k-contact-form-checkbox-field - Assigned to the parent <fieldset> of a checkbox field.

  • .k-contact-form-submit - Assigned to the parent <fieldset> of the form submit button.

  • .k-contact-form-processing - Temporarily assigned to the parent <form> element after a form has been submitted.

  • .k-contact-form-error - Assigned to the parent <fieldset> of a field that caused an error.

Pulse

  • .k-pulse - Assigned to the parent div that's created to display the slideshow.

  • .k-pulse-button-disabled - Assigned to disabled external control links.

  • .k-note-pulse - Appended to the .k-note that it generates if no slideshow content is found.

Elements

  • .k-select - Assigned to the <select> element generated by the <koken:select> tag.
support@koken.me
http://assets0.desk.com/
false
koken
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete