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 07/05/2019, à 11:57

iro

[CSS] background qui prend toute la taille de l'écran

Bonjour,

je développe un thème en CSS, je souhaite modifier la largeur d'un background pour qu'il prenne celle de l'écran.
J'ai essayé plusieurs trucs qui n’ont pas fonctionner.

Le seul truc qui marche, c'est width: 5200px; (j'ai pris une valeur élevée pour que ça corresponde à un maximum d'écran).

Que pensez-vous ce cette valeur ? Est-ce la bonne méthode, avez-vous des suggestions ou une meilleure idée à me proposer ?

Merci.


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#2 Le 07/05/2019, à 13:12

kevlar

Re : [CSS] background qui prend toute la taille de l'écran

Bonjour.
J'utilise du CSS, mais au niveau des fenêtres d'applications, donc je tranpose pour l'écran dans ton cas. Je me dis que, si je comprends bien le fonctionnement des CSS, ta demande porte sur un élément "screen" et non pas un "Window". Ensuite, un background peut-être beaucoup de "choses" en CSS : une couleur unie, une dégradé, une image ...
Et le problème n'est alors pas le même. Une couleur unie, un dégradé n'ont pas à être re-dimensionnés.
Je présume que tu as jeté un œil sur les exemples du W3C ?

Bon courage.

Hors ligne

#3 Le 07/05/2019, à 13:20

iro

Re : [CSS] background qui prend toute la taille de l'écran

Bonjour kevlar,

pour le fond, j'utilise une couleur unie et transparente (rgba).
Le fond que je veux modifier, c'est une extension météo. D'origine, elle me prend au max 5/6 eme de mon écran (en fonction des paramètres).


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#4 Le 07/05/2019, à 13:39

bruno

Re : [CSS] background qui prend toute la taille de l'écran

Hors ligne

#5 Le 07/05/2019, à 13:46

iro

Re : [CSS] background qui prend toute la taille de l'écran

@bruno:

l'option proposé ne marche pas chez moi, le fond reste d'origine.
cover n'a pas de couleur syntaxique.


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#6 Le 07/05/2019, à 13:52

bruno

Re : [CSS] background qui prend toute la taille de l'écran

C'est parfaitement pris en charge par les différents navigateurs : https://caniuse.com/#search=background-size

Hors ligne

#7 Le 07/05/2019, à 14:00

iro

Re : [CSS] background qui prend toute la taille de l'écran

Oui,

mais là, il s'agit d'un thème pour DE


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#8 Le 07/05/2019, à 16:21

kevlar

Re : [CSS] background qui prend toute la taille de l'écran

Je ne peux faire que quelques remarques (en supposant que tu utilises le toolkit Gtk) :
1- le CSS dispo sous Gtk3 est un sous-ensemble de celui du W3c.
2- selon la version de Gtk, selon le thème en service sur ta machines, des choses vont marcher ou pas. J'ai bien noté que tu développes TON thème, mais peut-être que tu fais tes essais sous un AUTRE thème. Je peux de confirmer que par exemple, dans mon cas, des choses qui ne marchent pas sous 14.04 vont fonctionner sous Manjaro..
Je rappelle le lien vers ceci : Gtk3 CSS
3- peux-tu faire une "maquette" sous Inkscape, par exemple, de l'effet que tu souhaites obtenir ?  Parce qu'il me semble que si tu veux modifier uen extension météo, çà doit correspondre à un "popover" ou une "bulle d'aide" ? Sinon, ce serait l'extension météo qui prendrait tout le fond d'écran en lieu et place du fond d'écran normal ?

Hors ligne

#9 Le 08/05/2019, à 10:49

iro

Re : [CSS] background qui prend toute la taille de l'écran

Bonjour kevlar,

je garde ton lien sous le coude, ça peut servir smile.
Si j'ai bien compris 3-, j'ai utilisé Inkscape pour faire une image de fond mais le problème persiste.

