Contenu | Rechercher | Menus

Annonce

Si vous avez des soucis pour rester connecté, déconnectez-vous puis reconnectez-vous depuis ce lien en cochant la case
Me connecter automatiquement lors de mes prochaines visites.

À propos de l'équipe du forum.

#1 Le 22/03/2019, à 16:05

jlfh0816

image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour à toutes et à tous,

Grâce au très beau travail de Vinceliuice sur DeviantArt et GitHub (thèmes Qogir ou Canta par exemple), j’ai récemment découvert qu’il est redevenu possible d’afficher une image ou une photo en tant que fond de mon gestionnaire de fichiers (Nemo), comme on pouvait le faire à l’époque de Gnome2/Nautilus3.
Du coup, j’ai eu envie d’adapter la technique de Vinceliuice au thème Greybird qui est celui installé à demeure sur ma Xubuntu 18.04.2 avec donc Nemo comme gestionnaire de fichiers et le thème xfwm4 appelé Kokodi pour décorer la fenêtre …. et ça fonctionne très bien comme vous pouvez le constater ci-dessous :

fenêtre active:
1559978239.png
et le lien direct.

fenêtre inactive:
1559978364.png
et le lien direct.

Je vous décris comment j'ai procédé, c’est très rapide.
Comme je suis le seul utilisateur de ma machine, j’aurai pu choisir de modifier le thème Greybird directement dans le système de fichiers, à cette adresse :  /usr/share/themes/Greybird et donc forcément avec les droits d’administrateur.
Mais, dans la pratique, je pense très préférable de ne pas modifier ce fichier directement à son emplacement d’origine car sinon à la moindre mise à jour du thème, toutes les modifications/personnalisations seront effacées…
Donc, le mieux est de faire une copie de /usr/share/themes/Greybird dans votre dossier personnel ~/.themes (si le dossier .themes n'existe pas, il faut le créer) ce qui nous donne ~/.themes/Greybird/. En plus, en pratiquant ainsi, les essais et modifications n’affecteront que votre session et pas celle des éventuels autres utilisateurs de votre machine.

Dans mon cas, j’ai donc placé la photo plage.jpg que je souhaitais avoir en fond de Nemo dans le dossier ~/.themes/Greybird/gtk-3.0/assets/. A noter que les formats .png, .gif ou .svg sont également acceptés.
Ensuite, j’ai ajouté les lignes de code ci-dessous à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css

/************************
 * NEMO à la plage*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-image: url("assets/plage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top right;
}

Et c’est tout. Reste seulement à recharger le thème dans Menu Whisker > Tous les paramètres > Apparence > style > choisir le thème GreyBird nouvellement modifié

Sinon, pour info, la consommation CPU est très raisonnable puisqu'autour de 2 à 4 % et Nemo est utilisable de façon normale, très fluide.

Afin d’éviter que je m’emballe trop vite, pourriez-vous vérifier que toute cette manip fonctionne également chez vous et que vous arrivez à afficher une image ou une photo ?



edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !



Ensuite, j’aimerai aller plus loin. Pourriez-vous m’y aider ?
J’aimerai, en particulier, afficher un gif animé au lieu d’une image fixe.
Si je fais cela en remplaçant bêtement plage.png par mongifanimé.gif, ça ne fonctionne pas. Plus exactement, la première frame du gif animé s’affiche mais ça en reste là. L’animation ne suit pas.
Je pense donc que ça ne doit pas être possible du tout avec une fenêtre GTK3.0 comme nemo-window

Du coup, je me suis dit que je pourrai peut-être utiliser certaines des transitions CSS supportées par les fenêtres GTK.
Par exemple, j’ai essayé de voir comment réagit la fenêtre .nemo-window si on lui applique la propriété :hover
Pour faire mon essai, je lui ai attribué un fond de couleur rouge et, en passant le curseur dessus, le rouge est censé se transformer en vert.
Pas de chance, ça ne fonctionne pas, le fond de nemo reste rouge.
Voici les lignes de code que j’ai utilisées :

.nemo-window .nemo-window-pane  notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-color: red;
  transition: background-color 1s linear;
}

.nemo-window:hover .nemo-window-pane:hover  notebook scrolledwindow.view:hover, window.thunar:hover notebook scrolledwindow.frame.standard-view:hover,
.nautilus-window:hover,
.nautilus-window:hover notebook,
.nautilus-window:hover notebook > stack{
  background-color: green;
}

Est-ce que quelqu’un pourrait m’aider pour avancer car je ne maîtrise aucun langage informatique, je ne fais que bidouiller…. je suis bien «coincé» !

Je vous en remercie très vivement par avance !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:09)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#2 Le 22/03/2019, à 21:48

soujaa

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

1553287760.png
J'ai un double écran et ça fonctionne chez moi.Je n’ai pas essaye la deuxième  partie de ton post.
Encore merci pour l’astuce.
Xubuntu 18.04
Nemo 3.6.5

Hors ligne

#3 Le 23/03/2019, à 08:03

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Merci beaucoup à toi soujaa pour ton retour et content que ça ait fonctionné ! smile


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#4 Le 23/03/2019, à 15:53

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

J'ai un petit peu avancé et, en consultant certains sites, je peux maintenant remplacer l'image fixe par un mini-diaporama dans lequel se succèdent 2 images (plage.jpg et macareux.jpg) que j'ai préalablement placées dans le dossier ~/.themes/Greybird/gtk-3.0/assets/

1559978454.png

Cliquez ici pour voir l'animation.

Et voici les lignes de code que j'ai placées à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css pour obtenir ce résultat:

/************************
 * NEMO *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack{
  animation: color-me-in 5s infinite;
}

@keyframes color-me-in {
  0% {
  background-image: url("assets/plage.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  }
  100% {
  background-image: url("assets/macareux.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  }
}

Bon, c'est laborieux parce que le code CSS m'est largement inconnu mais ça avance.
Ceci dit, ce code me parait en l'état actuel inexploitable car trop consommateur du CPU (la consommation CPU passe de 4 à 34%) et l'ouverture d'une seconde fenêtre Nemo est problématique.
Il faut donc continuer à explorer d'autres pistes pour essayer de trouver quelque chose de plus présentable et surtout plus fluide, plus utilisable.


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:09)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#5 Le 26/03/2019, à 22:38

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Voilà, j'ai un peu plus avancé et j'ai essayé quelque chose de plus simple, un grand classique : de la neige qui tombe. Pas original du tout mais c'est juste pour montrer que ça fonctionne :

1559978559.png

Cliquez ici pour voir l'animation.

Et voici les quelques lignes de code qui permettent d'arriver à ce résultat (à placer à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO neige qui tombe*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack{
    background: #6b92b9;
    background-image:  url('http://i.imgur.com/BiSmXaq.png'), url('http://i.imgur.com/XHuy0NJ.png'), url('http://i.imgur.com/okpRxJU.png');
    animation: snow 40s linear infinite;
}
@keyframes snow {
  0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
  50% {background-position: 500px 500px, 100px 200px, -100px 150px;}
  100% {background-position: 500px 1000px, 200px 400px, -100px 300px;}
}

Et cette fois, Nemo reste fluide et d'utilisation normale. La consommation CPU est à 10% chez moi, c'est beaucoup plus raisonnable que le précédent essai du post #4 !


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:09)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#6 Le 31/03/2019, à 18:03

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Pour continuer dans le sens des fonds animés de façon très soft pour que ça soit utilisable dans le cadre d'une utilisation normale de Nemo, voici une autre animation classique qui fonctionne bien : des nuages qui défilent lentement et en boucle infinie :

1559978613.png

Cliquez ici pour voir l'animation correspondante.

Et voici les quelques lignes de code à ajouter comme précédemment à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO dans les nuages*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack{
        background-image: url("assets/clouds.jpg");
        background-size: cover;
        background-repeat: no-repeat;
	animation: backAnimation 80s linear infinite;
}
@keyframes backAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

L'image que j'ai utilisée (clouds.png) provient d'ici et je l'ai préalablement copiée-collée dans le dossier ~/.themes/Greybird/gtk-3.0/assets/

Et comme pour l'animation "neige qui tombe" du #5, la consommation CPU reste autour de 10% et Nemo est utilisable de façon normale, très fluide.


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:09)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#7 Le 03/04/2019, à 00:10

soujaa

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour jlfh0816,
Je te suggère de partager tes astuces en ajoutant tes découvertes à la doc sur nemo.
La communauté Ubuntu pourra mieux profiter de tes belles astuces.
Merci
https://doc.ubuntu-fr.org/nemo

Hors ligne

#8 Le 03/04/2019, à 06:47

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

@soujaa
Merci pour ta suggestion.
Je n'ai jamais posté sur la doc Nemo d'Ubuntu dont tu me communiques le lien mais je vais de ce pas me renseigner pour savoir comment faire (s'agit pas de faire des bêtises !).
Et si ce n'est pas trop compliqué, je m'en occupe ce prochain week-end.
En tout cas, sois remercié de m'avoir lu, ça fait toujours plaisir d'avoir des retours !  smile

Dernière modification par jlfh0816 (Le 03/04/2019, à 06:49)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#9 Le 04/04/2019, à 20:31

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Pour continuer un peu sur la lancée des nuages qui défilent dans le fond de Nemo, voici ce que ça donne avec des "vrais" nuages, je veux dire avec une photo au lieu d'un dessin comme ci-dessus dans le post #6 :

1559978726.png

Cliquez ici pour voir l'animation correspondante.

Et voici les quelques lignes de code à ajouter comme précédemment à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO nuages photo *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
        background-image: url("assets/nuages_photo.png");
        background-size: cover;
        background-repeat: no-repeat;
	animation: backAnimation 80s linear infinite;
}
@keyframes backAnimation {
	from { background-position: 0 0; }
	to { background-position: 100% 0; }
}

L'image que j'ai utilisée (nuages_photo.png) provient d'ici et je l'ai préalablement copiée-collée dans le dossier ~/.themes/Greybird/gtk-3.0/assets/
La consommation CPU est un peu plus élevée qu'avec les nuages dessinés du #6 puisqu'elle atteint 12% (contre 10%) mais l'utilisation de Nemo reste fluide.


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:10)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#10 Le 07/04/2019, à 21:15

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

J'ai mis à profit ce week-end pour tester la faisabilité de jouer un fond avec plusieurs images en parallaxe. Pour l'occasion, j'ai essayé avec 4 images qui "coulissent" l'une au-dessus de l'autre afin de créer une impression de mouvement, comme si on regardait le paysage depuis la fenêtre d'un véhicule. Pour que ça ne soit pas trop agressif, j'ai adopté des couleurs vertes plus ou moins pastel de façon à ce que les icones au-dessus restent bien visibles. Et ça fonctionne comme vous pouvez le constater :

1559978774.png

Cliquez ici pour voir l'animation correspondante.

Et voici les quelques lignes de code à ajouter comme pour les posts précédents à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO PARALLAXE en vert *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
    background-color: #d6eaf8;
    background-image: url("assets/image1.png"), url("assets/image2.png"), url("assets/image3.png"), url("assets/image4.png");
    background-position: 0px 0px, 0px 100%, 0px 50%, 0px 0px;
    background-repeat: repeat-x;

    animation-name: bgscroll;
    animation-duration: 200s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

@keyframes bgscroll {
  from {background-position: 0px 0px, 0px 100%, 0px 50%, 0px 0px;}
  to {background-position: 7680px 0, 5760px 100%, 3840px 50%, 1920px 0;} 
  }

Les images que j'ai utilisées (image1.png, image2.png, image3.png et image4.png) ont été glanées sur la toile sur ce site et je les ai préalablement copiées-collées dans le dossier ~/.themes/Greybird/gtk-3.0/assets/
Pour mon exemple personnel, j'ai modifié les couleurs dans Gimp.
La consommation CPU est plus élevée qu'avec les tests des posts ci-dessus puisqu'elle atteint 20 à 25% mais l'utilisation de Nemo reste fluide.


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:10)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#11 Le 09/04/2019, à 20:42

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Je poursuis toujours mon idée d'essayer d'afficher un gif animé dans le fond de Nemo : échec à tous mes essais, ça ne fonctionne pas du tout. Du coup, j'essaie de contourner l'obstacle en jouant avec la valeur steps() de la propriété CSS animation et une spritesheet (dans l'exemple ci-dessous, cette dernière s'appelle sprite_B.png). Si j'ai bien compris le principe (?) et en simplifiant (beaucoup), ça revient à faire afficher successivement toutes les frames du gif, une par une (step by step), pour créer l'illusion d'un gif animé. Un gif animé-like en quelque sorte. C'est pas du tout évident à réaliser dans le container .nemo-window car ce n'est pas une vraie feuille de style CSS. J'ai beaucoup essayé mais je me suis cassé les dents à tous mes essais sauf bizarrement sur celui ci-dessous. Et encore, ça ne fonctionne qu'à moitié car si on agrandit la fenêtre de Nemo, on s'aperçoit que l'animation est affichée plusieurs fois côte-à-côte. Mais en redimensionnant judicieusement la fenêtre Nemo, on peut faire en sorte que BB8 ne figure qu'une seule fois, comme ci-dessous :

1559978827.png

Cliquez ici pour voir l'animation correspondante.

Et voici les quelques lignes de code à ajouter comme pour les posts précédents à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO gif animé-like  BB8 *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
width: 510px;
height: 218px;
background-position: -5875px 100%;
background-image: url("assets/sprite_B.png");
background-color:#aeb6bf;
background-size: auto;
background-repeat: no-repeat;
animation: play 1.5s steps(13) infinite;
display: inline block;
}
 
@keyframes play {
100% { background-position: 620px 275px; }
}

Quant au gif animé de BB8, il est téléchargeable ici. Reste ensuite à aller sur un site spécialisé gratuit comme celui-ci (mais il y en a bien d'autres), qui va en extraire une spritesheet.png (image png à fond transparent où sont alignées les unes à côté des autres toutes les frames qui constituent le gif). C'est cette spritesheet.png que j'ai renommée sprite_B.png et que j'utilise dans le code ci-dessus (il faut la copier-coller dans le dossier ~/.themes/Greybird/gtk-3.0/assets/ ).

Si par miracle un moustachu du code CSS passe par ici et peut me donner son avis, je serai ravi de profiter de ses lumières car, je l'avoue bien volontiers, je ne vois pas de solution à l'horizon pour l'instant.
J'ai également soumis mon problème ici sur le site Stackoverflow mais pour l'instant je n'ai pas eu de réponses...
Bonne soirée à tous !

edit: j'ai oublié de préciser qu'avec cette animation, la consommation CPU est peu élevée, autour de 4 ou 5 %.


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça fonctionne à nouveau !


edit du 13 août 2020 :
J'ai repris le code en l'allégeant et voici sa nouvelle version :

/************************
 * NEMO gif animé BB8 *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-image: url("assets/sprite_B.png");
  background-color:#aeb6bf;
  background-repeat: no-repeat;
  animation: moveX 0.8s steps(13) infinite;
}

@keyframes moveX {
  from { background-position: -6500px 100%; }
  to { background-position: 0px 100%; }
}

Par contre, je n'ai toujours pas trouvé le moyen de changer la taille de BB8 : je pense qu'il faut agir directement sur la taille du spriteshhet (spriteB.png) mais si quelqu'un a une autre idée, je suis preneur, merci par avance !


re-edit: je viens de tester et, effectivement, pour changer la taille de BB8, il faut modifier en conséquence celle du spritesheet. On peut faire cela sans problème avec GIMP.
Voici le spritesheet que j'ai utilisé pour un tel BB8 de petite taille (je l'ai appelé sprite4sec.png) et qui, cette fois, apparaît seul dans la fenêtre de Nemo (c'est minuscule sur ce forum mais l'image est bien là. Elle est bien plus grande "en vrai" dans la fenêtre de Nemo et ça fonctionne !) :
1597700451.png
et voici son lien direct au cas où.
Ses dimensions sont de 13000px x 208px
Et les lignes de code à utiliser sont celles-ci :

/************************
 * NEMO gif animé BB8 *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-image: url("assets/sprite4sec.png");
  background-color:#aeb6bf;
  background-repeat: no-repeat;
  animation: moveX 0.8s steps(13) infinite;
}

@keyframes moveX {
  from { background-position:   0px 100%; }
  to { background-position: -13000px 100%; }
}

Dernière modification par jlfh0816 (Le 03/09/2020, à 18:21)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#12 Le 12/04/2019, à 21:39

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Voilà, j'ai progressé et je suis parvenu à quelque chose de fluide, de fonctionnel et qui ne consomme pas trop de CPU (10%).

1559978890.png

Cliquez ici pour voir l'animation correspondante.

Le code CSS n'est pas du tout optimisé (pour ça, j'attends l'aide d'un moustachu bienveillant... s'il se reconnaît, qu'il n'hésite pas à intervenir !) mais il a le mérite de fonctionner. J'ai donc renoncé à l'utilisation de la valeur steps() de la propriété animation ainsi qu'à la spritesheet.... trop compliqué pour moi pour l'instant, je ne maîtrise pas. J'ai fait nettement plus basique ...

Pour ce nouvel essai, j'ai donc choisi le houlahop. J'en ai trouvé un gif animé fort sympathique sur Tumblr (avec Olia Lialina à l'honneur). Je me suis dit qu'admirer la plastique et la maîtrise d'Olia Lialina intéresseraient certains ... ! big_smile
Pour diminuer le poids du gif téléchargé, je l'ai transformé en animation APNG puis j'ai décomposé cette dernière en ses 10 frames. Ces deux étapes de transformations ont été effectuées en ligne sur ce site gratuit (mais il en existe bien d'autres). Une fois les 10 frames png récupérées, je les ai renommées frame1.png, frame2.png, frame3.png, etc ... jusqu'à frame10.png
Je les ai ensuite toutes placées dans un dossier nommé "frames" créé pour l'occasion et que j'ai finalement transféré dans ~/.themes/Greybird/gtk-3.0/assets/
Et comme pour les posts précédents, voici les lignes de code à ajouter à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO animation HoulaHop *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {

  width: 96px;
  height: 143px;
  background-color:  #d6eaf8 ;
  background-position: 80% 100%;
  background-repeat: no-repeat;
  animation: bg 0.8s linear infinite;
}

@keyframes bg {
  0% {
      background-image: url("assets/frames/frame1.png");
  }
  11% {
      background-image: url("assets/frames/frame2.png");
  }
  22% {
      background-image: url("assets/frames/frame3.png");
  }
  33% {
      background-image: url("assets/frames/frame4.png");
  }
  44% {
      background-image: url("assets/frames/frame5.png");
  }
  55% {
      background-image: url("assets/frames/frame6.png");
  }
  66% {
      background-image: url("assets/frames/frame7.png");
  }
  77% {
      background-image: url("assets/frames/frame8.png");
  }
  88% {
      background-image: url("assets/frames/frame9.png");
  }
  100% {
      background-image: url("assets/frames/frame10.png");
  }
}

Voilà, bonne soirée à tous !


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:10)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#13 Le 14/04/2019, à 18:33

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Pour revenir à des choses plus simples, j’ai essayé de passer en revue des choses plus basiques mais sans doute plus faciles à utiliser au quotidien, notamment la gestion de la couleur du fond de Nemo (toujours en utilisant le thème Greybird de base) :
- afficher une couleur unie «solide» de son choix;
- utiliser une couleur unie dont la transparence varie;
- jouer avec les dégradés de couleurs (dégradé linéaire ou radial);
- s’amuser à créer un décor simple.

1°) afficher une couleur unie :
On commence par choisir la couleur qu’on souhaite appliquer en fond de Nemo. Pour cela, on a besoin du code html de la couleur. Dans un premier temps, j’ai choisi d’utiliser le code hexadécimal mais on peut aussi exprimer la couleur désirée par son nom en anglais (yellow, white, etc.) ou par son code RGB. Le mieux est d’aller chercher le code sur l’un des nombreux sites spécialisés qui traitent de ce sujet, par exemple celui-ci, celui-là ou encore cet autre.
J’ai commencé par vouloir appliquer la couleur hexadécimale #d6eaf8 (c’est du bleu clair) ce qui donne ceci :

1559978948.png
et le lien direct.

Il suffit de copier-coller les lignes de code ci-dessous tout à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO fond bleu clair*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-color: #d6eaf8;
}

J’aurai pu aussi utiliser sans problème le code rgb de ce bleu clair. Pour cela, il me suffisait de remplacer  #d6eaf8 par rgb(214, 234, 248) ce qui donne la ligne de code

 background-color: rgb(214, 234, 248);

2°) utiliser une couleur unie dont la transparence varie :
L’avantage du code RGB ci-dessus, c’est qu’on peut faire également varier la transparence de la couleur en lui ajoutant un coefficient variant de 0.0 (transparence totale) à 1.0 (aucune transparence).
Par exemple, pour une transparence de 50%, on remplace

background-color: #d6eaf8;

par

background-color: rgba(214, 234, 248, 0.5);

Maintenant, si on souhaite obtenir un dégradé de la variation de transparence, par exemple aller de «pas de transparence» à gauche à «transparence totale» à droite, il faut procéder autrement et remplacer :

background-color: #d6eaf8;

par

background-image: linear-gradient(to right, rgba(214, 234, 248, 1), rgba(214, 234, 248, 0));

Et voici ce que ça donne :

1559979014.png
et le lien direct.


3°) jouer avec les dégradés de couleurs (dégradé linéaire ou radial):
Ensuite, j’ai voulu faire un test de dégradé de deux couleurs, du rose et du saumon. Voici ce que ça donne:

1559979075.png
avec le lien direct.

Il suffit de copier-coller les lignes de code ci-dessous tout à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO fond 2 couleurs en dégradé linéaire*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
    background: linear-gradient( #eecda3, #ef629f );
}

J’ai ensuite essayé avec plusieurs couleurs, ici quatre, et voilà ce que ça donne:
1559979128.png
et le lien direct.

Pour obtenir cet effet, il suffit de copier-coller les lignes de code ci-dessous tout à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO fond 4 couleurs en dégradé linéaire*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
    background-image: linear-gradient( to right, #d0d2ff, #ffd0d2,  #fffdd0, #d0fffd );
}

Sinon, j’ai vu dans différents tuto CSS sur le net qu’il existe aussi le dégradé radial. J’ai essayé et voici ce que ça donne, toujours en utilisant 4 couleurs:

1559979184.png
et le lien direct.
Pour obtenir cet effet, il suffit de copier-coller les lignes de code ci-dessous tout à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO fond 4 couleurs en dégradé radial*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-image: radial-gradient(circle at top left, #ffd0d2, #fffdd0, #d0fffd, #d0d2ff);
}

4°) s’amuser à créer un décor simple
Toujours en surfant sur les sites de CSS, j’ai vu que certains parvenaient à faire des décors en utilisant uniquement les fonds colorés. En voici deux exemples que j’ai trouvés sympathiques :

* un fond bicolore (source)
Ca donne ceci :

1559979243.png
avec le lien direct.
et les lignes de code à utiliser sont les suivantes :

/************************
 * NEMO fond bicolore*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
    height: 100vh;
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0;
    background: linear-gradient(to bottom right, #0087e0 50%, #004165 50%, #004165);
    background-size: auto 100%;
    background-repeat: no-repeat;
    background-position: left top;
}

* une décoration d’angle (source)
Cette fois, la décoration est nettement plus discrète, elle est dans le coin supérieur droit de Nemo :

1559979300.png
avec le lien direct.
et les lignes de code à utiliser sont les suivantes :

/************************
 * NEMO déco triangles*
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background: linear-gradient(-135deg, rgba(237, 165, 9, 1) 0%, rgba(237, 165, 9, 1) 5%, rgba(231, 229, 219, 1) 5%, rgba(231, 229, 219, 1) 10%, rgba(240, 239, 235, 1) 10%, rgba(240, 239, 235, 1) 100%);
}

Très bonne soirée à tous !

Dernière modification par jlfh0816 (Le 10/06/2019, à 21:51)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#14 Le 16/04/2019, à 21:00

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Pour continuer sur la lancée des fonds simples, je voulais revenir sur la possibilité d'afficher une photographie ou une image.
Mais pour que les icones et leur titre soient bien visibles, il faut que le fond soit très pastel. Du coup, il y a trois possibilités principales:
- soit trouver une image toute faite sur la toile, comme les vieux backgrounds de feu Nautilus 3 (si, si, on les trouve encore !  ... par exemple sur gnome-look.org );
- soit éclaircir ou flouter soi-même une image ou une photographie personnelle grâce à Gimp (beaucoup de tutoriels sur la toile);
- soit recourir aux propriétés de CSS, notamment en détournant la box-shadow de son usage habituel (en effet, les différents filtres comme blur, etc... ne fonctionnent malheureusement pas nativement sur les fenêtres GTK3).

1°) trouver des fonds tout faits
Voici ce que ça donne avec le fond Tux :

1559979364.png
et le lien direct.

On trouve encore bien d'autres fonds sur divers sites comme celui-ci ou celui-là.
Lorsque le fond est téléchargé (dans l'exemple ci-desus pour la capture et ci-dessous pour le code, je l'ai renommé Tux.png), il suffit de le placer dans le dossier ~/.themes/Greybird/gtk-3.0/assets/ puis de copier-coller les lignes de code ci-dessous à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO fond Tux *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
background-image: url("assets/Tux.png");
background-size: cover;
background-repeat: no-repeat;
}

Et c'est tout.

Voici un autre exemple avec le logo Ubuntu trouvé ici :

1559979413.png
et le lien direct.

2°) utiliser la box-shadow pour opacifier n'importe quelle image ou photo
Ici, j'ai voulu tester l'affichage du fond d'écran xfce-blue livré avec la distribution Xubuntu 18.04. Il se trouve à l'adresse /usr/share/backgrounds/xfce/xfce-blue.jpg
Mais sa couleur est trop "voyante", ça peut gêner la lisibilité des icones :

1559979460.png
et le lien direct.

J'ai donc essayé d'éclaircir cette image en détournant de son usage la box-shadow. Et le résultat me parait acceptable si on diminue fortement l'opacité (dans l'exemple ci-dessous, diminution de 80%) ce qui donne ceci :

1559979531.png
et le lien direct.

Pour parvenir à ce résultat, les lignes de code à saisir à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css sont les suivantes :

/************************
 * NEMO fond xfce bleu éclairci 80% *
************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
background-image: url("/usr/share/backgrounds/xfce/xfce-blue.jpg");
background-size: cover;
background-repeat: no-repeat;
box-shadow: 0px 0px 0px 0px rgba(255, 255, 255, 0.8) inset;
}

Voilà, bonne soirée à tous !

Dernière modification par jlfh0816 (Le 10/06/2019, à 21:53)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#15 Le 16/04/2019, à 21:28

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

@soujaa
J'ai bien essayé de rédiger quelque chose dans la doc/wiki Ubuntu au lien que tu m'as communiqué mais rien à faire, je n'y arrive pas. Il y a quelque chose chose que je dois mal faire et je ne vois pas quoi. Même avec le bac à sable je n'y arrive pas ... Du coup, je me suis permis de laisser un petit message de deux lignes au paragraphe 3.6 ("Autres") en demandant à l'un des administrateurs du site s'il veut bien me contacter pour m'expliquer ce que je fais mal... désolé.

Dernière modification par jlfh0816 (Le 16/04/2019, à 21:33)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#16 Le 21/04/2019, à 17:18

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour à tous,
J'ai essayé de voir si toutes les modifications des posts précédents fonctionnent avec d'autres thèmes que Greybird et la réponse est positive (j'ai essayé avec les thèmes Materia, Arc, Canta et Qogir).
Donc, ça c'est une bonne nouvelle.
Du moins, tant que ces thèmes utilisent des fichiers gtk.css ou gtk-contained accessibles, éditables et modifiables dans un éditeur de fichiers (chez moi, c'est gedit).
Par contre, lorsque les thèmes ont des fichiers gtk.css et/ou gtk-contained.css qui ne contiennent rien ou une simple adresse (des thèmes binarisés si j'ai bien compris ?), je n'ai rien pu faire ... par exemple sur ceux-ci :

Numix

@import url("resource:///org/numixproject/gtk/dist/gtk.css");

Adapta

@import url("resource:///org/adapta-project/gtk-3.20/gtk-contained.css");

ou même rien du tout comme Adwaita, la seule ligne contenue dans gtk.css étant celle-ci :

/* Adwaita is now part of GTK+ 3, this file is no longer used */

J'ai bien sûr cherché sur la toile s'il y avait des solutions de contournement et j'ai même trouvé plusieurs tutoriels sensés contourner l'obstacle mais non, ils ne fonctionnent pas ( ... ou plus ?). Voici l'un de ces tutoriels et un autre qui paraissaient séduisants à leur lecture mais nada, ça ne fonctionne pas du tout. Ou alors, je ne sais pas m'y prendre, ce qui est aussi fort possible.

Est-ce que quelqu'un aurait d'autres pistes ou saurait comment faire pour pourvoir modifier le CSS de ces thèmes en apparence "inaccessibles" ?
Un très grand merci par avance ! big_smile


PS: j'ai lu qu'il y aurait aussi la possibilité de télécharger les sources, de les modifier en fonction des modifications souhaitées puis de compiler mais je ne sais pas faire d'autant que les instructions laissées par exemple par les auteurs du thème Adwaita ( "How to tweak the theme" ) sous-entendent clairement que ce n'est pas à la portée du premier venu ...

Dernière modification par jlfh0816 (Le 10/06/2019, à 21:54)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#17 Le 23/04/2019, à 15:43

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour,
Pour changer un peu, j’ai essayé de voir s’il est possible de mettre une image ou un fond coloré uni dans le panneau latéral (dénommé «sidepanel» dans le fichier gtk-contained.css) de Nemo, toujours en utilisant le thème Greybird de base.
A priori, c’est possible mais, pour l’instant,  je n’y parviens que sur la partie inférieure du panneau, celle se trouvant en-dessous de l’arborescence des dossiers. En effet, dans la moitié supérieure du panneau, l’arborescence se superpose à l’image de fond du panneau (une vague bleue stylisée sur fond gris) et malheureusement chaque ligne de dossier apporte son propre petit bout de vague avec elle.
Ca ne voit pas sur la capture ci-dessous parce que, pour le fond gris de la vague bleue, j’ai volontairement choisi exactement le même gris que celui des lignes sur lesquelles sont écrits les noms des dossiers de l’arborescence.
Mais si vous faites des essais avec une autre image que cette vague bleue, vous verrez que c’est là qu’il y a un problème ...
Pas terrible donc mais je ne fais que découvrir tout cela et ça a quand même le (tout petit) mérite de donner l’illusion qu’il y a bien une image en fond de panneau. Voici ce que ça donne :

1559981079.png

et le lien direct au cas où …

Pour parvenir à mes fins, et comme depuis le post #1, voici les lignes de code à ajouter à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

/************************
 * NEMO sidepanel vague bleue *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
background-image: url("assets/Calm-Wallpaper-030.jpg");
background-size: cover;
background-repeat: no-repeat;
}

.nemo-window .sidebar,
.nemo-window .sidebar .view {
background-image: url("assets/lines7.jpg");
background-repeat: no-repeat;
background-position: 0% 100%;
background-attachment: scroll;
color: #000000;/* to change dark grey background color of sidebar*/
/* to change normal text color in sidebar */
}

