Comme annoncé, ce forum est passé en lecture seule au 1er janvier 2020. Désormais nous vous invitons à vous rendre sur notre nouvelle page communauté :
Image

A très bientôt !

[S'inspirer] Postez votre Plan / Design

JEEDOM et vous! Venez vous présenter et préseter votre installation domotique JEEDOM
Yves19
Timide
Messages : 90
Inscription : 24 févr. 2018, 21:25
Localisation : Versailles

Re: [S'inspirer] Postez votre Plan / Design

Message par Yves19 » 12 mai 2018, 11:16

Bonjour . C'est une question de marge intérieure à ton menu.
Il faut donc ajuster le padding (left en l'occurence) pour obtenir l'effet attendu (et désiré).

ul.monmenu {
padding-left: 0px;
}

flomoneco
Timide
Messages : 17
Inscription : 11 juin 2017, 18:27

Re: [S'inspirer] Postez votre Plan / Design

Message par flomoneco » 12 mai 2018, 12:14

Merci !
Il y avait effectivement un problème mais au niveau du padding du top menu, j'ai fait le grand ménage and it works ;) 8-)

GéraldB
Timide
Messages : 108
Inscription : 05 mai 2017, 12:32

Re: [S'inspirer] Postez votre Plan / Design

Message par GéraldB » 19 mai 2018, 17:46

Bonjour,

j'ai commencé à travailler sur mon Design mais j'ai un petit soucis.
Je crée mon Design à partir de mon PC et j'utilise des polices (fonts) comme Calibri ou Comics mais bien sûr, une fois sur la tablette (Teclast X10), la police n'étant pas installée sur la tablette, le rendu est complément différent (le texte dépasse) :(
Il y a t-il un moyen pour ajouter des polices à Jeedom ou à la tablette ?
Merci ;)

Avatar de l’utilisateur
Nibb31
Actif
Messages : 2155
Inscription : 17 févr. 2015, 15:29

Re: [S'inspirer] Postez votre Plan / Design

Message par Nibb31 » 19 mai 2018, 22:13

Il faut appeler des fontes web, celles de chez Google par exemple.
Jeedom: VM ProxMox sur serveur i7-2760QM, RAM 8Go
Zwave + RFXCom433E + Hue

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 19 mai 2018, 22:52

Sinon, tu peux les installer sur ton Jeedom.
Par exemple, à la racine, dans le folder 'fonts'.

Ensuite tu les appelles comme cela :
- Au début de ton code html :

Code : Tout sélectionner

<style>
  @font-face {
	font-family: "Comic";
	src: url('fonts/ComicSansMSRegular.ttf');
}
</style>
- Ensuite pour afficher du texte avec :

Code : Tout sélectionner

<div align=center style="font-family:Comic;font-weight:normal;font-size:16px;">Résumé</div>
Bien sûr mon exemple n'est valide que si j'ai installé ComicSansMSRegular.ttf dans /fonts.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

GéraldB
Timide
Messages : 108
Inscription : 05 mai 2017, 12:32

Re: [S'inspirer] Postez votre Plan / Design

Message par GéraldB » 20 mai 2018, 08:13

Merci
@Theduck38 : j'ai suivi ta procédure et ça marche impeccable. J'ai juste mis mon Dossier "Fonts" dans mon répertoire "Mon Thème" et modifié le chemin d'accès en conséquence.
Encore Merci. ;)

Avatar de l’utilisateur
Theduck38
Helper
Messages : 2714
Inscription : 22 févr. 2015, 17:32
Localisation : Près de Grenoble
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Theduck38 » 20 mai 2018, 15:28

De rien.

Après tu peux effectivement utiliser d'autres polices, comme celles de Google (mais on ne sait jamais... ils pourraient bien les rendre payantes un jour !!)
https://fonts.google.com/
Tu cliques sur '+' sur la police qui t'intéresse, puis sur la zone "1 family selected' et tu auras les explications pour inclure la police dans ta page.
-- TD38 --
Helper Officiel Jeedom
Zimeteo sur Jeedom : http://www.meteo.lecoin.info
Jeedom Stable sur serveur custom
Le risque électrique - Afficheur leds RGB - Tablette Murale - Thermostat connecté

GéraldB
Timide
Messages : 108
Inscription : 05 mai 2017, 12:32

Re: [S'inspirer] Postez votre Plan / Design

Message par GéraldB » 20 mai 2018, 16:34

@Theduck38 : Je préfères avoir toutes mes polices, images, etc... en local.
Encore merci ;)

xez7082
Timide
Messages : 18
Inscription : 11 avr. 2018, 14:05

Re: [S'inspirer] Postez votre Plan / Design

Message par xez7082 » 23 mai 2018, 14:07

Bonjour,

Après plusieurs recherche et 1 mois d'essai, j'ai enfin reussi a faire ceci.

Image

j'ai bien entendu pris les infos et des bouts de code, un peu partout sur le forum, merci au personnes qui se reconnaîtrons en voyant l'image.

Djal94
Actif
Messages : 1228
Inscription : 09 août 2016, 09:21

Re: [S'inspirer] Postez votre Plan / Design

Message par Djal94 » 23 mai 2018, 14:08

Nice!
Jeedom 3.2.11 sur NUC Intel (Debian 8)
Zwave - BLEA - Wifi
Trucs et Astuces

julien1679
Timide
Messages : 6
Inscription : 27 avr. 2018, 15:44

Re: [S'inspirer] Postez votre Plan / Design

Message par julien1679 » 24 mai 2018, 11:19

Bonjour à tous,

je n'arrive pas a mettre la main sur le code pour avoir les second en blanc sur l’horloge comme sur le design de benji.

merci à tous
bonne journée
=> Raspberry PI 3B+
=> Passerelle RFXcom 433E
=> Google home
=> Thermostat NETATMO

Yves19
Timide
Messages : 90
Inscription : 24 févr. 2018, 21:25
Localisation : Versailles

Re: [S'inspirer] Postez votre Plan / Design

Message par Yves19 » 26 mai 2018, 09:32

Image
julien1679 a écrit :
24 mai 2018, 11:19
Bonjour à tous,

je n'arrive pas a mettre la main sur le code pour avoir les second en blanc sur l’horloge comme sur le design de benji.

merci à tous
bonne journée
Bonjour.
Je réponds peut être à coté de la plaque. Si le design est l'horloge numérique jquery la mise en forme de l'affichage de l'heure se fait dans le code html dans la partie déclaration de style ici :
div.clock div.time span {
border-radius: 5px;
padding: 1px 4px 3px 4px;
color: #fff;
Il suffit d'ajuster la propriété color à celle que tu désires (white ou #FFF ou rgba(255,255, 255, 1) pour du blanc non transparent dans ton cas).
Capture d’écran 2018-05-26 à 09.49.18.jpg
Copie Horloge numérique
Capture d’écran 2018-05-26 à 09.49.18.jpg (35.08 Kio) Consulté 2396 fois
SI ce n'est pas cette horloge, peux tu passer l'URL du design que tu cherches à customiser ?

Cordialement

Loic74
Actif
Messages : 709
Inscription : 24 oct. 2017, 22:45
Localisation : Haute-Savoie
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par Loic74 » 28 mai 2018, 11:32

Salut,
Voila une icône "conso électrique" pour ceux que cela peut intéresser, pour le menu de FB33$.
Après avoir cherché une bonne application simple pour réaliser des icônes, j'ai trouvé "PixelFormer".

L'icône (la sauvegarder pour la visualiser):
icon_elec.png
icon_elec.png (256.42 Kio) Consulté 2311 fois

[edit 02/06/2018] ci-dessous l'icone vierge afin de servir de base pour d'autres icônes
CercleVierge.png
CercleVierge.png (5.02 Kio) Consulté 1883 fois
Résultat dans le design:
Conso.jpg
Conso.jpg (137.33 Kio) Consulté 2311 fois
Pour le code du graphique il vient de Benj29 (posté le 28 janv. 2018, 14:16 ici: viewtopic.php?f=50&t=1182&p=578659&hili ... ry#p578659).
Le code charge des données historisées dans la BD de Jeedom sur une période scpécifiée (chercher le mot clé "period" dans le code PHP ci-dessous) et les affiche.
Quand au style du graphique, je vais sur le site de HighCharts (https://www.highcharts.com/) pour tester facilement en live différents paramètres de style et je les implémente dans le design de la manière suivante:

Une iframe avec ce code :

Code : Tout sélectionner

<iframe  src="/chart.php?cmdId=5486&chartWidth=310&chartHeight=66" width="310" height="66" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
où cmdId=X le numéro de l'info que tu veux afficher.
Le fichier chart.php est à mettre à l'endroit qui convient (ici à la racine de html de ton jeedom. Tu peux utiliser le plugin outils de développement ou un SFTP via Bitvise par exemple pour placer ton fichier.

Tu as deux fois à mettre ton API Jeedom

Le code du fichier chart.php

Code : Tout sélectionner

<?php

class jsonrpcClient {
                /*     * ********Attributs******************* */

                private $errorCode = 9999;
                private $errorMessage = 'No error';
                private $error = 'No error';
                private $result;
                private $rawResult;
                private $apikey = 'XXXXX';
                private $options = array();
                private $apiAddr;
                private $cb_function = '';
                private $cb_class = '';
                private $certificate_path = '';
                private $noSslCheck = false;

                /*     * ********Static******************* */

                /**
                *
                * @param type $_apiAddr
                * @param type $_apikey
                * @param type $_options
                */
                public function __construct($_apiAddr, $_apikey, $_options = array()) {
                               $this->apiAddr = $_apiAddr.'/core/api/jeeApi.php';
                               $this->apikey = $_apikey;
                               $this->options = $_options;
                }
                /**
                *
                * @param type $_method
                * @param array $_params
                * @param int $_timeout
                * @param type $_file
                * @param int $_maxRetry
                * @return boolean
                */
                public function sendRequest($_method, $_params = null, $_timeout = 15, $_file = null, $_maxRetry = 2) {
                               $_params['apikey'] = $this->apikey;
                               $_params = array_merge($_params, $this->options);
                               $request = array(
                                               'request' => json_encode(array(
                                                               'jsonrpc' => '2.0',
                                                               'id' => mt_rand(1, 9999),
                                                               'method' => $_method,
                                                               'params' => $_params,
                                               )));
                               $this->rawResult = preg_replace('/[^[:print:]]/', '', trim($this->send($request, $_timeout, $_file, $_maxRetry)));

                               if ($this->rawResult === false) {
                                               return false;
                               }

                               if (!((is_string($this->rawResult) && (is_object(json_decode($this->rawResult)) || is_array(json_decode($this->rawResult)))))) {
                                               if ($this->error == 'No error' || $this->error == '') {
                                                               $this->error = '9999<br/>Reponse is not json : ' . $this->rawResult;
                                               }
                                               $this->errorMessage = $this->rawResult;
                                               return false;
                               }
                               $result = json_decode(trim($this->rawResult), true);

                               if (isset($result['result'])) {
                                               $this->result = $result['result'];
                                               if ($this->getCb_class() != '') {
                                                               $callback_class = $this->getCb_class();
                                                               $callback_function = $this->getCb_function();
                                                               if (method_exists($callback_class, $callback_function)) {
                                                                               $callback_class::$callback_function($this->result);
                                                               }
                                               } elseif ($this->getCb_function() != '') {
                                                               $callback_function = $this->getCb_function();
                                                               if (function_exists($callback_function)) {
                                                                               $callback_function($this->result);
                                                               }
                                               }
                                               return true;
                               } else {
                                               if (isset($result['error']['code'])) {
                                                               $this->error = 'Code : ' . $result['error']['code'];
                                                               $this->errorCode = $result['error']['code'];
                                               }
                                               if (isset($result['error']['message'])) {
                                                               $this->error .= '<br/>Message : ' . $result['error']['message'];
                                                               $this->errorMessage = $result['error']['message'];
                                               }
                                               return false;
                               }
                }

                private function send($_request, $_timeout = 15, $_file = null, $_maxRetry = 2) {
                               if ($_file !== null) {
                                               if (version_compare(phpversion(), '5.5.0', '>=')) {
                                                               foreach ($_file as $key => $value) {
                                                                               $_request[$key] = new CurlFile(str_replace('@', '', $value));
                                                               }
                                               } else {
                                                               $_request = array_merge($_request, $_file);
                                               }
                                               if ($_timeout < 1200) {
                                                               $_timeout = 1200;
                                               }
                               }
                               $nbRetry = 0;
                               while ($nbRetry < $_maxRetry) {
                                               $ch = curl_init();
                                               curl_setopt($ch, CURLOPT_URL, $this->apiAddr);
                                               curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
                                               curl_setopt($ch, CURLOPT_HEADER, false);
                                               curl_setopt($ch, CURLOPT_TIMEOUT, $_timeout);
                                               curl_setopt($ch, CURLOPT_FOLLOWLOCATION, false);
                                               curl_setopt($ch, CURLOPT_POST, true);
                                               curl_setopt($ch, CURLOPT_POSTFIELDS, $_request);
                                               curl_setopt($ch, CURLOPT_FORBID_REUSE, true);
                                               curl_setopt($ch, CURLOPT_FRESH_CONNECT, true);
                                               if ($this->getCertificate_path() != '' && file_exists($this->getCertificate_path())) {
                                                               curl_setopt($ch, CURLOPT_CAINFO, $this->getCertificate_path());
                                               }
                                               if ($this->getNoSslCheck()) {
                                                               curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
                                                               curl_setopt($ch, CURLOPT_SSL_VERIFYHOST, false);
                                               }
                                               $response = curl_exec($ch);
                                               $http_status = curl_getinfo($ch, CURLINFO_HTTP_CODE);
                                               $nbRetry++;
                                               if (curl_errno($ch) && $nbRetry < $_maxRetry) {
                                                               curl_close($ch);
                                                               usleep(500000);
                                               } else {
                                                               $nbRetry = $_maxRetry + 1;
                                               }
                               }
                               if ($http_status == 301) {
                                               if (preg_match('/<a href="(.*)">/i', $response, $r)) {
                                                               $this->apiAddr = trim($r[1]);
                                                               return $this->send($_request, $_timeout, $_file, $_maxRetry);
                                               }
                               }
                               if ($http_status != 200) {
                                               $this->error = 'Erreur http : ' . $http_status . ' Details : ' . $response;
                               }
                               if (curl_errno($ch)) {
                                               $this->error = 'Erreur curl sur : ' . $this->apiAddr . '. Détail :' . curl_error($ch);
                               }
                               curl_close($ch);
                               return $response;
                }

                /*     * ********Getteur Setteur******************* */

                public function getError() {
                               return $this->error;
                }

                public function getResult() {
                               return $this->result;
                }

                public function getRawResult() {
                               return $this->rawResult;
                }

                public function getErrorCode() {
                               return $this->errorCode;
                }

                public function getErrorMessage() {
                               return $this->errorMessage;
                }

                public function getCb_function() {
                               return $this->cb_function;
                }

                public function getCb_class() {
                               return $this->cb_class;
                }

                public function setCb_function($cb_function) {
                               $this->cb_function = $cb_function;
                               return $this;
                }

                public function setCb_class($cb_class) {
                               $this->cb_class = $cb_class;
                               return $this;
                }

                public function setCertificate_path($certificate_path) {
                               $this->certificate_path = $certificate_path;
                               return $this;
                }

                public function getCertificate_path() {
                               return $this->certificate_path;
                }

                public function setDisable_ssl_verifiy($noSslCheck) {
                               $this->noSslCheck = $noSslCheck;
                               return $this;
                }

                public function getNoSslCheck() {
                               return $this->noSslCheck;
                }

                public function setNoSslCheck($noSslCHeck) {
                               $this->noSslCheck = $noSslCHeck;
                               return $this;
                }

}

$urlJeedom = "http://127.0.0.1:80";
$apiKey = "XXXXX";

$chartWidth = ( IsSet($_GET['chartWidth']) ? $_GET['chartWidth'] : 300 );
$chartHeight = ( IsSet($_GET['chartHeight']) ? $_GET['chartHeight'] : 115 );
$cmdId = ( IsSet($_GET['cmdId']) ? $_GET['cmdId'] : 1 );
// changer le forcage pour la durée d'affichage (voir plus bas)
$period = ( IsSet($_GET['period']) ? $_GET['period'] : 0 );

if ($period==1)
{
                $startTime=date("Y-m-d H:i:s",time()-72*60*60);
                $endTime=date("Y-m-d H:i:s",time());
}else{
 //               $startTime=date("Y-m-d",time())." 00:00:00";
				$startTime=date("Y-m-d H:i:s",time()-72*60*60);
                $endTime=date("Y-m-d H:i:s",time());
}


$jsonrpc = new jsonrpcClient($urlJeedom, $apiKey);
$data = array();
if($jsonrpc->sendRequest('cmd::getHistory', array('apikey' => $apiKey, 'id' => $cmdId, 'startTime' => $startTime, 'endTime' => $endTime ))) {
                foreach ($jsonrpc->getResult() as $result) {
                               $data[] = array("ts" => strtotime($result["datetime"]),"value"=> $result["value"]);
                }
} else {
    echo $jsonrpc->getError();
}
?>

<!DOCTYPE html>
<html>
<head>
                <meta http-equiv="Content-Language" content="fr" />
                <meta http-equiv="Content-Type" content="text/html;charset=utf-8" /> 
                <meta http-equiv="X-UA-Compatible" content="IE=edge">
                <meta name="viewport" content="width=device-width">
                <script src="https://code.highcharts.com/highcharts.js"></script>
                <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
                <script>
                               $(function () {
                                               var data = {color: 'rgb(0,128,128)', name: 'command #<?= $cmdId;?>', lineWidth: 1, data:[
<?php
                foreach ($data as $row){
                               echo "\t\t\t\t[Date.UTC(".date("Y",$row['ts']).",".(date("m",$row['ts'])-1).",".date("d",$row['ts']).",".date("H",$row['ts']).",".date("i",$row['ts']).",".date("s",$row['ts'])."),".$row['value']."],\n";
                }
?>
                                               ]};
                                               var myChart = Highcharts.chart('container', {
                                                               chart: {
                                                                               backgroundColor:'rgba(255, 255, 255, 0.0)',
                                                                               type: 'area'
                                                               },
                                                               title: {
                                                                               text: ''
                                                               },
                                                               xAxis: {
                                                                               type: 'datetime',
                                                                              lineWidth: 0,
                                                                               minorGridLineWidth: 1,
                                                                               lineColor: 'rgba(255,255,255,0.5)',
                                                                               labels: {
                                                                                              enabled: true
                                                                               },
                                                                               minorTickLength: 0,
                                                                               tickLength: 0
                                                               },
                                                               plotOptions: {
																						area: {
                    fillColor: {
                        linearGradient: {
                            x1: 0,
                            y1: 0,
                            x2: 0,
                            y2: 1
										},
                        stops: [
                            [0, 'rgba(0,128,128,0.7)'],
                            [0.5, 'rgba(0,128,128,0.0)'],
							[1, 'rgba(0,128,128,0.0)']
								]
								}
																						},
					series: {
                                                                                              marker:{
                                                                                                              enabled: false
                                                                                              }
                                                                               }
                                                               },
                                                               yAxis: {
                                                                               title: {
                                                                                              text: ''
                                                                               },
                                                                               lineWidth: 0,
                                                                               minorGridLineWidth: 1,
                                                                               lineColor: 'rgba(255,255,255,0.5)',
                                                                               labels: {
                                                                                              enabled: true
                                                                               },
                                                                               minorTickLength: 0,
                                                                               tickLength: 0,
                                                                               gridLineColor: 'rgba(255,255,255,0.1)',
																			  
                                                               },
                                                               tooltip: {
                                                                               enabled: false
                                                               },
                                                               credits: {
                                                                               enabled: false
                                                               },
                                                               legend: {
                                                                               enabled: false
                                                               },
                                                               series: [data]
                                               });
                               });
                </script>             
                <div id="container" style="width:<?= $chartWidth;?>px; height:<?= $chartHeight;?>px;"></div>
</body>
</html>
Dernière édition par Loic74 le 02 juin 2018, 13:17, édité 1 fois.
---------------------------------------
Jeedom v3.3.19, VM sur Synology RS1619xs+, Arduinos, ETH-IO32B, MQTT, TTN, LoRa, Service Pack Power Ultimate
Ma présentation
Ma piscine connectée
ioBoard

julien1679
Timide
Messages : 6
Inscription : 27 avr. 2018, 15:44

Re: [S'inspirer] Postez votre Plan / Design

Message par julien1679 » 28 mai 2018, 21:24

Bonsoir,
Merci @ yves19 c'est exactement ça que je souhaitais merci beaucoup pour ta réponse.
par contre j'ai bien les mêmes valeurs que toi mais pour les secondes le fond et toujours noir comme pour les heures et minutes et l'écriture et blanche également comme pour le reste. je voudrais juste comme sur le design en benj avoir le fond des seconde de l'horloge en blanc et l'écriture des secondes en noir.

merci à tous
=> Raspberry PI 3B+
=> Passerelle RFXcom 433E
=> Google home
=> Thermostat NETATMO

Avatar de l’utilisateur
m.georgein
Timide
Messages : 299
Inscription : 18 mars 2016, 23:46
Localisation : 13820

Re: [S'inspirer] Postez votre Plan / Design

Message par m.georgein » 29 mai 2018, 09:15

Yves19 a écrit :
26 mai 2018, 09:32
Image
julien1679 a écrit :
24 mai 2018, 11:19
Bonjour à tous,

je n'arrive pas a mettre la main sur le code pour avoir les second en blanc sur l’horloge comme sur le design de benji.

merci à tous
bonne journée
Bonjour.
Je réponds peut être à coté de la plaque. Si le design est l'horloge numérique jquery la mise en forme de l'affichage de l'heure se fait dans le code html dans la partie déclaration de style ici :
div.clock div.time span {
border-radius: 5px;
padding: 1px 4px 3px 4px;
color: #fff;
Il suffit d'ajuster la propriété color à celle que tu désires (white ou #FFF ou rgba(255,255, 255, 1) pour du blanc non transparent dans ton cas).
Capture d’écran 2018-05-26 à 09.49.18.jpg

SI ce n'est pas cette horloge, peux tu passer l'URL du design que tu cherches à customiser ?

Cordialement
Bonjour,

J'ai un soucis avec cette horloge dont j'ai récupéré le code plus haut, quand je la met dans un design, dès la validation, Jeedom me dit "Token invalide" et je n'est plus accès au modif de ce design. Seule solution aller en BdD et supprimer l'enregistrement deu txt/htlm créé.

Sans doute une vérole dans le code récupéré, quelqu'un pourrait il republier ce code ? Merci d'avance
Plateforme :
NUCNUC6i5SYK en VM STRETCH
Version Jeedom 4.0.9
Version PHP 7.0.33-0+deb9u1
Version OS Linux debian9 4.9.0-8-amd64 #1 SMP Debian 4.9.130-2 (2018-10-27) x86_64 GNU/Linux [9.6]
Version database 10.1.26-MariaDB-0+deb9u1

Yves19
Timide
Messages : 90
Inscription : 24 févr. 2018, 21:25
Localisation : Versailles

Re: [S'inspirer] Postez votre Plan / Design

Message par Yves19 » 29 mai 2018, 20:56

julien1679 a écrit :
28 mai 2018, 21:24
Bonsoir,
Merci @ yves19 c'est exactement ça que je souhaitais merci beaucoup pour ta réponse.
par contre j'ai bien les mêmes valeurs que toi mais pour les secondes le fond et toujours noir comme pour les heures et minutes et l'écriture et blanche également comme pour le reste. je voudrais juste comme sur le design en benj avoir le fond des seconde de l'horloge en blanc et l'écriture des secondes en noir.

merci à tous
Pour le changement de couleur du fond de l'horloge et des chiffres de l'heure (hh, mm, ss)

/* Mise en forme horloge */
div.clock div.time span {
border-radius: 5px;
padding: 1px 4px 3px 4px;
color: #fff; /* couleur des chiffres, changer par #000 pour des chiffres noirs*/
/* couleur des dégradés dans les boîtes qui contiennent les chiffres. Changer #000 par #fff et #555 par #ddd pour un dégradé de gris très très léger par exemple*/
/* fallback */
background: #000;
/* Safari 4-5, Chrome 1-9 */
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#555), to(#000));
/* Safari 5.1, Chrome 10+ */
background: -webkit-linear-gradient(top, #555, #000);
/* Firefox 3.6+ */
background: -moz-linear-gradient(top, #555, #000);
/* IE 10 */
background: -ms-linear-gradient(top, #555, #000);
/* Opera 11.10+ */
background: -o-linear-gradient(top, #555, #000);
}

/* mise en forme points horloge */
div.clock {
color: white; /* changer white par black pour avoir les points de séparations entre hh, mm et ss en noir*/
font-size: 18px;
font-weight: normal;
text-decoration: none;
}
Voilà qui devrait faire ton affaire.

maxocchi
Timide
Messages : 2
Inscription : 18 janv. 2018, 21:51
Localisation : lys-lez-lannoy
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par maxocchi » 01 juin 2018, 00:57

Bonjour

je me lance dans mon design. Il est sans prétention et sans intégration technique de pro comme j'ai pu lire (et qui m'ont impressionné).
Un grand merci à tous ceux qui m'ont inspiré et tout ceux qui contribuent !

j'ai ma page "d'accueil/résumé" et mon premier menu vers mes différentes pièces.

A venir surement une partie pour le multimédia ...

Image
Image
Image

Maxocchi

Avatar de l’utilisateur
tom74
Actif
Messages : 1798
Inscription : 16 juil. 2014, 09:16
Localisation : Annecy (74)

Re: [S'inspirer] Postez votre Plan / Design

Message par tom74 » 01 juin 2018, 10:57

Sympa ton design, sobre, efficace !
J'aime bien la partie supervision réseau, je vais surement te piquer l'idée.

benj29
Actif
Messages : 3983
Inscription : 26 mars 2017, 09:57
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par benj29 » 01 juin 2018, 16:36

Simple, sobre et efficace, clair.
Comment as tu fait pour avoir la météo d'une seule couleur ? Quel plugin/widget ?
Merci :)

maxocchi
Timide
Messages : 2
Inscription : 18 janv. 2018, 21:51
Localisation : lys-lez-lannoy
Contact :

Re: [S'inspirer] Postez votre Plan / Design

Message par maxocchi » 01 juin 2018, 19:19

benj29 a écrit :
01 juin 2018, 16:36
Simple, sobre et efficace, clair.
Comment as tu fait pour avoir la météo d'une seule couleur ? Quel plugin/widget ?
Merci :)
merci :)

C'est le plugin weather pas de widget particulier mais dans l'équipement je n'ai pas coché le mode image. Pour la couleur dans la configuration avancé / affichage j'ai simplement choisi la couleur du texte que je voulais.

Répondre

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

Qui est en ligne ?

Utilisateurs parcourant ce forum : Bing [Bot] et 3 invités