Aller au contenu
Support de Zwii et Yocto

Messages recommandés

Marre du menu BigMac à droite ?

5a6f5069572dd_maureend.jpg.1a334c73e804ce3c314ae262d7a18c80.jpg

 

Vous le préféreriez à gauche, comme @NEERUAM ?

maureen.jpg.505fe80d0bba2fe95a1614c0d1fd600e.jpg

 

Editez "core/layout/common.css" et remplacez "block" par "inline-block" à la ligne 332 :

@media (max-width: 768px) {
	nav #toggle {
	display: block;
	}

o.O

 

 

 

 

Modifié par PeterRabbit
  • J'aime 1

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité

toggle2.png.7ecd5656a6eeb28305632f28b48361b9.png

 

toggle3.png.1b3f61c3d30bed4cfed9cd26bfa59e5d.png

en effet excellente tutoriel , je l'ai utilisé en Mars 2016 amis en plaçant le " burger au milieu " , à l'époque c'était une version de Zwiicms en 7.4.2 

à l'époque le " toggle" était écrit de cette façon

/* Menu */
.toggle {
	cursor: pointer;
	text-align: center;
	display: none;
}

 

Dans la version actuelle du zwii ( V8.1.0 ) ce code se situe ici : /core/layout/common.css

 

nav #toggle {
	cursor: pointer;
	text-align: right;
	display: none;
	font-weight: bold;
}

vers la ligne 306

 

à remplacer par ( alignement sur la gauche )

nav #toggle {
	cursor: pointer;
	text-align: left;
	display: none;
	font-weight: bold;
}

ou par

nav #toggle {
	cursor: pointer;
	text-align: center;
	display: none;
	font-weight: bold;
}

sur qui donne avec un alignement sur la gauche du site

toogle.png.f97845767b63ecfb7f27c519eab2e6ef.png

 

et déployé .... 

toggle1.png.d15b48419dfd8c19d81ab9976357376e.png

 

Si cela peut compléter ta première astuce, c'est la seule modification que je fais pour déplacer ce menu quand zwi passe en mode responsif sur le versions actuelles

 

 

Modifié par Invité

Partager ce message


Lien à poster
Partager sur d’autres sites
Invité

Bien dans l'autre sujet tu avais donné un code qui semblait satisfaire la personne, alors je n'ai pas osé :$

Celui que je te met en complément permet tout simplement de faire la même chose ( au besoin on peut même ajouter à la fin du code !important ) pour que celui ci devienne maître sur tout les autres; c'est en cherchant un peu lors d'une pause que je me suis dit " dois y avoir plus simple et sans devoir changer une taille d'écran ", donc ai regardé comment était codé le toggle dans les versions actuelles et vu que c'est du texte sous forme d'une font qui représente le big mac, facile alors de faire le rapprochement avec ce code plus pratique dirons nous :)

 

Partager ce message


Lien à poster
Partager sur d’autres sites

A la lecture de ce thread, me viens donc une suggestion : Possible de définir cela depuis l'interface Admin dans une future version de Zwii ?

Partager ce message


Lien à poster
Partager sur d’autres sites

Créer un compte ou se connecter pour commenter

Vous devez être membre afin de pouvoir déposer un commentaire

Créer un compte

Créez un compte sur notre communauté. C’est facile !

Créer un nouveau compte

Se connecter

Vous avez déjà un compte ? Connectez-vous ici.