.nemo-window .sidebar .view:selected {
background-image: url("assets/lines7.jpg");
color: #A52A2A;
/* to change selected text color in sidebar*/
}

.nemo-window .sidebar .view:hover {
background-color: #79BAE8;
background-image: url("assets/lines7.jpg");
color: shade(#3F3F3F , 1.4);
 /* to change the hover background color in sidebar*/
}

Je précise que l’illustration de panneau latéral (une vague bleue stylisée dénommée "lines7.jpg") provient de ce site. Je l’ai retravaillée sous Gimp et en m’aidant de Gpick afin que la couleur de fond soit exactement la même que celle du fond des lignes sur lesquelles sont inscrits les noms des dossiers, c’est à dire #DADFE5 et en la recoupant à 259px X 198px ce qui donne ceci :
1560008254.jpg

et le lien direct si besoin.

Par ailleurs, l’image qui sert de fond à Nemo ( appelée «Calm-Wallpaper-030.jpg») a été téléchargée ici.

Maintenant, j’aimerai beaucoup si quelqu’un pouvait m’expliquer comment faire en sorte que l’arborescence des dossiers adopte un fond totalement transparent de façon à ce que l’on ne voit plus que l’image de fond du panneau ?

Merci beaucoup par avance de votre aide, j’en ai bien besoin !


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:12)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#18 Le 24/04/2019, à 10:57

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour,

