ReportR : Paramètres design du PDF à l'aide de CSS

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.


Essential  ✗
Professional  ✗
Enterprise  
ReportR ✓

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.


custom css example


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.


vue html


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.


PDF Custom CSS view page source


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.


PDF Custom CSS view HTML code



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:


ReportR CSS - Widget number


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


V
Vincent est l'auteur de cet article de solution.

Cette réponse a-t-elle été utile ? Oui Non

Envoyer vos commentaires
Nous sommes désolés de ne pas avoir pu répondre à votre question. Aidez-nous à améliorer cet article grâce à vos commentaires.