Créer ma feuille de style personnalisée (CSS)

Personnaliser la feuille de style (CSS) d'une page

Le CSS c'est le langage qui est utilisé pour définir l'aspect de votre site et qui est appliqué au HTML (le langage qui définit le contenu de votre site).

Pour modifier l'aspect visuel d'une page, il suffit de:

  • identifier la page à personnaliser
  • ajouter la classe CSS correspondante à modifier dans votre back office , rubrique design

Exemple de personnalisation CSS

Sur la page de la liste des projets je souhaite masquer le champ 'Financements'
  1. J'inspecte d'élément (CTRL+MAJ+I ou clic droit + inspecter) 
  2. Je cherche la classe associé à l'élément que je veux masquer : il s'agit ici de l'élément 'h1.page-title'
  3. Pour masquer cet élément je le sélectionne, clique sur la petite croix ' New Style Rule" à droite et j'écris le code suivant:  h1.page-title {display : none}
  4. Je vérifie ensuite ma page
  5. Le champ 'Financement' a bien disparu mais seulement de manière temporaire.
  6. Pour le faire disparaître de manière permanente, je dois copier le code que je viens d'écrire dans mon back office administrateur > Design > CSS personnalisé et SAUVEGARDER.

A titre d'exemple, vous pouvez trouver ici un exemple de fichier CSS adapté pour une plateforme d'investissement 

Classes CSS disponibles 

Ci après les classes disponibles pour modifier le style de vos pages.
Ces classes sont disponibles également en inspectant le code CSS de votre page depuis votre navigateur via le raccourci CTRL+MAJ+I ou clic droit + inspecter

Exemples de classes pour masquer les éléments du menu

Il est souvent utile d'avoir un menu dynamique en fonction du statut de l'utilisateur (connecté ou pas connecté)

Pour gérer dynamiquement des éléments du menu, il suffit d'utiliser les classes suivantes 

  • .header_hidden-connected : masquer un élément du menu quand l'utilisateur est connecté
  • .header_hidden-notconnected : masquer un élément du menu quand l'utilisateur n'est pas connecté
  • .le préfixe isconnected : afficher tout type d'élément de la plateforme quand l'utilisateur est connecté
  • .le préfixe :not(.is-connected) : afficher tout type d'élément de la plateforme quand l'utilisateur n'est pas connecté

Par exemple, 

Pour afficher le menu d'un utilisateur déconnecté, il faut appliquer le css suivant :

:not(.is-connected) .header { ... cible le header quand déconnecté }

Exemples de classes disponibles sur une plateforme d'investissement

  • .pc-page-contact : pour personnaliser la page contact
  • .pc-page-login  : pour personnaliser la page de connexion
  • .pc-page-projects : pour personnaliser la page des projets
  • .pc-page-signin : pour personnaliser la page d'inscription
  • .pc-page-signincontractor : pour personnaliser de dépôt de dossier
  • .pc-page-{url page seo} : pour personnaliser toutes les pages de contenu
  • .is-investor .element-a-masquer {display:none :important;}  : pour masquer un élément à un user de type investisseur
  • .is-entrepreneur .element-a-masquer {display:none :important;}  : pour masquer un élément à un user qui pilote une opération de financement

Par exemple pour masquer le menu sur la page de connexion, il faut ajouter le code suivant :

.pc-page-login .header { display: none }Exemples de classes pour masquer les éléments du menu

Comment modifier des éléments de tableau en CSS

Il peut arriver que vous ayez envie de modifiez ou masquer des champs dans les tableaux; un tableau de transaction par exemple ou encore une popup d'informations.

Le principe est simple, il suffit de trouver l'index de l'élément à modifier dans le tableau puis d'appliquer la modification souhaitée

Exemple pour modifier le CSS d'un tableau

pc-inv-transactions table th:nth-child(8), pc-inv-transactions table td:nth-child(8),
pc-inv-transactions table th:nth-child(6), pc-inv-transactions table td:nth-child(6),
pc-inv-transactions table th:nth-child(7), pc-inv-transactions table td:nth-child(7) {
    display: none;
}<br>

Exemple pour modifier le CSS d'une popup d'informations

.transactions-dialog_content_table tr:nth-child(3),
.transactions-dialog_content_table tr:nth-child(4) {
    display: none;
}

Still need help? Contact Us Contact Us