Custom themes

Custom themes

• What is a theme?
• Configuration

What is a theme?

KonText allows you to modify its visuals via custom stylesheets and assets (images etc.). As a KonText theme we understand:

• a set of files (CSS, images,...) located in their own directory in public/files/themes,
• a matching configuration located in KonText's main configuration file (see below)

Configuration

A theme is configured in the main configuration file conf/config.xml on the theme node. All the paths there are expected to be relative to the theme directory. E.g. if there is a theme named foo (= it is located in public/files/themes/foo) and you put a logo bar.png there then the path is just bar.png (or ./bar.png). KonText inserts proper absolute path itself.

Name

A theme configuration must always contain a name which is equal to the name of theme's directory (including upper/lower case):

Directory: public/files/themes/foo
Configuration snippet: <theme><name>foo</name></theme> 
=> OK

Directory: public/files/themes/Foo
Configuration snippet: <theme><name>foo</name></theme> 
=> Wrong ('Foo' != 'foo')

Stylesheets

KonText can load one or more custom CSS files:

• css - one (path.css) or more (path1.css...) stylesheets which are applied after KonText's core ones

Fonts

If you need an external font to be loaded for your CSSs you can use:

• fonts - one (url1 or more (url1...) URLs to be loaded

Logo

The default kontext logo

can be changed via the following settings:

• logo - a path to a file containing a logo
• logo_mouseover - an optional path to a logo to be shown once user moves mouse over the logo area
• logo_href - an optional custom hyperlink for the logo (the default one is the root URL); dynamic string replacements are not supported
• logo_inline_css - an optional inline CSS applied to the logo image (typically, a width and height are defined there)

<kontext>
  <theme>
    <name>default</name>
      <logo>kontext-logo.png</logo>
      <logo_mouseover>kontext-logo_s.png</logo_mouseover>
      <logo_href>http://kontext.korpus.test/first_form</logo_href>
      <logo_inline_css>width: 208px;height: 68px</logo_inline_css>
      <fonts>
        <item>https://fonts.googleapis.com/css?family=Cousine:400|Roboto:300,400,400italic,700,700italic|Roboto+Condensed:400,700&amp;subset=latin,latin-ext</item>
      </fonts>
  </theme>
...
</kontext>