La charte graphique est composé d'un ou de plusieurs thèmes, et d'un ou de plusieurs layouts. Le thème est l'ensemble des feuilles de style CSS ainsi que des scripts JavaScript spécifiques qui vont être ajoutés à l'entête de la page HTML. Le layout est le squelette de la page HTML, contenant les régions du portail et définissant sa structure en vues normale et maximisée.
Une charte contient également la présentation de la page et des portlets en erreur, ainsi que les éléments graphiques (images, régions, etc.) spécifiques à cette charte.
La définition des thèmes de la charte est enregistrée dans le fichier portal-themes.xml
. Chaque thème est muni d'un nom ainsi que de dépendances vers les feuilles de style et scripts à injecter dans l'entête.
Afin d'assurer le bon affichage de tous les composants du portail, le thème doit être basé sur le framework Bootstrap. Il est alors possible de reprendre soit le style « Bootstrap » proposé par le portail, soit de créer un nouveau style. Le nouveau style doit être créé à partir des sources Bootstrap LESS modifiée par OSIVIA, qui peuvent alors être personnalisées (tailles, polices, couleurs, etc.).
Exemple de thème :
<theme>
<name>demo-charte</name>
<link rel="icon" href="/img/osivia.ico" />
<link rel="stylesheet" href="/css/demo.min.css" title="Demo" />
<script type="text/javascript" src="/js/demo.js"></script>
</theme>
La définition des layouts de la charte est enregistrée dans le fichier portal-layouts.xml
. Chaque layout est muni d'un nom, de chemins vers les pages en vues normale et maximisée, et du nom des régions modifiables dans le portail.
Le squelette du layout se présente sous la forme d'un fichier JSP produisant la page HTML finale. Il exploite alors la taglib portal-layout
qui permet de positionner les régions et d'injecter les informations nécessaires à l'affichage dans l'entête de la page.
Exemple de layout à deux colonnes :
<layout>
<name>demo-2-cols</name>
<uri>/layouts/2-cols/index.jsp</uri>
<uri state="maximized">/layouts/2-cols/maximized.jsp</uri>
<regions>
<region name="col-1" />
<region name="col-2" />
</regions>
</layout>
La feuille de style CSS de la charte graphique de démonstration est générée à partir du compilateur LESS et repose sur le framework Bootstrap.
Les thèmes et les layouts sont associés aux portails via le portal d'administration de Osivia Portal
Ils peuvent être spécialisés sur certaines pages pages via le menu PAGE > PROPRIETE