Pour continuer dans la personnalisation du panneau latéral, je me suis amusé à y afficher une animation, un papillon qui bat des ailes … et ça fonctionne.
Dans cet exemple, vous verrez que j’ai également affiché une seconde animation dans la fenêtre principale de Nemo. C’est la même animation que dans le panneau latéral, le papillon, mais j’aurai pu tout aussi bien choisir une animation différente, ma danseuse de houlahop par exemple (du post #12).
Voici ce que ça donne :

1559981331.png

Cliquez ici pour voir l'animation correspondante.

Le gif qui m’a servi de base de départ a été téléchargé sur ce site. Il a déjà un fond transparent. J’ai ensuite diminué sa taille à 62x62 pixels avant de le décomposer en ses 10 frames. J’ai ensuite créé un dossier «papillon» dans lequel j’ai placé les dix frames que j'ai renommées de frame1.png à frame10.png
Et le dossier "papillon" a été placé dans le dossier ~/.themes/Greybird/gtk-3.0/assets/

Pour que le battement des ailes du papillon reste réaliste une fois placé dans le panneau latéral de Nemo, j’ai relevé quelles sont les durées d’affichage de chaque frame. Cela va de 2000 ms pour la seule frame1 à 100 ms pour toutes les autres frames. Dans la boucle d’animation CSS qui dure 2,9 secondes, cela se traduit par un pourcentage de 0 à 80% pour la seule frame1 puis par une incrémentation de 2% de la frame2 jusqu'à la frame 9 et enfin par un pourcentage de 6% pour la frame10.
Par ailleurs, dans les lignes de code ci-dessous, afin que les deux papillons ne battent pas des ailes en même temps, j'ai appliqué une durée de boucle d'animation de 2,2 secondes pour le papillon de la fenêtre principale de Nemo et une autre de 2,9 secondes pour celui du panneau latéral.

Au final, voici les lignes de code à ajouter à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css :

************************
* NEMO animation Papillon *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-color:  #d6eaf8 ;
animation: bg 2.2s linear infinite;
background-repeat: no-repeat;
background-position: 85% 20%;
}

