Avant toute chose merci de (re)prendre connaissance de la charte et de la respecter.
Pour résumer :
- Avant de poser une question, je cherche si la réponse existe
- Je suis poli, courtois et je respecte tout un chacun sur le forum
- Si un post m'agace : je m'en éloigne plutôt que de répondre d'une façon qui pourrait être mal interprétée


Il n'est jamais du luxe que de rappeler des choses simples :
Courtoisie, amabilité, politesse et bonne humeur sont les maîtres mots pour un forum sympathique, bienveillant et accueillant :)

Toute la communauté vous remercie

[S'inspirer] Postez vos Customisations (Javascipt / CSS)

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 23 févr. 2016, 00:38

Alors là ??? bizarre ... Le bouton config et le texte sont bien devenus bleu ?
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
Claude69
Actif
Messages : 1785
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Claude69 » 23 févr. 2016, 06:47

Sshafi a écrit :Alors là ??? bizarre ... Le bouton config et le texte sont bien devenus bleu ?
Non, je n'ai rien en bleu :o
En regardant mon JS (dans le post d'avant), est ce que je n'aurais pas dû mettre les dernières lignes dans le document.ready ?
De plus, j'ai l'impression qu'il y a un doublon

Edition : C'est ca. Les objets et les boutons sont bleu. Par contre le bouton configuration n'est toujours pas transparent.
J'ai mis à jour le JS sur le post précédent.
Dernière édition par Claude69 le 23 févr. 2016, 09:13, édité 1 fois.
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.2.11 ULTIMATE

Bêta-testeur App Mobile
Mon matériel ici

Avatar de l’utilisateur
m4x91
Timide
Messages : 382
Inscription : 22 mai 2015, 08:39

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par m4x91 » 23 févr. 2016, 07:53

nomaro a écrit : Pour le mode tablette, en css encore, voici une solution possible :
@media only screen and (max-width: 290px) {
.icon {
background-image: url("ton/image.jpg");
}
}

en gros, si ton support a une résolution inferieur a 290px, le fond d'un élément avec la classe "icon" sera modifié.
Ca fonctionne pas, j'ai fait plusieurs test de réso pour iPhone et iPad mais le screen reste le même

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 23 févr. 2016, 08:46

@Claude69 : j'avais pas vu que le js n'était pas dans le doc ready, mais oui il faut toujours mettre tout le js dedans.
Pour le reste je check ce soir, car mon plugin zwave est désactivé et aujourd'hui c'est journée ikea ;)

From Tapatruc...
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
Claude69
Actif
Messages : 1785
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Claude69 » 23 févr. 2016, 09:12

Sshafi a écrit :@Claude69 : j'avais pas vu que le js n'était pas dans le doc ready, mais oui il faut toujours mettre tout le js dedans.
Pour le reste je check ce soir, car mon plugin zwave est désactivé et aujourd'hui c'est journée ikea ;)

From Tapatruc...
Je compatis :D
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.2.11 ULTIMATE

Bêta-testeur App Mobile
Mon matériel ici

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 25 févr. 2016, 15:22

@Claude69 : merci pour ta compassion, c'était fatiguant ;)

Sinon pour ton soucis, je vois pas, j'ai mis tes custom chez moi et pas de Pb le bouton config est bien en fond transparent, .... ???
Le seul truc que je vois c'est éventuellement une version différente du plugin openzwave ... ???
Essayes, quand tu es sur la page, de faire F12 puis le bouton flèche (sélectionner un élément) et sélectionne le carré autour du bouton config et montre le code correspondant....
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
Claude69
Actif
Messages : 1785
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Claude69 » 25 févr. 2016, 15:45

Hello
Pour le plugin openzwave, c'est le stable à jour.
Pour le code, est ce que c'est lisible ?
Bt_zwconfig.png
Bt_zwconfig.png (363.3 Kio) Consulté 1514 fois
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.2.11 ULTIMATE

Bêta-testeur App Mobile
Mon matériel ici

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 25 févr. 2016, 16:21

