Contenu | Rechercher | Menus

Annonce

T-shirt Disco Dingo : Série limitée

Ubuntu 19.04
T-shirt Ubuntu-FR « Disco Dingo » en série limitée !
Prix spécial pré-vente (15€) jusqu'au 21 avril 2019.

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 en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 était redevenu possible d’afficher une image ou une photo en tant que fond de son gestionnaire de fichiers, 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 Nemo comme gestionnaire de fichiers …. et ça fonctionne très bien comme vous pouvez le constater ci-dessous :

fenêtre active:
view-img-mini_2019-03-22-18f227938greybirdalap.png

fenêtre inactive:
view-img-mini_2019-03-22-14f730498greybirdalap.png

Je vous décris comment j'ai procédé, c’est très rapide.
Comme je suis le seul utilisateur de ma machine, j’ai choisi de modifier le thème GreyBird directement dans /usr/share/themes/GreyBird donc forcément avec les droits d’administrateur.
Mais bien entendu, si vous êtes plusieurs à utiliser le PC ou si vous ne voulez pas prendre le risque de toucher au système de fichiers, il vous suffit de faire une copie de /usr/share/themes/GreyBird dans votre dossier personnel ~/.themes (s'il n'existe pas, il faut le créer) de façon à ce que vos essais et modifications n’affectent que votre session. Dans ce dernier cas, tous les essais que je vous propose dans les posts suivants se feront alors avec le dossier ~/.themes/Greybird

Dans mon cas, j’ai donc placé la photo plage.jpg que je souhaitais avoir en fond de Nemo dans le dossier usr/share/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 usr/share/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 ?

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 16/04/2019, à 21:21)


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

soujaa

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.04)

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 usr/share/themes/GreyBird/gtk-3.0/assets/
L'animation donne ceci :

view-img-mini_2019-03-24-1879fa45cnemofondanim.gif

Et voici les lignes de code que j'ai placées à la fin du fichier usr/share/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,
.nemo-window,
.nemo-window notebook,
.nemo-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.

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 (cliquez sur le gif ci-dessous pour le voir dans un format un peu plus grand):

view-img-mini_2019-04-04-19ee1dc51neige.gif

Et voici les quelques lignes de code qui permettent d'arriver à ce résultat (à placer à la fin du fichier usr/share/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 !)

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 (cliquez sur le gif pour le voir dans un format un peu plus grand) :

view-img-mini_2019-03-31-108fd0529nuages.gif

Et voici les quelques lignes de code à ajouter comme précédemment à la fin du fichier usr/share/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 usr/share/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.

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

soujaa

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 :

view-img-mini_2019-04-04-1789a6ba0nuagesvrais.gif

Et voici les quelques lignes de code à ajouter comme précédemment à la fin du fichier usr/share/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 usr/share/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.

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 :

view-img-mini_2019-04-07-121a473a1parallaxe.gif

Et voici les quelques lignes de code à ajouter comme pour les posts précédents à la fin du fichier usr/share/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 usr/share/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.

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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. Voici ce que ça donne :

view-img-mini_2019-04-09-189986634bb8.gif

Et voici le lien direct au cas où ...

Et voici les quelques lignes de code à ajouter comme pour les posts précédents à la fin du fichier usr/share/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 usr/share/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 %.

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

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

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

view-img-mini_2019-04-12-1c5670934houlahop.gif

et le lien direct au cas où ...

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 usr/share/themes/GreyBird/gtk-3.0/assets/

Et comme pour les posts précédents, voici les lignes de code à ajouter à la fin du fichier usr/share/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 !

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


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 :

view-img-mini_2019-04-14-13479a1f4fondbleuclai.png
et le lien direct.

Il suffit de copier-coller les lignes de code ci-dessous tout à la fin du fichier /usr/share/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 :

view-img-mini_2019-04-14-15d7dc122fonddegradet.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:

view-img-mini_2019-04-14-160b4ca01fonddegrade2.png
avec le lien direct.

Il suffit de copier-coller les lignes de code ci-dessous tout à la fin du fichier /usr/share/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:
view-img-mini_2019-04-14-1de64fc82fonddegrade4.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 /usr/share/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:

view-img-mini_2019-04-14-171ed048ffonddegrader.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 /usr/share/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 :

view-img-mini_2019-04-14-1c902e61ffonddecor2co.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 :

view-img-mini_2019-04-14-1916d08f7fonddecor2tr.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 14/04/2019, à 18:46)


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 (on les trouve encore, par exemple sur gnome-look.org !);
- soit opacifier 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 :

view-img-mini_2019-04-16-12277b2a6fondtux.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 usr/share/themes/GreyBird/gtk-3.0/assets/ puis de copier-coller les lignes de code ci-dessous à la fin du fichier usr/share/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 :

view-img-mini_2019-04-16-1187ea604fondlogoubun.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 gêne la lisibilité des icones :

view-img-mini_2019-04-16-1c524a6c4fondxfcebleu.png
et le lien direct.

J'ai donc essayé d'opacifier 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 :

view-img-mini_2019-04-16-1a13582d2fondxfceopac.png
et le lien direct.

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

/************************
 * NEMO fond xfce bleu opacifié 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 16/04/2019, à 21:11)


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne

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

jlfh0816

Re : image en fond de gestionnaire de fichiers (Nemo sur Xubuntu 18.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 21/04/2019, à 17:22)


Xubuntu - Voyager 14.04.5 LTS (64 bits) et Xubuntu - Voyager 16.04.3 LTS (64 bits) et  Xubuntu - Voyager 18.04.2 LTS (64 bits)
Un tuto Xubuntu à utiliser sans modération : https://dolys.fr/forums/topic/tuto-mon- … variantes/

Hors ligne