.nemo-window .sidebar,
.nemo-window .sidebar .view {
background-position: 85% 90%;
background-repeat: no-repeat;
animation: bg 2.9s linear infinite;
color: #000000;/* to change dark grey background color of sidebar*/
/* to change normal text color in sidebar */
}

.nemo-window .sidebar .view:selected {
color: #A52A2A;
/* to change selected text color in sidebar*/
}

.nemo-window .sidebar .view:hover {
background-color: #79BAE8;
color: shade(#3F3F3F , 1.4);
 /* to change the hover background color in sidebar*/
}

@keyframes bg {
 0% {
      background-image: url("assets/papillon/frame1.png");
  }
80% {
      background-image: url("assets/papillon/frame2.png");
  }
82% {
      background-image: url("assets/papillon/frame3.png");
  }
  84% {
      background-image: url("assets/papillon/frame4.png");
  }
  86% {
      background-image: url("assets/papillon/frame5.png");
  }
  88% {
      background-image: url("assets/papillon/frame6.png");
  }
  90% {
      background-image: url("assets/papillon/frame7.png");
  }
  92% {
      background-image: url("assets/papillon/frame8.png");
  }
 94% {
      background-image: url("assets/papillon/frame9.png");
  }
 100% {
      background-image: url("assets/papillon/frame10.png");
  }
}

Très belle journée à toutes et à tous ! smile




EDIT :
si vous utilisez Firefox et que vous n'arrivez pas à copier les lignes de code ci-dessus (le code s'efface et la fenêtre devient toute noire), voyez l'EDIT à la fin du post #19 ainsi que l'explication donnée par cqfd93 (post #21). Merci ! big_smile


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:12)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#19 Le 24/04/2019, à 17:53

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour,

