app • Atlassian Confluence - martindubenet/wed-dev-design GitHub Wiki

Link to « submit my custom template to be part of Confluence Template Gallery »

Templates

https://www.atlassian.com/software/confluence/templates

Available colors

UI colors

Color	hex	Context
Lighter gray	`#fafbfc`	Sidebar background-color
Light gray	`#ebecf0`	Sidebar’s buttons background on Active state
Gray	`#ecedf0`	Toolbar’s buttons background on Hover state
Blue	`#0052cc`	Primary buttons background
Dark blue	`#42526e`	Toolbar icon color
Darker blue	`#32435f`	Toolbar’s buttons background on Active state + Tooltips background-color

Text colors

Density	Gray	Info	Aqua	Success	Warning	Error	Note
Saturated	`#172b4d`	`#0747a6`	`#008da6`	`#006644`	`#ff991f`	`#bf2600`	`#403294`
Base	`#97a0af`	`#4c9aff`	`#00b8d9`	`#36b37e`	`#ffc400`	`#ff5630`	`#6554c0`
Desaturated	`#fff`	`#b3d4ff`	`#b3f5ff`	`#abf5d1`	`#fff0b3`	`#ffbdad`	`#eae6ff`

Confluence text colors

Table cells background-colors

Density	Gray	Info	Aqua	Success	Warning	Error	Note
Saturated	`#b3bac5`	`#4c9aff`	`#79e2f2`	`#57d9a3`	`#ffc400`	`#ff8f73`	`#998dd9`
Base	`#f4f5f7`	`#b3d4ff`	`#b3f5ff`	`#abf5d1`	`#fff0b3`	`#ffbdad`	`#c0b6f2`
Desaturated	`#fff`	`#deebff`	`#e6fcff`	`#e3fcef`	`#fffae6`	`#ffebe6`	`#eae6ff`

Confluence cell background colors

Alert containers

Macro name	French macro name	Color	Background	Icon color
Info panelA detail of no consequence.	Volet d’informations Un détails sans conséquence.	Blue	`#deebff`	`#0052cc`
Note panelAn important observation.	Panneau de notesUne observation importante.	Indigo	`#eae6ff`	`#5243aa`
Success panel	Panneau de réussite	Green	`#e3fcef`	`#00875a`
Warning panel	Panneau d’avertissement	Yellow	`#fffae6`	`#ff991f`
Error panel	Panneau d’erreur	Red	`#ffebe6`	`#de350b`

Macros

Formatting

Useful for template layouts

Excerpt vs Extrait

Macro name	Description (En)	French name	French description
Children Display	Lists a page's children and their descendant pages.	Affichage des enfants	Répertorier tous les enfants d’une page (et peut-être leurs enfants).
Page Tree	Renders a page tree.	Arborescence de page	Affiche l’arborescence des pages.
Table Of Contents	Creates a Table of Contents for the current page based on headings in the page.	Sommaire	Crée une table des matières pour la page en cours en fonction des en-têtes de la page.
Excerpt	Marks part of the page's content for use by other macros.	Extrait	Marquer une section d’une page en tant qu’extrait des résumés des pages.
Excerpt Include	Displays the excerpted contents from another page within the same space.	Inclusion d'extrait	Inclure l’extrait d'une page dans une autre page.
Expand	This macro displays a toggle an accordeon controller that expandable/collapsible his content within your page. By default it is collapsed.	Développer	Ce marco affiche un contrôleur (de style accordéon) qui permet de basculer la visibilité de son contenu à même la page.
Panel	This macro displays a set `panel-header` (optional) and `panel-body` blocks of text within a customizable panel.	Volet	Ce marco affiche une section titre (optionnelle) et une section de contenu dans une boîte pour mettre en évidence son contenu.

Inserting code

Macro name	Description (En)	French name	French description
Code Snippet	Macro to format blocks of source-code or XML.	Bloc de code	Macro pour formater les blocs de code source ou XML.
Iframe	Add a URL source to be contained within an iframe to your page.	Inclusion d’HTML	Permet l’inclusion d’un fichier HTML externe dans une page Confluence.

Inserting widgets

Macro name	Description (En)	French name	French description
Widget Connector	Embed YouTube videos, CodePen emulators, Flickr slideshows, Twitter streams, Google Docs and other content from the web.	Connecteur de gadgets	Intégrez des vidéos YouTube, des émulateurs de CodePen, des diaporamas Flickr, des fils Twitter, des Google Docs and d'autre contenus depuis le web.

Content design tips

Space overview header image

What are the dimensions?

192px : Max height dimension
13.255:1 : Image ratio