Skip to content

Creating A Theme

Jump to bottom
Jason Best edited this page Aug 19, 2013 · 7 revisions

Version 2.3 introduced a new theme layout that uses LESS. The new themes are located in the content/css/themes/ folder. The main index file for each theme is located within the themes folder, supporting files would go into a folder named after that theme. For example, here is the layout for the new "swiftpage" theme:

content/css/themes/swiftpage.less : main index, imports all files it needs for the theme

content/css/themes/swiftpage/theme.less : supporting theme file

content/css/themes/swiftpage/base.less : supporting theme file

content/css/themes/swiftpage/variables.less : defines our global less variables for colors, ui elements, and so forth

Creating your own theme by extending the swiftpage theme

  • Create a new less file in your application directory
  • Add an @import "path/to/sdk/content/css/themes/swiftpage.less" (Sample)
  • Override any variables that are defined the content/css/themes/swiftpage/variables.less file
  • Add your custom .less file to whatever build program you decide to use. Here is how to use grunt:
  • Install nodejs
  • Run npm install -g grunt-cli from the command line (this enabled the grunt command. see gruntjs)
  • Open a command prompt in your root application directory (products/*)
  • Run npm install grunt-contrib-less --save-dev (Plugin Reference)
  • Create a new Gruntfile.js (Sample)
  • Ensure your themes .less file is included in the Gruntfile.js
  • Run grunt less from the command line, this will output a minified css to include in your production index.html files
  • Change your production index html file to use your new theme (remove the SDK's theme reference)

The argos-sample application module now has a custom theme. Here is the commit that created it: https://github.com/Saleslogix/argos-sample/commit/f03d42975d53e9f8c5d51b6cb9e724d2dfae05bd

Development

You should include a reference to less.js in your index-dev.* file, and then add your .less file. The file will be compiled into css when your app loads. You should remove a reference to the SDK's .less theme file, as yours will be extending and rebuilding it. You need to add .less as a text/css mime type to your webserver if it is not already.

<link rel="stylesheet/less" type="text/css" href="../../argos-sdk/content/css/themes/swiftpage.less" /> <!-- Replace with your themes .less file -->

Clone this wiki locally