Voilà, j’ai réussi à afficher l’animation papillon dans la barre de statut, tout en bas de la fenêtre de Nemo. Voici ce que ça donne (c'est en bas et à droite de la fenêtre) :

1559981421.png

Cliquez ici pour voir l'animation.

Oh, c’est seulement une coquetterie car ça ne sert strictement à rien … c’était juste pour le plaisir de savoir si c’était faisable ou non. Après, on n’est pas obligé de mettre une animation. On peut se contenter de mettre une couleur de son choix ou une image ou encore une photo. Il suffit juste d’adapter à souhait les lignes de code ci-dessous.

Pour info, les frames de l’animation ont été réduites à 42 x 42 px pour que le papillon tienne dans la barre de statut. Si vous souhaitez récupérer l’animation, voici son gif ca8w.gif et le lien direct.
Une fois téléchargé, il vous restera à décomposer ce gif en ses 10 frames. Celles-ci sont ensuite à renommer frame1.png etc... jusqu’à frame10.png puis elles sont toutes placées dans un dossier ~/.themes/Greybird/gtk-3.0/assets/papillon/ créé pour l’occasion.
Et ensuite, il ne reste qu’à copier-coller les lignes de code ci-dessous à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css

/************************
 * NEMO (papillon en bas) *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-image: url("/usr/share/backgrounds/xfce/xfce-blue.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.nemo-window,
.nemo-window statusbar {
  background-color:  none;
  animation: bg 2.9s linear infinite;
  background-repeat: no-repeat;
  background-position: 95% 20%;
}

@keyframes bg {
 0% {
      background-image: url("assets/papillon/frame1.png");
  }
80% {
      background-image: url("assets/papillon/frame2.png");
  }
82% {
      background-image: url("assets/papillon/frame3.png");
  }
  84% {
      background-image: url("assets/papillon/frame4.png");
  }
  86% {
      background-image: url("assets/papillon/frame5.png");
  }
  88% {
      background-image: url("assets/papillon/frame6.png");
  }
  90% {
      background-image: url("assets/papillon/frame7.png");
  }
  92% {
      background-image: url("assets/papillon/frame8.png");
  }
 94% {
      background-image: url("assets/papillon/frame9.png");
  }
 100% {
      background-image: url("assets/papillon/frame10.png");
  }
}

Très bonne soirée à toutes et à tous !



EDIT :
si vous utilisez Firefox, il se peut que vous rencontriez un bug au niveau de l'affichage de la fenêtre contenant les lignes de code (concerne les posts #18 et #19). En effet, lorsque vous voudrez surligner ces lignes, il est possible qu'elles disparaissent (la fenêtre devient vide et noire) et que vous ne puissiez alors pas les copier.
Grâce à l'intervention de cqfd93 (voir post #21 ci-dessous), il s'avère que c'est un bug affectant la nouvelle version 66 de Firefox. Pour contourner ce problème d'affichage, je vous invite à utiliser l'astuce communiquée par cqfd93 (voir dans son post #21).
Ou sinon, seconde solution de contournement, vous pouvez aussi surligner avec votre souris tout ce qu'il y a entre la ligne (cette ligne comprise) :
"Et ensuite, il ne reste qu’à copier-coller les lignes de code ci-dessous à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css"
et la dernière (cette ligne comprise) :
"Très bonne soirée à toutes et à tous !"

Ensuite vous collez tout cela dans n'importe quel éditeur de texte et vous suprimez la première et la dernière ligne.
C'est tout bon, il ne reste alors que les lignes de code, celles à copier-coller à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:13)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#20 Le 25/04/2019, à 10:58

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

@ question à un administateur ou un modérateur du site :
Je n'arrive pas à copier le code situé dans les posts #18 et #19 : dès que je clique dessus pour surligner ou même simplement dès que je touche à l'ascenseur à droite, tout le code disparait (fenêtre noire) ... pour ré-apparaître spontanément une vingtaine/trentaine de secondes plus tard. C'est d'autant plus bizarre que je n'ai aucun problème avec le code de tous les autres posts, y compris ceux qui ont un ascenseur.
Ai-je mal configuré quelque chose dans les balises de codage <> de ces deux posts ?
Merci beaucoup par avance de votre aide !  smile

Dernière modification par jlfh0816 (Le 25/04/2019, à 11:05)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#21 Le 25/04/2019, à 15:41

cqfd93

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour,

C'est un bug qui est apparu avec la version 66 de Firefox. J'ai un peu cherché sur le net mais je n'ai rien vu de semblable.

Si tu veux voir le code sans le copier et le coller dans ton éditeur de texte, tu peux ouvrir le lien Citer et prévisualiser, là le bug ne se manifeste pas.


cqfd93

Hors ligne

#22 Le 25/04/2019, à 16:15

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

cqfd93 a écrit :

Bonjour,

C'est un bug qui est apparu avec la version 66 de Firefox. J'ai un peu cherché sur le net mais je n'ai rien vu de semblable.

Merci beaucoup cqfd93 pour ta réponse claire et rapide.
Tu as raison, j'utilise effectivement la version 66 de Firefox. Du coup, j'en déduis que ceux qui utilisent une version antérieure ou un autre navigateur ne sont pas affectés par ce bug ?
Pour ma part, je me suis empressé de tester sur le seul autre navigateur que j'ai, Chromium (version 65), et je n'ai pas eu ce problème d'affichage. Je demanderai à des amis s'ils ont ce bug ou pas sur leurs machines sous W10.
En tout cas, problème résolu grâce à toi, encore merci !

Au passage, je me suis rendu compte d'un autre nouveau bug apparu avec la version 66 de Firefox : lorsque je clique sur l'une de mes mini-captures animées, j'arrive bien sur l'hébergeur mais là, surprise, le gif joue sa première boucle puis se fige sans explication ni message d'erreur. Là encore, c'est un bug d'affichage que je n'ai rencontré sur aucun autre des navigateurs que j'ai testés pour vérifier ce point précis. Sur mon lieu de travail, les PC sont sous W7 et utilisent Chrome ou IE ... et il n'y a aucun bug d'affichage ... roll
Faudrait pas que Firefox accumule trop de bugs dans ce style et surtout qu'il les corrige assez rapidement...

Encore merci cqfd93big_smile

Dernière modification par jlfh0816 (Le 28/04/2019, à 20:28)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#23 Le 25/04/2019, à 23:43

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonsoir,
Après de nombreux essais et tâtonnements, j’ai enfin réussi à afficher une image dans la barre des menus (la «Menubar» des anglophones), tout en haut de la fenêtre de Nemo. Pour l’occasion, je voulais avoir le logo de la distribution personnalisée que j’utilise avec bonheur depuis des lustres, Voyager. Voici ce que ça donne (c'est tout en haut et à droite de la fenêtre) :

1559981483.png

avec le lien direct si besoin.

Je reconnais bien volontiers que c’est minuscule mais c'est qu'il n’y a pas beaucoup de place disponible dans cette barre des menus... Du coup, j’en ai fait un agrandissement que voici :

1559981532.png

avec le lien direct si besoin.

Oh, c’est encore une coquetterie car bien sûr ça ne sert strictement à rien … mais ça m’a quand même permis de vérifier que c’était faisable. Vous pouvez bien entendu remplacer par l’image de votre choix, pas forcément le logo de votre distribution !

Pour info, le logo d’origine est celui de la 14.04 et j’ai dû le réduire à 87 x 20 pixels (avec Gimp bien sûr). Si vous souhaitez le télécharger à cette bonne taille, le voici tout prêt à l'emploi : 1560008036.png
Et le lien direct en cas de besoin.

Une fois téléchargé, il faut le renommer logo.png puis le placer dans le dossier ~/.themes/Greybird/gtk-3.0/assets/

Et ensuite, il ne reste qu’à copier-coller les lignes de code ci-dessous à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk-contained.css

/************************
 * NAUTILUS (logo VOYAGER) *
 ************************/
.nemo-window .nemo-window-pane notebook scrolledwindow.view, window.thunar notebook scrolledwindow.frame.standard-view,
.nautilus-window,
.nautilus-window notebook,
.nautilus-window notebook > stack {
  background-image: url("/usr/share/backgrounds/xfce/xfce-blue.jpg");
  background-size: cover;
  background-repeat: no-repeat;
}

.nemo-window menubar {
  background-image: url("assets/logo.png");
  background-repeat: no-repeat;
  background-position: 100% 50%;
}

Voilà, je vous souhaite une très bonne soirée à toutes et à tous !


edit du 13 juillet 2020 :
Je viens de tester la manip' sur la nouvelle Xubuntu 20.04 et ça continue de fonctionner mais il y a une petite modification à effectuer.
En effet, dans la nouvelle version du thème Greybird livrée avec Xubuntu 20.04, le fichier gtk-contained.css n'existe plus. Pour pallier à cela, il faut copier-coller les lignes de code ci-dessus directement à la fin du fichier ~/.themes/Greybird/gtk-3.0/gtk.css
Et ça re-fonctionne !

Dernière modification par jlfh0816 (Le 26/08/2020, à 11:13)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#24 Le 28/04/2019, à 18:03

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Pour varier un peu les plaisirs, j’ai essayé d’appliquer de la transparence à Nemo, toujours en utilisant le thème Greybird sur ma Xubuntu 18.04.2.
Dans un premier temps, j’ai confondu beaucoup de choses et notamment
1) la transparence de la fenêtre Nemo ( le «whole window» des anglophones)
2) la transparence du fond de la fenêtre Nemo (le «window background» des anglophones)
3) la transparence de la décoration de la fenêtre Nemo (son encadrement donc ou le «window’s title bar» des anglophones).

