Customize your Ametys Workspaces charter

Ametys Workspaces provides 3 charters for project spaces (see Ametys Workspaces charter presentation).

The purpose of this chapter is to help you customize these charts (logo, color, ....) as little as possible.

  1. Installation
  2. Personalization
    1. Title customization and chart description
    2. Custom colors / fonts
    3. Logo customization
    4. Footer customization
    5. Personalize favico
    6. Customized illustrations
    7. ExtJS theme customization
    8. Customize notification emails

Installation

Ametys supports charter inheritance. A charter can inherit from another charter to override only what it needs: color theme override, logo override, footer customization, ...

To customize the Catalog site and project charter, start by downloading:

Then unzip the downloaded file into your application's skins directory.

This zip contains 3 charts (myskin, myskin-project and myskin-catalog) inherited from Ametys Workspaces and will enable you to quickly initialize an overload to modify the logo and colors of your sites.

The inheritance scheme is as follows:

Start by renaming the "myskin-***" directories to the name you'd like to give your charter and search all files for occurrences of "myskin" for the chosen name. In particular, you'll need to find it in the skins/myskin(-**)/conf/skin configuration files .xml

Personalization

At present, the "modules" of the project areas (catalog, files, members, calendars, forum, tasks) using VueJS or Angular are not customizable: it is not possible to modify the colors or fonts used by these modules.

The rest of this document refers to the "myskin", "myskin-catalog" and "myskin-project" charters provided as examples.
Term to be replaced by the name you have given to your charters.

Title customization and chart description

In each file i18n/messages_* .xml of your 3 charts, customize the keys "SKIN_TITLE" and "SKIN_DESCRIPTION".

<catalogue xml:lang="fr">
    <message key="SKIN_TITLE">Mon application</message>
    <message key="SKIN_DESCRIPTION">Charte de mon application</message>
</catalogue>

SKIN_TITLE est utilisé dans la balise <title> de toutes les pages HTML. Il est donc important de bien choisir son titre !

Pour surcharger la manière dont la balise <title> des pages HTML est construite, çà se passe dans le fichier skins/myskin/stylesheets/head.xsl avec la surcharge du template "get-title".

Custom colors / fonts

The SCSS variables used by the charter are defined in the file skins/myskin/resources/main/scss/_theme-variables.scss

In this file, you'll find an example of overloading the main colors ($primary, $secondary, ...)
Customize this file with your own colors.

The list of available (and therefore overloadable) variables can be found in the resources/main/scss/_theme-variables.scss file in the "workspaces" charter.

From Workspaces 2.2 onwards, certain modules will begin to be customizable in color/police.
The following section applies only to these versions of Workspaces.Ametys

Add a stylesheets/module-theme.xsl file into which you begin by importing the file from the parent skin .

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:import href="skin:workspace://stylesheets/module-theme.xsl"/>

  <!-- Personnalisations -->
</xsl:stylesheet>

Then add the following variables to customize your chart:

 Description

Version

Variable 

Default value 

Theme main color

Applies only to chat module for now (color of open button and dialog box headers)

2.2

theme-color

#9575cd

Logo customization

The logo appears in the header and footer. It is available in 2 versions:

  • a white version in the header
  • a colored scroll version in the header and footer

Upload the 2 versions of your logo in the directory skins/myskin/resources/templates/common/img (SVG or PNG format).

In the files skins/myskin/stylesheets/header.xsl and skins/myskin/stylesheets/footer.xsl customize the templates "header-main-logo" and "footer-logo" to match the name of your images, and also customize the alternative "alt".

<xsl:template name="header-main-logo">
    <a class="ametys-header-logo" href="{$catalogHomeUrl}">
        <img class="ametys-header-logo__img white-logo" src="{ametys:skinURL('templates/common/img/logo.svg')}" alt="Company" />
        <img class="ametys-header-logo__img color-logo d-none" src="{ametys:skinURL('templates/common/img/logo-colorful.svg')}" alt="Company" />
    </a>
</xsl:template>

In the file skins/myskin/stylesheets/main.xsl customize the "mobile-header-logo" and "mobile-header-logo-white" templates used for the mobile view.

