Aller au contenu
Support de Zwii et Yocto
CroqueWeb

Du style pour vos icônes du menu

Messages recommandés

Si les icônes de votre menu sont trop grandes, ou si elles ne sont pas à la même taille les unes par rapport aux autres, voici quelques lignes de CSS qui pourront vous aider à obtenir un meilleur affichage :

 

/* Items du menu */
nav a > img {
  max-width: 30px;
  height: auto;
  margin: -4px 0;
  vertical-align: bottom;
}

Résultat

 

Avant :

 

avant.png.fccafba0667c33cfa843cb04a841e36c.png

 

Après :

 

apres.png.445d9d8df84f3efdc950a902bd15e8b4.png

  • J'aime 2

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
       
       
       
       
       
       
×