Alors, pour résumer, autant je suis parvenu à la transparence avec les items 1 et 3, autant je ne suis parvenu à rien de concret pour l’item 2, le background. J’ai bien trouvé des moyens simples et très efficaces de créer des fenêtres GTK avec des fonds totalement transparents (ici via un script python et et encore via nw.js) mais j’ai toujours été incapable d’appliquer cela à la fenêtre Nemo. Si quelqu’un sait comment faire, je lui serai très reconnaissant par avance de ses explications !

Voici donc les seules transparences que j'ai pu afficher :

1) la transparence de la totalité de la fenêtre Nemo
J’ai vu qu'il existe plusieurs façons d'y parvenir.
Celle que j’ai trouvée la plus rapide et simple, c’est d’utiliser Xfconf via son interface graphique :
Menu Whisker > tous les paramètres > autres > éditeur de paramètres > xfwm4 > zoom_desktop > décocher la case de la colonne «valeur», celle qui est la plus à droite (elle est cochée par défaut)
Fermer Menu Whisker.

Pour appliquer les modifications, il suffit d’appeler n’importe quelle fenêtre Nemo, le «dossier personnel» par exemple, puis d’amener le curseur de la souris tout en haut, sur la barre de titre (la «title bar»), d’appuyer sur la touche ALT et, en même temps, tourner la molette de la souris. Cela fait varier la transparence de toute la fenêtre Nemo.