je crois que je vais rester sur mon idée width: 1950px; (je sais j'ai réduit  depuis le premier post tongue) si ça ne créer pas de problèmes.
Que pense-tu de la solution ?


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#10 Le 08/05/2019, à 16:43

kevlar

Re : [CSS] background qui prend toute la taille de l'écran

Bonsoir.
Je voudrais préciser : lorsque je parle de maquette, je fais référence à ce que tu veux obtenir au final; Peux-tu poster une image de ce que tu souhaites ?
En gros ;
1- tu fais une copie d'écran de ton bureau
2- tu la retravailles sous Inkscape ou Gimp en y ajoutant ou modifiant ton "objet" météo.
3- et tu le postes, STP, çà sera plus facile avec cette maquette.
En effet, pour le moment, on ne sait toujours pas sous quel système tu es, sous quel bureau, quel toolkit, etc.

Au cas où; je suis passé hier par hasard sur un site présentant un projet Kde-Plasma dans lequel le fond d'écran changeait en fonction de la charge de la batterie.
fonds écran batterie

Hors ligne

#11 Le 08/05/2019, à 20:05

iro

Re : [CSS] background qui prend toute la taille de l'écran

Bonsoir,

il faut me tirer les vers du nez lol
Le DE en question est Cinnamon 4 avec gtk.

Origine
Origine

Souhaité
Souhaité

La deuxième image est réalisée avec width: .... On voit bien que celle-ci prend tout mon écran (1366x768).


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#12 Le 09/05/2019, à 10:23

kevlar

Re : [CSS] background qui prend toute la taille de l'écran

Bonjour, c'est plus clair comme çà ... mais il manque encore une info : s'agit-il d'un Popover ? Je n'utilise pas Cinamon, mais d'après la copie décran du fonctionnement "réel", il me semble que le fond d'écran d"origine est toujours là ...et que donc c'est une bulle ou un popover qui se superpose ?
Et puisque c'est un thème, peut-on avoir un extrait de la partie concernée ?
Merci d'avance.
PS : si par hasard le popover est construit sur une GtkGrid,(qui doit servir à aligner les éléments graphiques, comme les nuages, et les textes)  probablement le pronlème a-t-il à voir avec les propriétés Hexpand/Vexpand ...

Hors ligne

#13 Le 09/05/2019, à 10:40

kevlar

Re : [CSS] background qui prend toute la taille de l'écran

Pour compléter. J'ai mis ci-dessous un exemple de fenêtre développée avec un GtkGrid (la vignette est cliquable). La fenêtre a une taille par défaut de 900 pixels de large ; or, mon écran fait 1280 pix de large, et tu constateras que la fenêtre a bien pris TOUT l'écran, parce que chacun des éléments contenus dans la GtkGrid (les pavés) ont priorité et "forcent" la fenêtre à s'élargir.
Dans mon cas, il s'agit d'une fenêtre de boîte de dialogue, mais je ne vois pas ce que cela changerait pour un popover ou une bulle d'aide.
mini_190509113045920910.png
Autre piste : voir les paramètres CSS pour les marges entre les bords des "grids", les bords des objets "dans" la Grid et l'espace entre la grid et la fenêtre qui contient cette famesue "grid".
Une dernière chose : si je comprends bien ce n'est pas toi qui programme l'affichage météo, ce que tu cherches à faire, c'est modifier le thème global de Cinamon afin que cet affichage prenne toute la largeur de l'écran ?
Bon courage.

Hors ligne

#14 Le 09/05/2019, à 10:53

kevlar

Re : [CSS] background qui prend toute la taille de l'écran

Et voici la documentation Gtk3 concernant les "popover", la partie consacrée aux CSS fait référence à la proprité Background :
GtkPopover
J'imagine que si tu augmentes la taille du texte par défaut dans l'élément qui porte l'affichage de la météo, du devrais voir la taille de l'affichage chanfer également, ce qui serait une bonne piste pour avancer ...
En résumé : il faut identifier l'élément qui "porte" cette météo, puis aller fouiner sur le support Gtk pour dététerminer les styles CSS mis en oeuvre.

Hors ligne

#15 Le 09/05/2019, à 11:26

iro

Re : [CSS] background qui prend toute la taille de l'écran

Bonjour,

si je comprends bien ce n'est pas toi qui programme l'affichage météo, ce que tu cherches à faire, c'est modifier le thème global de Cinamon afin que cet affichage prenne toute la largeur de l'écran ?

c'est ça.

J'imagine que si tu augmentes la taille du texte par défaut dans l'élément qui porte l'affichage de la météo, du devrais voir la taille de l'affichage chanfer également, ce qui serait une bonne piste pour avancer ...

le texte n'est plus complet mais ça modifie bien la largeur.


Pour Popover, je ne pense pas car la recherche de ce mot ne figure ni dans le thème Cinnamon ni dans l'applet météo.


Code javascript de l'applet (passage qui me semble utile):

...
// stylesheet.css
const STYLE_LOCATION_LINK = 'weather-current-location-link'
const STYLE_SUMMARYBOX = 'weather-current-summarybox'
const STYLE_SUMMARY = 'weather-current-summary'
const STYLE_DATABOX = 'weather-current-databox'
const STYLE_ICON = 'weather-current-icon'
const STYLE_ICONBOX = 'weather-current-iconbox'
const STYLE_DATABOX_CAPTIONS = 'weather-current-databox-captions'
const STYLE_ASTRONOMY = 'weather-current-astronomy'
const STYLE_FORECAST_ICON = 'weather-forecast-icon'
const STYLE_FORECAST_DATABOX = 'weather-forecast-databox'
const STYLE_FORECAST_DAY = 'weather-forecast-day'
const STYLE_CONFIG = 'weather-config'
const STYLE_DATABOX_VALUES = 'weather-current-databox-values'
const STYLE_FORECAST_SUMMARY = 'weather-forecast-summary'
const STYLE_FORECAST_TEMPERATURE = 'weather-forecast-temperature'
const STYLE_FORECAST_BOX = 'weather-forecast-box'
const STYLE_PANEL_BUTTON = 'panel-button'
const STYLE_POPUP_SEPARATOR_MENU_ITEM = 'popup-separator-menu-item'
const STYLE_CURRENT = 'current'
const STYLE_FORECAST = 'forecast'
const STYLE_WEATHER_MENU = 'weather-menu'

...

      // PopupMenu
      this.menuManager = new PopupMenu.PopupMenuManager(this)
      this.menu = new Applet.AppletPopupMenu(this, orientation)
      if (typeof this.menu.setCustomStyleClass === "function")
          this.menu.setCustomStyleClass(STYLE_WEATHER_MENU);
      else
          this.menu.actor.add_style_class_name(STYLE_WEATHER_MENU);
      this.menuManager.addMenu(this.menu)

...

      // for Cinnamon 1.x, build a menu item
      if (majorVersion < 2) {
        let itemLabel = _("Settings")
        let settingsMenuItem = new Applet.MenuItem(itemLabel, Gtk.STOCK_EDIT, Lang.bind(this, function() {
            Util.spawnCommandLine(CMD_SETTINGS)
        }))
        this._applet_context_menu.addMenuItem(settingsMenuItem)
      }

      //------------------------------
      // render graphics container
      //------------------------------

      // build menu
      let mainBox = new St.BoxLayout({ vertical: true })
      this.menu.addActor(mainBox)

      //  today's forecast
      this._currentWeather = new St.Bin({ style_class: STYLE_CURRENT })
      mainBox.add_actor(this._currentWeather)

      //  horizontal rule
      this._separatorArea = new St.DrawingArea({ style_class: STYLE_POPUP_SEPARATOR_MENU_ITEM })
      this._separatorArea.width = 200
      this._separatorArea.connect(SIGNAL_REPAINT, Lang.bind(this, this._onSeparatorAreaRepaint))
      mainBox.add_actor(this._separatorArea)

      //  tomorrow's forecast
      this._futureWeather = new St.Bin({ style_class: STYLE_FORECAST })
      mainBox.add_actor(this._futureWeather)

      this.rebuild()
...

le CSS de l'applet

/* taken from gnome-shell.css, .dash-search-button */
.weather-current-location-link:selected,
.weather-current-location-link:hover {
    background-gradient-direction: vertical;
    background-gradient-start: rgba(255, 255, 255, 0.4);
    background-gradient-end: rgba(255, 255, 255, 0.2);
}

.weather-current-summarybox {
    padding-top: 15px;
}

.weather-current-summary {
    font-size: 35px;
}

.weather-current-databox {
    padding-top: 15px;
    padding-left: 30px;
}

.weather-current-icon {
    padding: 0 30px;
}

.weather-current-iconbox {
    padding: 10px;
}

.weather-icon {
    padding-right: 5px;
}

.weather-icon-rtl {
    padding-left: 5px;
}

.weather-current-databox-captions {
    text-align: right;
    padding-right: 5px;
    color: #999999;
}

.weather-current-astronomy {
    color: #AAAAAA;
}

.weather-forecast-icon {
  padding: 0 15px 0 30px;
}

.weather-forecast-databox {
  padding: 0 30px 0 0;
}

.weather-forecast-day {
  color: #999999;
  font-size: 90%;
}

.weather-config {
  padding-right: 10px;
}

le code que j'ai rajouter dans le thème:

.weather-menu {
    width: 1950px;
}

.weather-current-location-link {
    text-decoration: underline;
}

.weather-current-location-link:hover {
    background-gradient-direction: vertical;
    background-gradient-start: rgba(0, 0, 0, 0);
    background-gradient-end: rgba(0, 0, 0, 0);
    text-decoration: none;
    color: #5a65bd;
}

.weather-current-databox-captions {
    padding-left: 48px;
}

.weather-current-astronomy {
    font-size: 10pt;
}

.weather-forecast-day {
    font-size: 10pt;
    color: #5294e2;
}

Dernière modification par iro (Le 09/05/2019, à 11:46)


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#16 Le 09/05/2019, à 13:30

kevlar

Re : [CSS] background qui prend toute la taille de l'écran

Impec' !
Je te conseille de voir ici : largeur CSS
De jouer avec des valeurs en %. Par exemple 150%, 200%.
Ou bien de modifier ta propirté (si c'est accepté) comme suit :

de witdh=1950 px
à min-width=1950 px ou plus pour voir ce qui change.

Jouer également avec les valeurs de "padding".
Comme je ne connais pas Cinamon, je présume qu'ils ont fait comme ElementaryOS, et ont dû créer des Widgets Gtk non standards ?
Il faudrait voir la documentation de Cinamon.

Enfin, j'ai vue que dans le CSS, on peut accéder à la taille du "screen" (le "viewport"), mais via des variables. Existent-elles dans les thèmes, je ne sais ... Ce serait bien, car il suffirait de dupliquer la taille de l'écran dans la taille du widget météo.

Dernière modification par kevlar (Le 09/05/2019, à 13:30)

Hors ligne

#17 Le 09/05/2019, à 13:57

iro

Re : [CSS] background qui prend toute la taille de l'écran

J'avais déjà testé les valeurs min/max-width et les % (padding et width): le résultat et le même que la capture Origine.

Voici une capture avec cette valeur (min-width: 1950px):
min-width


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne

#18 Le 12/05/2019, à 16:09

iro

Re : [CSS] background qui prend toute la taille de l'écran

Bonjour,

rien à faire je n'y arrive pas.
@kevlar: Peut-tu répondre à ma question concernant la valeur que j'ai mise, est-elle acceptable ?

Normalement, les écrans de 1950px ou moins auront l'applet sur toute la largeur, comme l'image Souhaité  avec des 'bandes noires' plus ou moins importantes (comme à droite de l'image #17) et les écrans de plus de 1950px, n'auront pas l'applet sur toute la largeur (comme l'image Origine.


Aime la vie et vis la vie que tu aimes.
Boinc pour aider la science.

Hors ligne