Le projet demo-charte contient à la fois les éléments graphiques statiques (images, feuilles de style CSS, scripts JavaScript, etc.) ainsi que les layouts de page.

Modification du style

Ouvrez le fichier variables.less du dossier src/main/less/bootstrap. Il contient les variables Bootstrap telles que les couleurs, les polices, les marges, etc.

Modifiez la valeur de la variable @brand-primary: #4da0ab; par la couleur de votre choix. Cette variable définie la couleur principale de la charte et donne notamment la teinte des liens. Vous pouvez donner la valeur @brand-primary: #cc0000; si vous souhaitez un rouge un peu foncé comme couleur dominante.

Lorsque vous choisissez des couleurs pour votre charte, veillez à respecter les écarts de contraste afin que votre site respecte les règles d'accessibilité.

Compilez la charte modifiée à l'aide de la commande :

mvn clean package

Remplacez alors le fichier /opt/portal/custom/deploy/osivia-demo-charte-[…].war par celui que vous avez produit.

La nouvelle archive est déployée à chaud par le portail, vous pouvez tout de suite constater les changements de couleurs sur votre navigateur (n'oubliez pas de rafraîchir le cache du navigateur).

Modification d'un layout

Le layout à deux colonnes présente deux colonnes de même taille.

Vous pouvez modifier cette disposition en éditant les fichiers src/main/webapp/layouts/layout-2cols/index.jsp et src/main/webapp/layouts/layout-2cols/maximized.jsp pour remplacer les classes col-sm-6 par col-sm-3 et col-sm-9 :

<div class="row">
    <!-- Drawer -->
    <div id="drawer">
        <p:region regionName="drawer-toolbar" />
        
        <div class="col-sm-3">
            <p:region regionName="col-1" />
        </div>
    </div>
    
    <div class="col-sm-9">
        <p:region regionName="col-2" />
    </div>
</div>

De même que pour le style, vous pouvez déployer à chaud vos modifications et constater le résultat sur votre navigateur.

col-sm-3 indique que l'on souhaite une colonne de 25 % sur un écran de petite taille (une tablette en portrait par exemple) ainsi que sur les écrans plus grands, sauf indication contraire. En très petite taille (smartphone par exemple), la colonne prendra toute la largeur de l'écran.
La largeur des colonnes du framework grid de Bootstrap s'exprime en douzièmes.