Voici ce que ça donne :

1559981748.png et le lien direct.
sur cette capture, on voit que l’effet n’intéresse que la fenêtre sur laquelle on l'applique

Si on se contente de 10 ou 20% de transparence, c’est visuellement plutôt sympathique. Par contre, au delà comme sur la capture où c'est 50%, j’ai trouvé ça nul car la fenêtre devient vite inutilisable puisqu’on on voit de moins en moins les icones.

Cette transparence est réversible, il suffit de retourner cocher la case «valeur» de zoom_desktop dans l’interface graphique de Xfconf

Si on ne veut pas utiliser Xfconf et la souris, c’est possible mais il faut alors passer par des scripts comme ici (c’est tout en bas de la page) ou ou utiliser des petits logiciels sympathiques comme Devilspie

Dans les forums, j’ai également vu que par le passé on pouvait aussi utiliser Compiz. Mais, si j’ai compris, ça ne serait plus d’actualité ( ?? )


2) la transparence de la décoration (le cadre) de la fenêtre Nemo
Là, j’ai trouvé que c’est beaucoup plus facile car il suffit d’aller dans
Menu Whisker > tous les paramètres >  peaufinage des fenêtres >  onglet compositeur > activer le compositeur d’affichage  > régler le degré de transparence en déplaçant le curseur «opacité des décorations de fenêtres»
Fermer Menu Whisker.