<xsl:template name="mobile-header-logo">
    <xsl:value-of select="ametys:skinURL('templates/common/img/logo-colorful.svg')"/>
</xsl:template>

<xsl:template name="mobile-header-logo-white">
    <xsl:value-of select="ametys:skinURL('templates/common/img/logo.svg')"/>
</xsl:template>

In the file skins/myskin/templates/login/stylesheets/template.xsl customize the "header-main-logo" template used for the logo on the login/logout and account creation pages.

<xsl:template name="header-main-logo">
    <a class="ametys-auth-logo" href="{$site-uri-prefix}/{$lang}/index.html">
         <img src="{ametys:skinURL('templates/common/img/logo.svg')}" alt="Company" />
    </a>
</xsl:template>

Footer customization

By default, the footer of the Catalogue site contains 2 links to Facebook and Twitter.

Customize these links with your own urls in the file skins/myskin/stylesheets/footer.xsl by overriding the templates "footer-socials-facebook" and "footer-socials-twitter".

<xsl:template name="footer-socials-facebook">
    <a href="javascript:;">
        <i class="fab fa-facebook-f"></i>
    </a>
</xsl:template>

<xsl:template name="footer-socials-twitter">
    <a href="javascript:;">
        <i class="fab fa-twitter"></i>
    </a>
</xsl:template>

You can also choose to display no links at all, or add more links to social networks by overriding the "footer-socials" template.

<xsl:template name="footer-socials">
    <div class="ametys-footer-socials">
        <xsl:call-template name="footer-socials-facebook"/>
        <xsl:call-template name="footer-socials-twitter"/>
    </div>
</xsl:template>

Personalize favico

To customize the favicon, simply upload your favicon.ico file to the skins/myskin/resources/img directory .

Customized illustrations

Project areas use 2 illustration banners.

A banner for the catalog site, minimum dimensions 1761x748 pixels

To supercharge this illustration, upload your own image in skins/myskin/resources/templates/common/img/banners/bg.jpg

Please note that the same illustration is also used for inside pages, where only the upper part of the image is visible.

If you'd like to use a different illustration for the inside pages, override the "main-banner-background-url " template in skins/myskin-catalog/templates/page/stylesheets/template.xsl

<xsl:import href="skin:workspace-catalog://templates/page/stylesheets/template.xsl" />

<xsl:template name="main-banner-background-url">
    <xsl:value-of select="ametys:skinURL('templates/common/img/banners/bg.jpg')"/>
</xsl:template>

A 3522x640 pixel banner for member files.

To supercharge this illustration, upload your own image in skins/myskin/resources/templates/common/img/bg-purple.jpg or supercharge the "profile-header-bg-img" template in skins/myskin-catalog/stylesheets/content/member/member-main.xsl

<xsl:import href="skin:workspace-catalog://stylesheets/content/member/member-main.xsl"/>

<xsl:template name="profile-header-bg-img">
    <xsl:value-of select="ametys:skinURL('templates/common/img/bg-grey.png')"/>
</xsl:template>

The myskin-catalog chart shown here in skins.zip contains an overlay of this banner, in a gray version.

For project sites, the banner is chosen when the project is created.

ExtJS theme customization

ExtJS is used for front-office editing: dialog box for page creation, editing of fields in a member form or news/article.

The default ExtJS theme is purple.

It is possible to override this theme.
To do this, place your ExtJS theme files in a directory in the myskin charter (for example skins/myskin/resources/themes/extjs-theme-blue), then override the "extjs-theme" variable in the skins/myskin/stylesheets/variables file .xsl to point to this theme.

<xsl:import href="skin:workspace://stylesheets/variables.xsl"/>

<xsl:variable name="extjs-theme">/skins/myskin/resources/themes/extjs-theme-blue</xsl:variable>

Customize notification emails

Versions 2.10.x and earlier: Customization of notification emails Ametys Workspaces (version 2.10.x or lower)

Versions 2.11.x and higher: Customize notification emails Ametys Workspaces (version 2.11.x or higher)

Back to top

v2