Skip to content

I want to change my theme

Jump to bottom
Samuel BELONDRADE edited this page Jun 20, 2024 · 6 revisions

You have two method for edit your theme, you can simply edit some parameters in the Backoffice. But you can't have complex editing, just website logo, name of site, dark or light theme, etc. If this is enough for you go to Easy Mode chapter.

If you want realize your own theme go to Expert mode chapter.

Easy mode

Front

You can change different settings in the backoffice. Go to :

Site > Gestion des propriétés du site > Propriété par défaut du site or Configuration du thème citelibre

Or just acces on the page with this link : http://localhost:8080/rendezvous/jsp/admin/ManageProperties.jsp

image

Manage the properties of the website

You can change :

  • name of site
  • logo of site
  • dark or light theme

Setup your theme

You can change some property name of this site in this page.

image

Back office

You can edit back office theme here : http://localhost:8080/rendezvous/jsp/admin/AdminTechnicalMenu.jsp?tab=autoincludes

😎 Expert mode

If you want to realize a personal theme, you must edit and configure the default theme. You can get inspired with our theme in these repositories and create your properly plugin by forking them.

library stock all text display in plugin. With this, you can translate your theme in different languages.

theme stock all template html / css, you can overwrite default theme and you can have special template for the different plugins.

Architecture

For editing the theme, go to theme-citelibre/webapp folder:

  • WEB-INF
    • templates
      • admin for the back-office html template
      • skin for the front-office html template
  • css front-office css
    • admin back-office css
    • plugins plugins css for the front-office
  • fonts for add new fonts for your website
  • images
  • js script js for the front-office
    • admin script js for the back-office
    • plugins script js for the front-office
  • webfonts

Plugins theme

For the theme, you can overwrite your default config for your different plugins. You can find different example here : https://github.com/citelibre/theme-citelibre/tree/develop/webapp/WEB-INF/templates/skin/plugins

Recommandation

Firstly, we recommend to import these projects in your application for realize your template more easily and save time.

For that, copy the src and webapp folders of the theme and library projects in the src and webapp folders in the citelibre-rendezvous folder.

After that, replace these lines in the Dockerfile :

# Add webapps folder
COPY webapp/WEB-INF webapps/rendezvous/WEB-INF/
COPY webapp/js webapps/rendezvous/js/

by that:

# Add webapps folder
COPY webapp/* webapps/rendezvous/

Now, you can launch project in the root project with the make test command.

When you are satisfied with your modifications you can create your plugin with the chapters bellow.

Requirement

  • Maven: 3.6.3
  • OpenJDK : 11
  • Fork the theme project and add your different modifications

Environment

Don't forget to add JAVA_HOME in your environment:

$ export JAVA_HOME=/usr/lib/jvm/java-11-openjdk/

How to build your theme

$ mvn clean install

How to store and release in your Github repository

POM file

Edit the pom file with your environment (Github url, name of your template, version, etc).

Example with this repository https://github.com/sbelondr/theme-citelibre:

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/maven-v4_0_0.xsd">
    <parent>
        <artifactId>lutece-site-pom</artifactId>
        <groupId>fr.paris.lutece.tools</groupId>
        <version>3.2.2</version>
    </parent>
    <modelVersion>4.0.0</modelVersion>
    <groupId>com.sbelondr</groupId>
    <artifactId>theme-citelibre</artifactId>
    <packaging>lutece-site</packaging>
    <name>Site Theme CiteLibre</name>
    <version>v1.0.2</version>
    <description></description>
    <scm>
        <connection>scm:git:https://github.com/sbelondr/theme-citelibre.git</connection>
        <developerConnection>scm:git:https://github.com/sbelondr/theme-citelibre.git</developerConnection>
        <tag>HEAD</tag>
        <url>https://github.com/sbelondr/theme-citelibre.git</url>
    </scm>

Create CI

This CI create a new release while building your project to store the jar file in the releases.

name: Build and Release
on:
  push:
    tags:
      - 'v*.*.*'
jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Set up JDK 11
        uses: actions/setup-java@v3
        with:
          java-version: '11'
          distribution: 'adopt'

      - name: Build with Maven
        run: mvn clean install

      - name: Archive Artifacts
        uses: actions/upload-artifact@v3
        with:
          name: built-artifact
          path: target/*.jar

  release:
    needs: build
    runs-on: ubuntu-latest
    steps:
      - name: Download artifact
        uses: actions/download-artifact@v3
        with:
          name: built-artifact
          path: ./

      - name: Create GitHub Release
        id: create_release
        uses: actions/create-release@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          tag_name: ${{ github.ref }}
          release_name: Release ${{ github.ref }}
          body: |
            Release notes for ${{ github.ref }}
          draft: false
          prerelease: false

      - name: Extract tag name
        id: extract_tag
        run: echo "TAG_NAME=${GITHUB_REF##*/}" >> $GITHUB_ENV

      - name: Upload JAR to Release
        uses: actions/upload-release-asset@v1
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          upload_url: ${{ steps.create_release.outputs.upload_url }}
          asset_path: ./theme-citelibre-v1.0.2.jar # change with your pom settings
          asset_name: theme-citelibre-${{ env.TAG_NAME }}.jar
          asset_content_type: application/java-archive

Create new tag

$ git tag v1.0.2
$ git push origin v1.0.2

How to use my new theme in my project

For the private project, you have instruction to setup the authentication here : documentation Jitpack

In your pom file, add this lines:

    <repositories>
        <repository>
            <id>jitpack.io</id>
            <url>https://jitpack.io</url>
        </repository>
    </repositories>

[...]
        <dependency>
            <groupId>com.github.sbelondr</groupId>
            <artifactId>theme-citelibre</artifactId>
            <version>v1.0.5</version>
        </dependency>
Clone this wiki locally