Voici ce que ça donne pour 50% de transparence :

1559981880.png et le lien direct.
sur cette capture, on voit que l’effet intéresse sans distinction toutes les fenêtres, actives ou inactives


A noter que :
- l’effet «transparence de la décoration» de la fenêtre agit sur toutes les fenêtres ouvertes sur le bureau, donc pas uniquement sur celle de Nemo et ceci que les fenêtres soient actives ou inactives;
- à l’inverse, l’effet «transparence de la fenêtre totale» n’agit que sur la fenêtre sur laquelle on a appliqué de la transparence ;
- si on utilise les deux effets en même temps sur une même fenêtre, c’est possible mais c’est l’effet «transparence fenêtre totale» qui l’emporte.

Bon, j’avoue que j’aurai de loin préferé parvenir à la transparence du background de la fenêtre Nemo mais manifestement c’est hors de ma portée. C’est pourquoi je me permets de réitérer ma demande d’aide au cas où un informaticien saurait comment faire ou du moins saurait vers quelle direction aller ? Un grand merci d’avance ! smile

Dernière modification par jlfh0816 (Le 08/06/2019, à 09:00)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne

#25 Le 01/05/2019, à 16:29

jlfh0816

Re : image fond gestionnaire de fichiers (Nemo sur Xubuntu 18.04 et 20.04)

Bonjour,
Je poursuis toujours ma recherche d’un script ou d’une manip quelconque qui permettrait d’appliquer la transparence au seul background de la fenêtre Nemo … sans aucun succès jusqu’à présent ! Et comme je ne sais pas manipuler nw.js, mon objectif me paraît fort compromis…

Du coup, je me suis rabattu sur quelque chose qui me paraît moins inaccessible, la manipulation de la transparence de la fenêtre totale avec pour objectif de faire en sorte qu’une fenêtre active («focused window» des anglophones) soit toujours 100% opaque alors que les autres fenêtres éventuellement présentes sur le bureau deviennent automatiquement transparentes à, par exemple, 50%. En temps réel bien sûr. Tout cela en recourant et combinant xwininfo, xdotool, wmctrl ou encore xprop, petits logiciels très anciens et en principe fournis avec la distribution Xubuntu 18.04
Je suis parvenu à faire fonctionner séparément de petits bouts de scripts assez disparates sans toutefois être capable de les assembler pour en faire un script finalisé et pleinement fonctionnel.

Tout cela jusqu’à ce que je me rende compte que smurphos, un participant très actif et surtout très ingénieux du forum Linux Mint, vient justement de publier (c’est tout frais, mars 2019) un script parfaitement fonctionnel et qui fait exactement ce que je recherchais.
Le degré de transparence est paramétrable et ce script laisse opaques les fenêtres qui ne doivent jamais devenir transparentes comme les docks Cairo ou Plank, l’écran de connexion LightDM, le navigateur ou encore des fenêtres popup notifiant des messages. Et le type de fenêtres qu'on souhaite ne jamais rendre transparentes est lui aussi paramétrable.

Le script de smurphos ayant été réalisé pour le bureau Cinnamon de Linux Mint, je ne savais pas s’il allait fonctionner sur Xubuntu 18.04. J’ai essayé et la réponse est …  oui !
Voici ce que ça donne :

1559982075.png et le lien direct.

Cliquez ici pour voir l'animation correspondante : seule la fenêtre active est opaque et au premier plan alors que toutes les autres passent en arrière-plan et transparentes à 50%. Et comme le script agit en temps réel, un nouveau clic sur une fenêtre de l'arrière-plan fait devenir celle-ci la nouvelle et seule fenêtre opaque.

Et vous pouvez le vérifier par vous-même en téléchargeant le script sur la plateforme GitHub à cette adresse. On peut par ailleurs joindre l’auteur sur le forum Linux Mint, à cette autre adresse.

Pour une utilisation pratique et automatique de ce script, je l’ai inclus dans la liste des programmes à lancer automatiquement au démarrage de chaque session.

Ceci dit, sur le forum de Mint, l’auteur propose également un petit script accessoire pour réaliser un lanceur au cas où on préfère lancer le script principal à la demande et non automatiquement.

Bon, reste toujours à trouver le moyen d’appliquer de la transparence au seul background de la fenêtre de Nemo mais là, rien à l’horizon, mais alors vraiment rien… (peut-être qu’en allumant un cierge à Saint-Linux … ?)

Très bonne soirée !


EDIT:
j'allais oublier : dans le cas où l'on place le script dans la liste des programmes à lancer automatiquement au démarrage du PC, il faut, pour que le script fonctionne, redémarrer l'ordinateur, une simple déconnexion/reconnexion de session ne suffit pas (du moins, c'est ce dont je me suis rendu compte sur ma machine). Ceci seulement pour la toute première fois après qu'on a installé le script. Pour les sessions suivantes, aucun souci.

Dernière modification par jlfh0816 (Le 08/06/2019, à 10:25)


Xubuntu - Voyager 18.04 et 22.04

Hors ligne