Ajouter une image de fond de connexion en taille réelle

Fenekio CRM ne prend pas officiellement en charge l'image d'arrière-plan de connexion pour la zone d'administration et la zone des clients pour conserver la simplicité, mais nous avons créé un extrait CSS simple qui ajoutera une image d'arrière-plan parfaitement alignée et pleine largeur dans la zone d'administration, y compris un fondu sur l'image avec du CSS pur.

Image d'arrière-plan de connexion personnalisée de la zone d'administration

  1. Si vous avez ajouté une couleur personnalisée pour l'arrière-plan de connexion administrateur dans Configuration->Style de thème->Général, supprimez-la et définissez-la vide pour éviter que les styles en ligne n'écrasent le style d'arrière-plan de l'image.
  2. Créer un fichier custom.css dans assets/CSS
  3. Choisissez une image que vous souhaitez ajouter en arrière-plan. (au moins 1280 x 720px)
  4. Téléchargez l'eq d'image, dans le dossier média (ou là où vous préférez). Dans notre cas ce sera dans media et l'url sera comme ceci : http://votredomaine.com/crm/media/login_admin.png
  5. Ouvrez le fichier custom.css et ajoutez le code suivant :
/* Supprimez ceci si vous ne voulez pas de superposition d'arrière-plan sur l'image ou ajustez selon vos besoins */
body.login_admin:avant {
    contenu: " ";
    fond : rgba(31, 31, 31, 0,7);
    hauteur minimale : 100 % ;
    largeur minimale : 100 % ;
    position : absolue ;
}
body.login_admin {
  arrière-plan : url('https://yourdomain.com/crm/media/login_customers.png') centre de centre sans répétition corrigé ; /* L'url de l'image complète*/
  -webkit-background-size : couverture ;
  -moz-background-size : couverture ;
  -o-background-size : couverture ;
  taille de l'arrière-plan : couverture ;
}

Voici notre résultat final :

Ajouter une image d'arrière-plan de connexion administrateur en taille réelle

Image d'arrière-plan de connexion personnalisée à l'espace client

Suivez les étapes de l'image d'arrière-plan de connexion personnalisée de la zone d'administration de 1 à 4.

Gardez à l'esprit que pour l'étape 4, vous devrez renommer l'image en eq. login_clients.png

5. Ouvrez le fichier custom.css et ajoutez le code suivant :

body.customers_login {
  arrière-plan : url('https://yourdomain.com/crm/media/login_customers.png') centre de centre sans répétition corrigé ; /* L'url de l'image complète*/
  -webkit-background-size : couverture ;
  -moz-background-size : couverture ;
  -o-background-size : couverture ;
  taille de l'arrière-plan : couverture ;
}

N'oubliez pas de remplacer l'URL par l'URL de votre image

 

Avez-vous trouvé cet article utile ?