Centrer un widget au survol dans un design

piwy · Novembre 28, 2023, 3:31

Bonjour à tous, petite question par rapport à mon design, j’ai mis en place un widget de survol ou de clic , ca sera clic dans mon cas comme le designe est destiné à etre sur une tablette.

le soucis est que le widget est en bord de page et de ce fait le virtuel affiché lors du clic est tronqué.

J’aimerais qu’il soit affiché au millieux de l’ecran.

En cherchant sur le forum la seule façon dont certain on réussi a « bidouiller » ce truc , c’est en jouant avec du css, mais comme je ny connais rien en css , c’est compliqué!

Du coup 2 questions :

Que mettre en css?
Ou mettre le css?

Allez une petite 3e :

Est il possible de securiser l’affichage d’un widget de survol , avec par exemple l’affichage d’un digicode avant ??

Merci pour vos reponses

Je vous met un visuel au cas où je ne suis pas assez clair

xav31190 · Novembre 28, 2023, 5:47

bnsoir,
il te faut passer avec des css dans reglages–> systeme–> personalisation avancée puis modifier custom.css.
je te donne le mien pour ex :


/* CSS fond design tablette */
[data-page="plan"] .div_displayObject {
  background: #E7EEF7 !important;
  font-family: system-ui !important;
}

/* texte et icones */
.mia-inactif {
  color: rgba(167, 172, 177, 1);
}

.mia-jaune {
  color: rgba(214, 158, 46, 1);
}

.mia-vert {
  color: rgba(72, 187, 120, 1);
}

.mia-rouge{
  color: rgba(255, 82, 82, 1); 
}

/* cadres */
[data-page="plan"] .mia-cadre{
  width: 100%;
  height: 100%;
  background: transparent;
  border-radius: 32px; 
  box-shadow: 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
    -5px -5px 10px 5px rgba(255,255,255, 0.8);
 }

[data-page="plan"] .mia-cadre-inset{
  width: 100%;
  height: 100%;
  background: transparent; 
  border-radius: 32px;
  box-shadow: inset 5px 5px 10px 5px rgba(136, 165, 191, 0.5),
    inset -5px -5px 10px 5px rgba(255,255,255, 0.8);
}

/* Label et sous label d’un cadre */
[data-page="plan"] .mia-cadre-label {
  padding-top: 5px;
  text-align: center;
  font-size: 17px;
  font-weight: bolder;
  line-height: 17px;
}

[data-page="plan"] .mia-cadre-sous-label {
  font-size: 16px;
  font-weight: lighter;
  line-height: 16px;
}

/* Css sur equipements*/

/* css supression titre cadre */
[data-page="plan"] .eqLogic-widget[data-eqlogic_id="530"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="531"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="532"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="529"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="528"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="533"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="269"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="737"] .widget-name
{
  display:none;
}

[data-page="plan"] .eqLogic-widget[data-eqlogic_id="532"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="529"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="530"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="531"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="528"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="533"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="269"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="737"]
{
border-radius: 28px !important;
background: #E7EEF7 !important;
box-shadow:inset 9px 9px 18px #bdc3cb,
            inset -9px -9px 18px #ffffff !important;
}

/* widjet survol volets */

