.. note::

   Cette documentation est en cours de redaction. Pour toutes questions n'hésitez pas à nous envoyer un email sur `community@risefor.org <community@risefor.org/>`_
   ou à ouvrir un ticket `directement sur git <https://git.risefor.org/installation/>`_

**********************
2. Personnaliser votre instance
**********************


Nous avons conçu Risefor pour que vous puissiez changer facilement le logo, la charte graphique ainsi que la page d'acceuil afin de pouvoir vous l'approprier.


.. contents:: Table des matières
    :local:
    :depth: 2



.. admonition:: Respects des mentions "Risefor"

    Risefor est un outil sous license `Creative Commons Attribution-NonCommercial-ShareAlike 2.5 <https://git.risefor.org/applications/risefor-front/-/blob/risefor_main/master/LICENSE>`_ (copy left).

    Nous vous demandons donc de bien préserver les mentions de "Risefor" sur vos instances 


==============
Changer les couleurs
==============

La gestion des couleurs se trouve dans le dossier ``scss`` que vous pouvez retrouvez dans les sources (``/src/scss/``)

Toutes les couleurs sont déclarés dans le fichiers ``variables.scss``, accessible ici ``scss/src/variables.scss``

Vous pouvez y trouver des variables nommées, par exemple, ``$main-color`` suivi du code hex. Il vous suffit de modifier les couleurs et de recompiler.

.. warning::

   La couleur du bouton secondaire est géré par la variable ``$third-cta-color``. Nous allons revoir ce fonctionnement à un moment.

|:warning:| Après avoir fait vos modifications, n'oubliez pas de recompiler le scss afin de mettre à jour le ficher css.

Si besoin, voici la commande

.. code-block:: bash

   sass src/scss/index.scss static/css/united4earth.css

.. note::

   Vous pouvez ajouter le flag ``--watch`` pour mettre à jour en continue

==============
Changer le logo
==============

Pour personnaliser le logo il vous suffi de :

1. Ajouter votre logo dans le dossier suivant :
``united4earth/static/img/Logos/``

2. Ouvrir le fichier suivant :
``united4earth/templates/united4earth/header.html``

3. Cherchez la ligne suivante:

``<img  class="navbar-item width-160px" id="logo" src="{% static 'img/Logos/risefor-logo_black-tagline.png' %}" alt="Logo Risefor">``

4. Modifier le contenu ``risefor-logo_black-tagline.png`` présent dans l'étape précédente par le nom de votre logo.

5. Si vous êtes en production (``DEBUG = False``), recompiler les fichiers static 

.. code-block:: bash

   python3 manage.py collectstatic 


Et voilà ! Vous devriez voir votre logo :) 

Si vous voulez changer la taille du logo, vous pouvez changer le nombre de pixel de largeur au niveau de la class ``width-160px`` visible dans l'étape 3.
Par exemple, pour un logo à 90px de largeur, la class serait ``width-90px``


==============
Personaliser la page d'acceuil
==============

Pour personnaliser la page d'acceuil il vous suffit de changer le contenu dans le fichier suivant: 
``united4earth/templates/united4earth/home.html``


Si vous êtes en production (``DEBUG = False``), il faudra recompiler les fichiers static pour faire apparaitre vos changements.

Si besoin, voici la commande

.. code-block:: bash

   python3 manage.py collectstatic 


==============
Poussez vos modifications sur git
==============

Fini avec vos modifications ? Il ne vous reste plus qu'à les pousser sur git ! 

Si besoin, voici la commande

.. code-block:: bash

   git push


Rendez-vous dans la section :doc:`deploiement serveur <./deploy-server>` pour la prochaine étape !