Claude69 a écrit :Hello
Pour le plugin openzwave, c'est le stable à jour.
Pour le code, est ce que c'est lisible ?
Donc c'est bien ça c'est différent chez toi, sûrement une question de version du plugin, vu que je suis en beta.
Il faut donc rajouter #bt_zwconfig dans le css à la suite de : .eqLogicAction, .changeIncludeState, #bt_addScenario2, #bt_changeAllScenarioState2, #bt_displayScenarioVariable2, #bt_syncEqLogic, #bt_zwaveNetwork, #bt_zwaveHealth, #bt_displayMarket2, .bt_showScenarioSummary, .bt_showExpressionTest, #bt_addObject2, .objectDisplayCard

Donc en reprenant ton css du post précédent ça doit donner ça :

Code : Tout sélectionner

    /* Tuiles arrondies et ombre */
    .eqLogic{
      border-radius: 10px;
      box-shadow: 0px 3px 15px #0d0d0d;
      background: rgba(255,255,255,0.2) !important;
    }

    /* Image de fonds */
    body {
    background-image: url("/core/img/fond-ecran.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    color: rgb(244, 192, 28);
    }

    legend {
    background-color: rgba(0, 0, 0, 0.17);
    text-align: center;
    border-bottom: 2px solid #A17734;
    color: rgb(244, 192, 28);
    }

    .scenario-widget {
    background-color: rgba(0, 0, 0, 0.17);
    }

    /* Arrondi, ombre et fond translucide des cartes d'équipements (plugins), widgets */
    .eqLogicDisplayCard, .widgetDisplayCard, .scenarioDisplayCard, .pluginDisplayCard {
        border-radius: 15px !important;
        box-shadow: 0px 3px 10px #0d0d0d !important;
        background-color: rgba(255,255,255,0.2) !important;
    }

    /* Visibilité de la liste dans les widgets */
    .li_widget {
        background-color: rgba(0, 0, 0, 0.25);
    }

    /* Fonds des boutons de fonctions scénarios/zwave/objets */
    .eqLogicAction, .changeIncludeState, #bt_addScenario2, #bt_changeAllScenarioState2, #bt_displayScenarioVariable2, #bt_syncEqLogic, #bt_zwaveNetwork, #bt_zwaveHealth, #bt_zwconfig, #bt_displayMarket2, .bt_showScenarioSummary, .bt_showExpressionTest, #bt_addObject2, .objectDisplayCard {
         background-color: rgba(255,255,255,0) !important;
    }

    /* Menus et boutons arrondis */
    .dropdown-menu {
       border-radius: 7px;
    }
    .pull-right {
       border-radius: 7px;
    }
    .btn, .bootstrap-switch {
       border-radius: 7px;
    }
    .open > .dropdown-menu {
       .btn, .bootstrap-switch {
          border-radius: 7px;
        }
    }
    .navbar-nav > li > .dropdown-menu {
       border-top-right-radius: 5px;
        border-top-left-radius: 5px;
    }
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
Claude69
Actif
Messages : 1785
Inscription : 04 avr. 2015, 07:57
Localisation : Nord de Lyon

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Claude69 » 25 févr. 2016, 16:34

Super ça fonctionne Merci
De plus avec tes explications, j'ai même réussi à modifier mon JS pour le coloriser (image et texte) :D
Gestion d'ouverture / fermeture Portail et garage
Gestion filtration piscine
Divers éclairages
Et tout plein d'autres choses ...
JEEDOM NUC 3.2.11 ULTIMATE

Bêta-testeur App Mobile
Mon matériel ici

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 25 févr. 2016, 17:14

Avec plaisir :)

From Tapatruc...
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
carfnann
Timide
Messages : 447
Inscription : 05 févr. 2015, 02:14
Contact :

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par carfnann » 03 mars 2016, 12:13

Salut,

J'ai implementé les exemples de la 1ère page pour avoir des tuiles transparentes, cela fonctionne très bien sauf pour les tuiles du plugin Sonos et Kodi qui restent bleu.

J'ai merdé?
JEEdom sous Proxmox (Intel Quad Core i7-4770S / 3.10Ghz - 16 Go DDR3 - 256 Go SSD) + RFXCom + Jeedom sous Odroid avec Aeon Gen5
Mon matériel

Mon Blog : http://www.ca-sert-a-quoi.com domotique, objet connecté et impression 3D

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 03 mars 2016, 13:51

