Theme Press pour Confluence : tutoriel pour webdesigner


Publié par
Mathieu VISIERE

12 juin 2014

Dans notre précédent article, je vous présentais le nouveau-né dans les add-ons de personnalisation de thèmes pour Confluence : Theme Press.

Cet outil, bien qu’assez intuitif, nécessite quelques explications pour une prise en main efficace et pour pouvoir ainsi profiter de l’étendue de ses fonctionnalités.

Amis webdesigners,  je partagerai donc avec vous mes bonnes pratiques pour réaliser votre thème grâce à Theme Press ainsi que quelques astuces.

Maintenant lancez votre Confluence, suivez le guide et c’est parti !

Débuter avec Theme Press, les bonnes pratiques

Installation de Theme Press en quelques clics

Pour installer Theme Press, rien de plus simple, il suffit d’ajouter l’add-on directement depuis l’administration de Confluence.

Une fois celui-ci installé, il vous faut procéder à 2 étapes, parfaitement illustrées dans la vidéo suivante : activer Theme Press et créer son espace par défaut.

Paramétrer Confluence

Une fois Theme Press installé, voici 3 étapes qui vont vous permettre d’en profiter pleinement :

Création de votre espace d’accueil

Dans un premier temps, nous allons créer un nouvel espace qui va être par la suite la page d’accueil de votre nouveau site.

Pour se faire, créez votre espace directement depuis la barre d’administration :

create_space

 

Sélectionnez ensuite « Espace vide » puis cliquez sur suivant et renseignez le nom de votre espace, par exemple « HOME » puis validez.

Vous êtes maintenant prêts à passer à l’étape suivante !

Définir votre nouvel espace comme page d’accueil

  1. Aller dans l’administration de Confluence
  2. Dans la section « Configuration », se rendre sur « Configuration Générale »
  3. Dans la section « Configuration du site », cliquer sur « Modifier »
  4. Dans « Page d’accueil du site », choisissez l’espace que vous avez créé précédemment avec Theme Press
  5. Cliquez maintenant sur le logo Confluence, vous devriez arriver sur votre espace fraîchement créé !

Ajouter le raccourci du Dashboard dans la barre Confluence

  1. Aller dans l’administration de Confluence
  2. Dans la section « Administration », se rendre sur « Navigateur Inter-Applications »
  3. Ajouter un lien « Dashboard » avec l’adresse de celui-ci
    (ex en local : http://localhost:1990/confluence/dashboard.action)
  4. Voilà ! Votre dashboard est maintenant accessible depuis la barre Confluence :)

Création de votre thème

Pour utiliser le designer Theme Press, vous devez être administrateur de Confluence! N’utilisez le designer que sur un environnement de test!

Maintenant que Confluence est prêt, il est temps pour vous d’exploiter les fonctionnalités de Theme Press en commençant par créer votre propre thème.

Theme Press est configuré avec son thème de base nommé « Lumen ». Nous allons dupliquer ce thème pour créer le nôtre sur la base de celui-ci.

Pour se faire, suivez la vidéo suivante :

Paramétrer votre charte graphique : logo et palette de couleurs

Votre thème est désormais actif et prêt à être paramétré.

Comme vous avez pu le voir dans la vidéo, chaque section est accompagnée d’une aide interactive pour vous expliquer chacune des actions disponibles.

N’hésitez pas à faire le tour du propriétaire et regarder ces aides afin d’être à l’aise avec les différents paramètres du thème.

Nos conseils pour paramétrer votre thème correctement

  1. Ajouter votre logo
  2. Mettre en place votre palette de couleur : une fois vos couleurs principales mises en place, vous pourrez les retrouver facilement dans le color picker
  3. Explorer la section « Content » pour paramétrer les styles et éléments récurrents
  4. Mettre en place la structure du thème avec la section « HTML structure » : searchbox, menus, titres, etc ..
  5. Si vous le souhaitez, personnalisez les éléments Confluence avec la section « Confluence »

Une fois votre thème opérationnel, n’oubliez pas de l’exporter avec le bouton prévu à cet effet pour en garder une copie.

Découverte des onglets

Maintenant en possession de votre thème, nous allons passer à la suite : l’architecte et l’éditeur de page.