Connectez-vous maintenant

  • Contenu similaire

    • Par roger
      TinyMCE interfacé, personnalisé avec skin et boutons
      Voir le fichier TinyMCE interfacé, personnalisé avec skin et boutons
       
      Vous aimeriez retrouver un éditeur de texte TinyMCE moins minimaliste que celui fourni avec ZwiiCMS vous êtes au bon endroit.
      Entièrement compatible avec toutes les versions de ZwiiCMS y compris la future nouvelle version qui devrait sortir sous l’appellation 9.0.0
       
      * téléchargez la version la plus récente:  TinyMCE-Plus-1-0-1.zip
       
       
      Cette mouture revue par mes soins vous apportera entre autre...
          Retour du menu en haut de l'éditeur
          Barre de l'éditeur qui reste fixe lorsque vous écrivez au fur et à mesure votre texte
          Une interface avec hauteur fixe extensible à la demande
          Un skin à activer pour bénéficier dans cet éditeur de boutons customisés
          Des émoticônes
          La taille des polices en pixel
          la possibilité de prévisualiser son texte en cours d'édition
          Possibilité aussi d'éditer son article en affichage grand écran dans son navigateur
          Formatage et mise en page du texte un peu plus complète
          Et tout un tas d'autres choses que vous découvrirez à son usage....
       
      les dossiers contenus dans l'archive:
      * partie installation : un dossier nommé "installer"
      * partie restauration : un dossier nommé "restaurer
       
      ## le dossier "installer" contient :
      - un dossier "skin"
      - un dossier "plugins"
      Les plugins ajoutés à tinymce (dans son dossier plugins)
      - un dossier nommé charmap
      - un dossier nommé directionality
      - un dossier nommé emoticons
      - un dossier nommé insertdatetime
      - un dossier nommé nonbreaking
      - un dossier nommé pagebreak
      - un dossier nommé preview
      - un dossier nommé save
      - un dossier nommé visualblocks
      - un dossier nommé visualchars
      - un dossier nommé wordcount
      (ils pourront être laissés en place ou supprimés manuellement si vous voulez revenir à la version précédente du tinymce)
       
      * Installation *
       
      1°  Télécharger l'archive et décompressez la sur votre pc
       
      2°  Votre archive étant décompressée vous devez avoir alors un dossier nommé "core"
           - un dossier nommé "core"
           - un dossier nommé "site"
           - un fichier nommé "index.php
       
      3°  Ouvrez votre FTP à l'endroit où vous hébergez votre ZwiiCMS
          Envoyez les dossiers "core" et "site" ainsi que le fichier "index.php sur votre espace web et acceptez le remplacement de tout les fichiers.

      Il ne vous reste plus alors qu'à vous rendre depuis votre navigateur web sur votre site en ligne et éditer une page pour voir le nouveau TinyMCE que vous venez de mettre en place.
       
      NOTA :
       
      Il est possible que celui ci (le nouveau TinyMCE) n'apparaisse pas de suite lors de votre édition de page, alors pas de panique, en restant sur la page que vous éditez cliquez simplement sur "Rafraîchir la page" dans votre navigateur et ainsi vous aurez ce fameux "petit plus" que vous attendiez.
       
      * Pour activer le skin "custom" rendez vous dans le dossier /core/vendor/tinymce/  là ouvrez le fichier init.js et simplement enlever (dé-commenter) les deux slash à la ligne n°12 comme ceci:
      avant
      // Correcteur de texte //skin: "custom", // Taille de police en px après
      // Correcteur de texte skin: "custom", // Taille de police en px  
      * Restauration du tinymce *
       
      ## le dossier "restaurer" contient :
           - un dossier nommé "site"
           - un fichier nommé "index.php
       
      1° Restauration
      Suivre cette procédure uniquement;

      Ouvrez votre FTP à l'endroit où vous hébergez votre ZwiiCMS
          Envoyez le dossiers "site" et fichier "index.php sur votre espace web et acceptez le remplacement de tout les fichiers.
          Rafraîchissez votre page, vous devriez alors revoir votre tinymce restauré à son origine.
       
      Enjoy les amis.
       
      # IMPORTANT A LIRE #
      Vous reconnaissez qu'en utilisant ce script sur votre site être entièrement responsable en cas de problème quel qu'il soit après sa mise en œuvre, je ne pourrais donc être considéré en aucun cas comme responsable de cet état de fait.
      💡 Pensez alors à faire une sauvegarde intégrale de votre site, ceci vous permettrait alors de revenir en arrière en réinjectant celle ci et retrouver votre site web tel que vous l'aviez conçu avant utilisation du script ci dessus.
      Contributeur roger Soumis 24/02/2019 Catégorie Modifications et astuces  
    • Par roger
      TinyMCE interfacé, personnalisé avec skin et boutons
       
      Vous aimeriez retrouver un éditeur de texte TinyMCE moins minimaliste que celui fourni avec ZwiiCMS vous êtes au bon endroit.
      Entièrement compatible avec toutes les versions de ZwiiCMS y compris la future nouvelle version qui devrait sortir sous l’appellation 9.0.0
       
      * téléchargez la version la plus récente:  TinyMCE-Plus-1-0-1.zip
       
       
      Cette mouture revue par mes soins vous apportera entre autre...
          Retour du menu en haut de l'éditeur
          Barre de l'éditeur qui reste fixe lorsque vous écrivez au fur et à mesure votre texte
          Une interface avec hauteur fixe extensible à la demande
          Un skin à activer pour bénéficier dans cet éditeur de boutons customisés
          Des émoticônes
          La taille des polices en pixel
          la possibilité de prévisualiser son texte en cours d'édition
          Possibilité aussi d'éditer son article en affichage grand écran dans son navigateur
          Formatage et mise en page du texte un peu plus complète
          Et tout un tas d'autres choses que vous découvrirez à son usage....
       
      les dossiers contenus dans l'archive:
      * partie installation : un dossier nommé "installer"
      * partie restauration : un dossier nommé "restaurer
       
      ## le dossier "installer" contient :
      - un dossier "skin"
      - un dossier "plugins"
      Les plugins ajoutés à tinymce (dans son dossier plugins)
      - un dossier nommé charmap
      - un dossier nommé directionality
      - un dossier nommé emoticons
      - un dossier nommé insertdatetime
      - un dossier nommé nonbreaking
      - un dossier nommé pagebreak
      - un dossier nommé preview
      - un dossier nommé save
      - un dossier nommé visualblocks
      - un dossier nommé visualchars
      - un dossier nommé wordcount
      (ils pourront être laissés en place ou supprimés manuellement si vous voulez revenir à la version précédente du tinymce)
       
      * Installation *
       
      1°  Télécharger l'archive et décompressez la sur votre pc
       
      2°  Votre archive étant décompressée vous devez avoir alors un dossier nommé "core"
           - un dossier nommé "core"
           - un dossier nommé "site"
           - un fichier nommé "index.php
       
      3°  Ouvrez votre FTP à l'endroit où vous hébergez votre ZwiiCMS
          Envoyez les dossiers "core" et "site" ainsi que le fichier "index.php sur votre espace web et acceptez le remplacement de tout les fichiers.

      Il ne vous reste plus alors qu'à vous rendre depuis votre navigateur web sur votre site en ligne et éditer une page pour voir le nouveau TinyMCE que vous venez de mettre en place.
       
      NOTA :
       
      Il est possible que celui ci (le nouveau TinyMCE) n'apparaisse pas de suite lors de votre édition de page, alors pas de panique, en restant sur la page que vous éditez cliquez simplement sur "Rafraîchir la page" dans votre navigateur et ainsi vous aurez ce fameux "petit plus" que vous attendiez.
       
      * Pour activer le skin "custom" rendez vous dans le dossier /core/vendor/tinymce/  là ouvrez le fichier init.js et simplement enlever (dé-commenter) les deux slash à la ligne n°12 comme ceci:
      avant
      // Correcteur de texte //skin: "custom", // Taille de police en px après
      // Correcteur de texte skin: "custom", // Taille de police en px  
      * Restauration du tinymce *
       
      ## le dossier "restaurer" contient :
           - un dossier nommé "site"
           - un fichier nommé "index.php
       
      1° Restauration
      Suivre cette procédure uniquement;

      Ouvrez votre FTP à l'endroit où vous hébergez votre ZwiiCMS
          Envoyez le dossiers "site" et fichier "index.php sur votre espace web et acceptez le remplacement de tout les fichiers.
          Rafraîchissez votre page, vous devriez alors revoir votre tinymce restauré à son origine.
       
      Enjoy les amis.
       
      # IMPORTANT A LIRE #
      Vous reconnaissez qu'en utilisant ce script sur votre site être entièrement responsable en cas de problème quel qu'il soit après sa mise en œuvre, je ne pourrais donc être considéré en aucun cas comme responsable de cet état de fait.
      💡 Pensez alors à faire une sauvegarde intégrale de votre site, ceci vous permettrait alors de revenir en arrière en réinjectant celle ci et retrouver votre site web tel que vous l'aviez conçu avant utilisation du script ci dessus.
    • Par pduchemin
      est  il   possible de  créer un  menu sur  2 sous niveaux  ?
       
      Menu                                   niv 1
      SousMenu                           niv 2
      L sousSousMenu                niv 3
      L sousSousMenu                  niv 3
      SousMenu                          niv 2
       
       
       
       
       
       
×