Support Center

About Koken

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

Apply custom CSS to a theme

Apply custom CSS to a theme

Last Updated: Jan 03, 2015 09:00AM EST

Themes that include editable settings may be customized a variety of ways using the Settings panel. You can usually make a wide range of edits to a theme through there, but you may find yourself in situations where you'd like to change the appearance of an element that's beyond the Settings panel's reach. In these situations you may apply your own style markup using Site's built-in CSS editor. We'll explain how here.

Opening the editor

The first step is to open the CSS editor. Click on "Site" in the console's main navigation, then click on "Custom CSS" at the bottom of the left column. An inline editor will appear below the draft preview.

Site - CSS

You may expand the editor to the top of the preview window by clicking the dock button at the far left of the editor's header. Clicking it again will revert it back to its former inline position. Button next to that (with the half circle) is for toggling the style of the editor from dark to light and back again, depending on your preference. Finally at the far right is a close button that removes the editor. Clicking "Custom CSS" again performs the same action.

Updating and saving

As you enter style markup into the editor the draft's live preview will update in real-time. This allows you to visually check your edits while writing your styles. All style markup entered into the CSS editor is automatically saved on the back-end and appended to the current theme's draft. Whenever you're ready to make your changes live click the "Publish changes" button.

Applying a style

We'll demonstrate how to apply a style through example. Let's say our theme's footer has some text we'd rather not show, and the theme doesn't offer a setting to toggle its visibility. Using the Google Chrome browser (recommended) we right-click on the text and select "Inspect Element" from the drop-down. A new window appears displaying all the page's HTML markup plus a highlighted area. That highlighted area is the HTML element that displays the text. See below for an example screenshot.

In the right column of that window (see highlighted area in orange) will be a "Matched CSS Rules" box. This displays the styles used by the theme's own style sheet for this element. Here's that matched rule:

footer.main span.copyright {
  float: right;
  display: block;

We may then apply our own styles by copying the element's selector into Koken's Custom CSS editor, like so:

footer.main span.copyright {

Now we can apply a style to it. As we wrote earlier we want to hide the element, so we'll add the display CSS property and set it to "none", like this:

footer.main span.copyright {

The copyright text will disappear.

Next steps

Using the above practice of inspecting the HTML markup of your theme, copying selectors and applying custom properties / values will unlock a limitless range of styling modifications. If you're new to CSS there a loads of books and tutorials out there, including the Mozilla Developer Network which explains all the fundamentals.
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
Invalid characters found