Présentation d’un menu css sous jeedom / nextdom3 min de lecture pour cet article.

2

Vous allez me dire, un menu de plus et plus compliqué à mettre en place…
Alors peut être un menu de plus , mais ce menu est différent par ca conception.
Le menu n’est pas à copier coller sur chaque design, mais créer sur une page unique.

Il est ecrit en js afin de facilité son intégration en ne modifiant que quelques infos ( ID design, type plateforme )
L’équipe Nextdom, notamment Noodom, et Slobberbone, ont travaillé pour adapter ce menu CSS.

Le principe et d’avoir un design menu, et des sous designs ou nous mettrons les informations équipements etc..

 

1er etape :

Télécharger le pack de menus en cours de travail par nextdom .
https://github.com/NextDom/nextdom-theme-design

Cliquez sur le bouton vert « Clone or Download »

enregistrer-pack Présentation d’un menu css sous jeedom / nextdom

Après avoir téléchargé le pack le déziper sur le pc. On y reviendra plus tard.

 

2eme étape :

Préparer votre jeedom / nextdom .

design-menu-1-7 Présentation d’un menu css sous jeedom / nextdom
Création de design de dimensions 1280 X 768
Un design : Menu
Puis des designs au nombre de 7
Pour aller plus vite dupliquez le 1er design
1 – 2 -3 -4- 5 -6 -7

Il est possible d’installer le plugins jeeexplorer pour jeedom, afin de facilité la mise en place du menu ou bien de passer par winscp pour mettre en place le menu sous nextdom.

 

Pour jeedom

logo-jeedom-grand-nom-couleur-2008x1536-1-300x229 Présentation d’un menu css sous jeedom / nextdom
Créer un répertoire montheme à la racine du html.
Soit /var/www/html pour avoir /var/www/html/montheme
Y glisser le dossier packicons
Y glisser le dossier themes présent dans slidingMenu

rep Présentation d’un menu css sous jeedom / nextdom

Pour nextdom

nextdom-wide-alphablackblue-300x145 Présentation d’un menu css sous jeedom / nextdom

Mettre les droits en SSH
sudo chmod 775 -R /var/lib/data/
sudo chown -R www-data:www-data /var/lib/data/
Utiliser winscp ou filezilla

winscp Présentation d’un menu css sous jeedom / nextdom

Créer un répertoire custom sous
/var/www/html/data pour avoir /var/www/html/data/custom
Y glisser le dossier packicons
Y glisser le dossier themes présent dans slidingMenu

Editer le fichier menu.html présent dans slidingMenu/themesmenu-a-editer Présentation d’un menu css sous jeedom / nextdom
Et renseigner Jeedom ou nextdom ligne 85
et les ID des designs autre que menu 1 2 3 …… ici pour une nouvelle installation.

menu-edition-1-1000x577 Présentation d’un menu css sous jeedom / nextdom

Editer la taille de l’iframe 1290 X 790 afin d’éviter les scrolls

edition-menu-1000x856 Présentation d’un menu css sous jeedom / nextdom

Après il vous reste a copier entièrement le code . Et retourner sur jeedom ou nextdom design menu.
Ajouter un texte/hml et l’agrandir affin qu’il prenne toute la place du design menu

ajout-textehtml Présentation d’un menu css sous jeedom / nextdom

Editer le texte /html et copier le code du menu précédemment modifié dans la zone texte et sauvegarder.

coller-le-texte-1000x533 Présentation d’un menu css sous jeedom / nextdom

Normalement le menu dois être visible à cette étape, afin de poursuivre l’aménagement de vote design, vous ne travaillerez que sur les sous design 1 2 3 4 ..7 Le design menu étant a ne pas modifier .

Voila le résultat il ne vous restera plus que à aller sur les design 1 2 3… pour y mettre vos donnée équipements … images.

menu-1-1000x613 Présentation d’un menu css sous jeedom / nextdom

Pour résumer voici une petite vidéo.

 

2 Commentaires

LAISSER UN COMMENTAIRE

S'il vous plaît entrez votre commentaire!
S'il vous plaît entrez votre nom ici