Support Center

About Koken

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

Styles

Styles

Last Updated: Jul 25, 2013 04:46PM EDT

Styles provide site publishers with alternate theme appearances. This walkthrough will explain how Styles work and how to enhance your custom theme to support them.

To see a live example of Styles, preview Koken's built-in Elementary theme. Open its Settings panel and you'll see a "Styles" drop-down containing color options at the top.

Creating a style

Styles are created in the theme's info.json file. (If you're not familiar with this, read our introduction to theme building). Edit your info.json file to include a styles object, as demonstrated below:

{
  "name": "Theme name",
  "version": "1.0",
  "description": "Brief description of this theme",
  "demo": "http://yoursite.com/demo",
  "author": {
    "name": "Your name",
    "link": "http://yoursite.com"
  },
  
  "styles": {
  }
}

We'll now define a couple of styles named "White" and "Black". First create a new object for each style inside styles. Then inside those objects add a label member with a value equal to the style's name (how the style will appear in the Site console). Here's an updated example:

{
  "name": "Theme name",
  "version": "1.0",
  "description": "Brief description of this theme",
  "demo": "http://yoursite.com/demo",
  "author": {
    "name": "Your name",
    "link": "http://yoursite.com"
  },
  
  "styles": {
    "white": {
      "label": "White"
    },
    "black": {
      "label": "Black"
    }
  }
}

Now it's time to add some styles! Create a variables object inside each style, then add members (named anything you want, without spaces) to define your variables. For the purposes of this example we'll define a background_color variable to control the general background color of the theme. Take a look:

{
  "name": "Theme name",
  "version": "1.0",
  "description": "Brief description of this theme",
  "demo": "http://yoursite.com/demo",
  "author": {
    "name": "Your name",
    "link": "http://yoursite.com"
  },
  
  "styles": {
    "white": {
      "label": "White",
       "variables": {
        "background_color": "#ffffff"
       }
    },
    "black": {
      "label": "Black",
      "variables": {
        "background_color": "#000000"
      }
    }
  }
}

Our "White" and "Black" styles are now ready to use. We'll now make these styles available to your theme and the Site console.

Adding style to theme

For your theme to recognize the styles you need to add a <koken:settings /> tag to your templates. This should be included in the <head> region of the page, like so:

<html>
  <head>
    <koken:settings />
  </head>
  <body>
  </body>
</html>

The Site console will now display a settings button (looks like a gear) at top right. Clicking it will display a Settings panel containing a Style drop-down.

So now that we have our styles hooked up and appearing in the Site console, how do we use them to change the theme's appearance? We'll do that next by adding a CSS file.

Adding style variables to CSS

settings.css.lens a CSS template parsed by Koken and inserted into a template through the aforementioned <koken:settings /> tag. If you don't already have settings.css.lens in your theme, create a file named exactly the same, then add the style variables you defined earlier as the values for whichever attributes you intend to modify. To continue our earlier example, here's how we'd use the background_color variable:

body {
  background-color:$background_color;
}

What's the currency symbol ($) for? It's used to flag the value as a variable that should be replaced. Once the document is parsed, it will be replaced with #ffffff or #000000 depending on which style the publisher chooses.

If a variable conflicts with CSS formatting, wrap the variable with brackets, like so:

body {
  font-size:[$title_size]px;
}

If you were to refresh the Site console and select either the "White" or "Black" styles the background color of the page should change.

Allowing custom control

Style values can be customized by publishers through Settings. You do this by creating settings objects that use the same variable names defined in styles. Let's look at an example. We'll take the variable we defined earlier (background_color) and use it to make a setting. Here's an updated info.json example:

{
  "name": "Theme name",
  "version": "1.0",
  "description": "Brief description of this theme",
  "demo": "http://yoursite.com/demo",
  "author": {
    "name": "Your name",
    "link": "http://yoursite.com"
  },
  
  "styles": {
    "white": {
      "label": "White",
       "variables": {
        "background_color": "#ffffff"
       }
    },
    "black": {
      "label": "Black",
      "variables": {
        "background_color": "#000000"
      }
    }
  },
  
  "settings": {
    "Color": {
      "icon":"color",
      "settings": {
        "background_color": {
          "label": "Background color",
          "type": "color",
          "value": "#ffffff"
        }
      }
    }
  }
}

The Settings panel in the Site console will then display a "Background color" row with a color picker next to it. Change the style, and the value of the color picker will update. Click on the color picker to change it to something else and the selected style will switch to "Custom". Publishers may switch back by re-selecting "White" or "Black".

Summary

This completes our introduction to Styles. Remember that you can define styles for things other than color, including typography, layout, or anything you want. Check out settings types for the different types of settings you can sync with styles.

support@koken.me
http://assets2.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