Je ne pense pas, c'est sûrement que les tuiles de ces plugins n'utilisent pas les même classes css que les autres widgets ...
Il va falloir que tu joue du F12 pour voir le code de la tuile et adapter tes custom ;)
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
SBO
Actif
Messages : 1348
Inscription : 17 sept. 2014, 18:31

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par SBO » 04 mars 2016, 12:32

marktapage pour éviter de la rechercher tout le temps :)
Ex-Bêta-Testeur | Jeedom | VM Debian 9

Pas de logs, pas d'infos, pas de réponse possible

Charte du forum | Doc jeedom | Trucs et astuces

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 04 mars 2016, 14:58

SBO a écrit :marktapage pour éviter de la rechercher tout le temps :)
Le topic est épinglé en haut du forum informations-vitrine c'est pas très compliqué de le retrouver ;)

From Tapatruc...
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
aragornier
Actif
Messages : 2217
Inscription : 02 janv. 2015, 20:38
Localisation : Montpellier

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par aragornier » 19 mars 2016, 09:27

@sshafi : merci pour ton super tuto !
JEEDOM POWER
3 jeedom sur RPI3 + 1 GEN8 pour VM et stockage
26 modules Zwave + 12 modules Rfxcom + 9 modules Xiaomi Home + téléinfo + 2 kodi + 4 cam IP + 1 hub harmony + 1 orvibo + 4 prises S20 , ect...

Avatar de l’utilisateur
Sshafi
Actif
Messages : 3891
Inscription : 01 juil. 2014, 16:08
Localisation : Albi

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par Sshafi » 19 mars 2016, 20:03

Avec plaisir mon canard ;)

From Tapatruc...
??? Menfin ...
VM ESXi # Aeon Lab Gen5 | RFXtrx433E | ...
Trucs & Astuces

Avatar de l’utilisateur
mamatdv
Actif
Messages : 1450
Inscription : 10 juil. 2014, 10:03
Localisation : Dijon

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par mamatdv » 19 mars 2016, 20:41

Vous savez comment enlever l'ombre d'une tuile dans le mode design uniquement ?

J'arrive pas à trouver :(
Capture d'écran 2016-03-19 20.39.31.png
Capture d'écran 2016-03-19 20.39.31.png (71.93 Kio) Consulté 1247 fois
Beta-testeur
Mon matosici
Doc jeedom - Trucs et astuce

Avatar de l’utilisateur
nickasimir
Actif
Messages : 683
Inscription : 06 août 2014, 19:35
Localisation : Montreuil, Idf

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par nickasimir » 23 mars 2016, 16:23

Vous savez comment supprimer les espaces entre les commandes ? ou le réduire ?

Autre question concernant les tuiles j'ai pas mal de tuile avec un écart de 2cm entre la dernière/info et le bas de la tuile, peux-t'on le réduire ?

merci
Jeedom en DIY sur NUCI3| Mon Matos : Ici

Avatar de l’utilisateur
BizZ62
Actif
Messages : 1349
Inscription : 16 juil. 2014, 19:17

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par BizZ62 » 23 mars 2016, 17:55

nickasimir a écrit :Autre question concernant les tuiles j'ai pas mal de tuile avec un écart de 2cm entre la dernière/info et le bas de la tuile, peux-t'on le réduire ?
Tu as tenté de les redimensionner avec le mode édition ?
MERCI POUR LE TAF !!!
RPI3 / Stick Aeon Gen5 / SSD 32Go + RPi2 / Stick Aeon Gen5 / +- 30 Modules Zwave / +- 10 modules 433 / 5 Caméras.

Avatar de l’utilisateur
nickasimir
Actif
Messages : 683
Inscription : 06 août 2014, 19:35
Localisation : Montreuil, Idf

Re: [S'inspirer] Postez vos Customisations (Javascipt / CSS)

Message par nickasimir » 23 mars 2016, 21:59

oui mais selon les tuiles ca me mets le text ou les commandes en dehors de la tuile.
Jeedom en DIY sur NUCI3| Mon Matos : Ici

Répondre

Revenir vers « Présentation et Vitrine d'installations »

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 2 invités