Pour chaque page, l’éditeur Theme Press possède 3 onglets : « Page », « Architect » et « Theme » que vous avez pu découvrir dans la vidéo ci-dessus.

Onglet « Page »

Cet onglet va vous permettre de définir la structure de votre page, à partir d’un layout (mise en page) de base. Ce layout peut être modifié dans l’onglet « Architect » > « Layout Source », en cliquant sur le petit oeil.

Vous pouvez également créer un nouveau layout en fonction de vos besoins.

Une fois que celui-ci a été choisi, vous pouvez personnaliser votre page à l’aide de calques composés de colonnes et blocs modulables à souhait.

La mise en avant des éléments est très intuitive (chaque clic sur un élément le met en avant, cf. capture ci-dessous) et avec un peu de pratique vous verrez que l’édition de la stucture est beaucoup plus simple qu’il n’y paraît !

layer_highlight

Onglet « Architecte »

L’onglet architecte permet d’effectuer toutes les mises en forme générales de votre site, que ce soit par espace spécifique ou au niveau global.

Lorsque vous allez dans une section de l’architecte, vous pouvez accéder à l’élément concerné en cliquant sur le petit oeil.

Une fois sur l’élément, vous pouvez constater que l’onglet « Page » est remplacé par le nom de l’élément, vous êtes donc actuellement en train d’éditer sa mise en forme spécifique.

Pour plus d’informations pensez à lire les aides interactives pour chacun de ces éléments.

Si vous avez des questions sur ces deux onglets, n’hésitez pas à nous contacter.

Trucs et astuces

Cacher les éléments Confluence

Pour cacher les éléments Confluence tels que les commentaires et les likes, il faut vous rendre sur votre layout et paramétrer les options suivantes :

layout_elements

Raccourcis clavier utiles

.  : Afficher / Cacher le designer

z  : Afficher / Cacher le menu Confluence

x  : Activer / Désactiver l’éditeur de contenus

Pour aller plus loin

Macros et fonctionnalités spécifiques de Theme Press

Theme Press possède des fonctionnalités spécifiques et de nombreuses macros.

Parmi celles-ci un slider de contenu, des blocs entièrement cliquables, des macros de mise en page, etc ..

Vous pouvez dès maintenant les découvrir à cette adresse :
http://help.brikit.com/dosearchsite.action?queryString=macro&startIndex=0

Certaines de ces macros sont personnalisables en bas de la colonne de l’onglet « Thème ».

Prochaine release : Theme Press 1.0.1

De nouvelles fonctionnalités vont arriver sous peu avec la prochaine release : la galerie de thèmes et l’optimisation pour mobile.

La galerie de thèmes vous permettra de partager les thèmes que vous avez créés grâce à Theme Press mais aussi de choisir un thème parmi ceux proposés dans celle-ci. Une nouvelle fonctionnalité qui devrait donner l’opportunité de créer une communauté vivante autour du produit, permettant ainsi à ses utilisateurs de partager leurs connaissances et idées.

L’optimisation mobile quant à elle vous permettra de « transformer » votre site afin qu’il soit adapté à votre smartphone Android ou iPhone (par le biais du responsive design ciblé sur ces deux users agents).

Vous pourrez ainsi créer une variante de votre thème adaptée aux mobiles simplement par le biais de l’éditeur.

Ressources

  • Site web Theme Press
    http://www.brikit.com/display/themepress/Brikit+Theme+Press
  • Documentation Theme Press
    http://help.brikit.com/display/PRESS/Brikit+Theme+Press+Documentation
  • Support Theme Press
    https://brikit.atlassian.net/login?dest-url=%2Fsecure%2FDashboard.jspa
  • Theme Press Answers Forum
    https://answers.atlassian.com/questions/ask/?tags=addon-com.zenfoundation
  • Tutoriels vidéos Theme Press
    http://help.brikit.com/display/PRESS/Theme+Press+Videos
  • Theme Press sur la Marketplace Atlassian
    https://marketplace.atlassian.com/plugins/com.brikit.themepress
  • Site web Brikit
    http://www.brikit.com/display/brikit/Welcome
Pour toute question ou information supplémentaire, n’hésitez pas à laisser un commentaire sur l’article!