A theme consists of the actual web resources and the theme descriptor. Example 6.6, “ File structure of a theme ” shows the directory structure of a theme in the workspace. CoreMedia recommends to use a single root directory for each theme, in order to avoid conflicts between multiple themes.
themes
└── [$foo-theme] // name of theme,
│ for example "foo" and suffix "-theme"
│ ├── src // all source files. add subfolders for all types like
│ │ sass, js, fonts or images
│ │ ├── css
│ │ │ ├── box.css
│ │ │ └── navigation.css
│ │ ├── fonts
│ │ │ └── arial.woff
│ │ ├── images
│ │ │ ├── icon-sprite.png
│ │ │ └── logo.png
│ │ ├── js
│ │ │ ├── coremedia.theme-name-a.js
│ │ │ └── own-plugins.js
│ │ ├── main // use this java typical file structure for
│ │ │ templates
│ │ │ └── resources
│ │ │ └── META-INF.resouces.WEB-INF.templates.$foo
│ │ └── vendor
│ │ ├── jquery.js
│ │ └── third-party.css
│ ├── target // all generated files, used for local
│ │ developing and importing
│ ├── Gruntfile.js // optional config for grunt tasks
│ ├── package.json // optional config for node_modules
│ │ dependencies
│ └── $foo-theme.xml // theme definition config, mandatory for
│ importing themes!
│
└── [$bar-theme]
Example 6.6. File structure of a theme
Below the root directory of the theme module lies the theme descriptor. It is named after the theme module to which it belongs,
basic-theme.xml, for instance. The theme descriptor contains the paths to all Javascript and CSS files used by
the theme. This file is used to create the aggregating CSS and JavaScript files in the CoreMedia content.
Here, you have to add paths to CSS and JavaScript files of other themes that you want to use in your theme.
Example 6.7, “
Theme descriptor example
” shows the structure of a theme descriptor and contains some comments for the usage.
<?xml version="1.0" encoding="UTF-8"?>
<themeDefinition modelVersion="1">
<!--
name *mandatory: - used as name for the aggretating files
like theme-name.js or theme-name.css
-->
<name>theme-name</name>
<!-- description: optional -->
<description>Basic Theme</description>
<!--
add all javascript and css files needed for this theme. the
paths are relative to the content object. Don't use
absolute or workspace path. Take care about the
order of the files, if they are related to each
other, like jquery and jquery plugins.
-->
<!--
all files are linked to a placeholder js file called
theme-name.js
-->
<javaScripts>
<!--
"disableCompression" optional attribute that sets the "disableCompress"
flag of the resulting content object. Set this flag if the file is already
compressed or if it is not compatible with the compression engine used
by the CAE.
-->
<javaScript disableCompression="true">vendor/jquery-2.2.3.min.js</javaScript>
<javaScript>js/example.js</javaScript>
<javaScript>../other-theme/js/example.js</javaScript>
<!--
"ieExpression" optional expression for conditional comments
for Internet Explorer without "if", see
https://msdn.microsoft.com/en-us/library/ms537512.aspx#syntax
-->
<javaScript ieExpression="IE">/js/all_ie.js</javaScript>
<javaScript ieExpression="lte IE 9">/js/ie9.js</javaScript>
</javaScripts>
<!--
all files are linked to a placeholder css file called
theme-name.css
-->
<styleSheets>
<css>css/example.css</css>
<css>../other-theme/css/example.css</css>
<css ieExpression="IE">.css/ie.css</css>
</styleSheets>
</themeDefinition>
Example 6.7. Theme descriptor example
All web resource files, except the templates, can be arranged arbitrarily in directories. However, In CoreMedia themes these resources are arranged by their particular types. When you import a theme into the CoreMedia repository, these directories will be mapped 1:1 to repository paths. See Section 6.3.12, “Client Code Delivery” for more details. CoreMedia uses the following typical style for web-safe file names:
File names should all be lower case
Nouns should be used in singular
Words should be separated by dashes
Templates are located in the src/main/resources directory of the theme module. Inside this directory,
according to the Servlet spec 3.0, the templates are located in the META-INF/resources directory. Underneath
this convention driven base path the templates are structured in packages, corresponding to the content beans. See Section 6.3.10, “Dynamic Templating” for details.
In the CoreMedia repository, templates are stored as JAR archives in blob properties.
Themes imported into the Content Server are stored in a folder named
Themes/<ThemeName> by default. The content is stored in the following content types:
CSS files in content of type
CSSJavaScript files in content of type
JavaScriptFreemarker Templates as JAR archives in blob properties in content of type
Template SetAll other resources in content of type
Technical Image
In order to connect the content with a Site page, the content is linked in the following way:
All imported CSS files of the theme are linked by a content of type
CSSin the main folder of your theme called<themename>.cssAll imported JavaScript files of the theme are linked by a content of type
JavaScriptin the main folder of your theme called<themename>.jsAll images or fonts are linked from inside the CSS files, through direct content links to the corresponding
Technical Imagecontent.Templates are found through its view repositories. See Section 6.3.10, “Dynamic Templating” for details.
The Site page links to the aggregating
CSSandJavaScriptcontent items (see Figure 6.25, “ Linking a theme to site root ”.
 |  |  |
 |