Custom CSS vous permet de modifier d'autres éléments de votre conception (par exemple, agrandir des réponses, transformer des liens en boutons, etc. Vous pouvez utiliser la vue HTML pour prévisualiser vos modifications.
Utilisez l'éditeur CSS en ligne situé dans l'onglet Design pour styliser votre PDF à l'aide de votre propre CSS personnalisé. Il ne vous reste plus qu'à commencer à taper! Regardez ci-dessous et voyez. Vous pouvez également copier et coller le texte dans l'éditeur en ligne.
Quels sont les avantages de l'utilisation de custom CSS?
- Il aide à la mémorisation de la marque - CSS vous aide à recréer entièrement la marque de votre entreprise pour faire correspondre l'enquête et permettra donc aux clients d'identifier immédiatement l'enquête à votre entreprise.
- Une plus grande flexibilité pour modifier la conception - consultez les exemples ci-dessous pour voir combien de choses vous pouvez changer en utilisant CSS. Si quelques éléments vous dérangent dans l'apparence de l'enquête, CSS vous permet d'adapter la conception de l'enquête dans tous les détails.
WARNING
Ce guide s'applique uniquement aux PDF créés après le 18 novembre 2019. Pour les PDF créés avant cette date, rendez-vous dans l'onglet Options supplémentaires de la vue ReportR et cliquez sur Mise à niveau.
Veuillez noter que cette mise à niveau peut avoir un effet négatif sur les PDF contenant des custom CSS. Nous vous suggérons de faire d'abord une copie de votre PDF et de mettre à niveau le PDF copié pour le tester.
Vue HTML
Un exemple de fichier HTML se trouve ici. Veuillez noter que l'ouverture de ce fichier dans le navigateur n'aura pas le même aspect que le PDF. Ce fichier HTML est un exemple pour montrer la structure HTML et toutes les classes CSS utilisées qui peuvent être utilisées pour adapter le style. Il est recommandé de télécharger le fichier d'exemple et de l'ouvrir dans votre éditeur de texte préféré.
Une autre façon de visualiser le code HTML est d'aller dans l'onglet Design. Choisissez la section que vous souhaitez prévisualiser et cliquez sur Générer HTML. Le rapport PDF que vous avez créé apparaît alors.
Pour afficher le code source d'une section, cliquez avec le bouton droit de la souris sur la section et choisissez Inspect si vous utilisez Chrome (recommandé) ou Inspect element si vous utilisez Mozilla Firefox.
Maintenant, si vous cliquez sur l'icône encerclée ci-dessous, qui apparaît dans la Inspect console, ou si vous tapez Ctrl+Shift+C, vous pouvez survoler n'importe quelle partie de la page pour afficher le code HTML.
En-tête et pied de page
Les en-têtes se trouvent dans un div avec une classe header-container, tandis que les pieds de page se trouvent à l'intérieur d'un div avec une classe. footer-container.
L'en-tête et le pied de page n'apparaissent pas sur la page de titre et la page finale.
Page de titre
La page de titre est considérée comme une page distincte. Le corps est marqué par l'ID title-page.
Conseil : si vous souhaitez définir une page de fond pour votre page de couverture, la hauteur et la largeur idéales sont de 1121 px et 810 px.
Page finale
Tout comme la page de titre, la page finale est considérée comme une page distincte. Le corps est marqué avec l'ID final-page.
Pages
Chaque contenu de page sera contenu dans un élément section avec les classes page et page-container. La classe page-container garantit qu'il y a un saut de page après cet élément.
Toutes les pages disposent d'un sélecteur d'identification supplémentaire qui peut être utilisé pour cibler des éléments sur des pages spécifiques.
Exemple:
section.page-container {
page-break-after: always;
page-break-inside: avoid;
}
section#page_1 {
color: #FF0000;
}Widgets
Chaque widget a son propre style, qui peut être trouvé dans le document HTML d'exemple. Veuillez noter qu'il ne sera pas possible de modifier la mise en page des éléments graphiques (graphique en araignée et en colonnes) car la configuration et le style sont appliqués au moment de l'exécution, où un élément SVG sera créé.
Pour cibler un seul widget, utilisez l'ordre du widget pour créer le sélecteur. Par exemple, un widget d'ordre 4 possède le sélecteur CSS suivant: #widget_4. L'ordre des widgets se trouve à côté du nom du widget dans la liste des widgets:
Pour sélectionner tous les widgets du même type, utilisez le sélecteur suivant:
Widget Type | CSS selector |
Texte | .template-widget.text |
KPI bloc de questions | .template-widget.questionblock_kpi |
Table | .template-widget.table |
Graphique araignée | .template-widget.spiderchart |
KPI formule | .template-widget.formula_kpi |
Graphique à barres verticales | .template-widget.column_chart |
Image | .template-widget.image |
| Tableau des résponses | .template-widget.custom_results_by_respondent_table |
| Diagramme à barres horizontales | .template-widget.bar |
| Graphique a mesure | .template-widget.gauge_widget |
| Classement des formules | .template-widget.formula_ranking |