[data-page="plan"] .eqLogic-widget[data-eqlogic_id="64"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="63"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="113"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="115"] .widget-name,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="17"],[data-page="plan"] .eqLogic-widget[data-eqlogic_id="20"]
{
background: #E7EEF7 !important;
box-shadow:inset 8px 8px 16px #bdc3cb;
}
[data-page="plan"] .eqLogic-widget[data-eqlogic_id="64"] .widget-name a,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="63"] .widget-name a,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="113"] .widget-name a,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="115"] .widget-name a,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="17"] .widget-name a,[data-page="plan"] .eqLogic-widget[data-eqlogic_id="20"] .widget-name a
{ background-image: linear-gradient(111deg, #D7D2D5 40%,#6E6E6E 74%) !important;
   font-family: ui-serif;
}

après il suffit de récupérr les id de tes design plan dans l’url :xxx.xxx.xxx/index.php?v=d&p=plan&plan_id=16

et les id de tes equipements pour adapter. Code je sais pas si c’est posiible dans la config du design

piwy · Novembre 29, 2023, 6:51

Ok merci pour la reponse je vais tester ca en rentrant

piwy · Novembre 29, 2023, 3:42

Petite question encore a quoi correspond le .mia ??

.mia-rouge{
color: rgba(255, 82, 82, 1);
}

Phpvarious · Novembre 29, 2023, 6:01

Bonsoir,

Je pense que @xav31190 répondait surtout a la question

Je doute que le contenu dont tu as besoin soit le même que son exemple…

xav31190 · Novembre 29, 2023, 8:11

mia c’est un nom de classe comme un autre.

Si, il suffit d’adapter le css ( couleur, font…), en fonction de ce que tu as besoin, le principe est le même. je fais aussi du survol dans mes design

code des couleurs vives modernes ici :
Tableau de Couleur Design Plat — Codes Couleur HTML (htmlcolorcodes.com)
ça top pour construire ton css , bordure …
Neumorphism/Soft UI CSS shadow generator

Phpvarious · Novembre 29, 2023, 8:19

Moi j’ai bien compris , mais le but est :

donc, je doute que dans ton css custom tu es la réponse

xav31190 · Novembre 29, 2023, 8:38

J’avais oimis ce detail
normalement tu choisis lors du survol, en haut / bas… , faudrait peut être essayer les autres options.
Je sais pas si c’est possible mais il fixe peut etre les coordonnées dans le css ou autre.

noodom · Novembre 29, 2023, 8:39

Salut,

En effet, le conseil de mettre le css dans custom.css est judicieux. Par contre, le contenu de l’exemple (couleurs, fonts) ne permettra visiblement pas de recentrer des éléments, qui est la demande initiale il est d’ailleurs important de le préciser pour @piwy qui précise ne rien connaître au css.

Comme répondu plus haut, .mia ne correspond à rien en soi (.mia-rouge, .mia-jaune,… peuvent être utilisés par contre mais pourrait avoir n’importe quel autre nom ). Le code précise un ensemble de classes css (le nom n’a pas d’importance , elle doivent juste correspondre à la classe déclarée pour les éléments de la page)

xav31190 · Novembre 29, 2023, 8:49

Me semble que je me suis inspiré de toi, si mes souvenirs sont bons

dsigmoun · Novembre 29, 2023, 8:53

Voici ce que j’utilise pour positionner un widget au survol Il faut jouer avec les left, top

.zoneEqLogicOnClic > [data-eqlogic_id="446"] > .widget-name { display: none; }
.zoneEqLogicOnClic > [data-eqlogic_id="446"] { left:-400px; top :-50px; height: 180px !important; width: 270px !important; font-family:Unica One;font-weight:normal;

noodom · Novembre 29, 2023, 8:57

Et tu as eu bien raison, si ça a pu faire avancer ton Jeedom. J’en ai codé des bêtises

Tant que ce n’est pas repris pour être revendu sur mon dos (et dans mon dos bien sûr) comme j’ai hélas pu le constater

Phpvarious · Novembre 29, 2023, 9:05

Aller je me lance :

Maintenant que tu as trouvé l’endroit où intègrer le custom css, ajoute ceci dedans :

[data-page="plan"] .zoneEqLogicOnClic .eqLogic.eqLogic-widget[data-eqlogic_id="709"] {
  top: 50px!important;
  right: 500px !important;
}

Je décompose pour commenter:

[data-page="plan"] .zoneEqLogicOnClic .eqLogic.eqLogic-widget[data-eqlogic_id="1134"] {

ceci permet de cibler l’élément d’un design ([data-page="plan"]) dont l’élément est de type widget au survol (.zoneEqLogicOnClic) et dont l’id de l’équipement est 1134 (.eqLogic.eqLogic-widget[data-eqlogic_id="1134"])

il te faudra bien sûr remplacer "1134" par l’id de ton équipement que tu trouvera dans la configuration de ton équipement :

top: 50px !important;
right: 500px !important;

top : emplacement de l’équipement a partir du haut de page.
right : emplacement de l’équipement a partir de la droite de la page.

Vu que les tailles des design / navigateur sont différentes, il te faudra certainement jouer sur ces valeurs pour trouver le bon emplacement sur ton design.

Phpvarious · Novembre 29, 2023, 9:08

Ah bon .

Mais moi aussi j’en est appris grâce de tes codes

noodom · Novembre 29, 2023, 9:31

A tester ou pour s’en inspirer pour centrer dynamiquement :

[data-page="plan"] .zoneEqLogicOnClic .eqLogic.eqLogic-widget[data-eqlogic_id="709"] {
    position: absolute;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

Phpvarious · Novembre 29, 2023, 9:54

Bien vu pour le transform.
en revanche les valeurs sont appliquées a partir de l’emplacement du container, en passant la position en fixed ca fait le job :

[data-page="plan"] .zoneEqLogicOnClic .eqLogic.eqLogic-widget[data-eqlogic_id="709"] {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%);
}

noodom · Novembre 29, 2023, 10:00

Parfait ! pour la position, il me manquait le contexte (jamais utilisé)

xav31190 · Novembre 29, 2023, 10:10

faut pas abuser quand même , il y en a , ils ont peur de rien.
Non usage perso, c’est très inspirant, ce que tu fais

piwy · Novembre 30, 2023, 6:53

Merci a tous pour vos reponses , cest plus clair pour moi.
Je vais pouvoir faire des essais.

Autre question pour ma connaissance personnelle: pourquoi il y a souvent le notion « important » apres les valeurs ??

noodom · Novembre 30, 2023, 8:38

Salut,

Si le top par exemple est déjà défini pour l’élément alors le !important impose que ce nouveau top soit utilisé en remplacement de l’actuel.