Aller au contenu

Comment modifier le Skin par défaut et rendre votre barre d'onglet plus conviviale


Ldfa

Messages recommandés

La barre d'onglet du Skin par défaut de Maxthon Cloud n'est pas très évoluée. Tout d'abord, la taille des onglets est fixe, quelque soit la taille du titre de l'onglet. Puis lorsque plusieurs onglets sont ouvert, leur taille diminue jusqu'à ne représenter plus que l'icône du site et quelques lettres du titre. L'utilisateur ne sait plus quel site est caché parmi tous les onglets ouverts.
 
Je vous propose de vous expliquer comment modifier le Skin par défaut pour que la taille de l'onglet s'adapte à la taille du titre et que la taille de l'onglet par défaut s'adapte automatiquement à la taille de son titre, lorsque qu'il y a trop d'onglets ouverts.
 
Il faut tout d'abord télécharger MxPacker.rar sur ce sujet de discussion : http://old-forum.maxthon.com/thread-801-1-1.html puis suivre les instructions suivantes :

1. Créez un dossier, qui se nomme par exemple, C:\MySkins
2. Copiez le fichier ui.dat du dossier \Bin de Maxthon Cloud dans le dossier C:\MySkins
3. Exécutez MxPacker.exe
4. Déposez le fichier ui.dat sur la fenêtre principale de MxPacker.exe
5. Cliquez sur le bouton Unpack, vous verrez qu'un nouveau dossier nommé ui sera créé dans C:\MySkins
6. Créez un nouveau dossier dans C:\MySkins, nommez-le AwesomeTabs, puis créez un dossier nommé main dans ce dernier
7. Copiez C:\MySkins\ui\skin3.ini dans le dossier C:\MySkins\AwesomeTabs
8. Éditez ce fichier skin3.ini, modifiez la ligne 25 de "name = Default" en "name = AwesomeTabs", Enregistrez et fermez le
9. Dans le dossier C:\MySkins\AwesomeTabs\main créez un fichier nommé skin.css
10. Ajoutez les lignes suivantes dans skin.css

        [mx-object="tabbar.container"] {
                overflow-x: hidden-scroll;
                scroll-manner: scroll-manner( page-animation:true, step-animation:true, step:50% );
        }
        .tab-container .tab {
                text-align: center;
                width: max-intrinsic !important;
                max-width: 220 !important;
        }
        .tab-container .tab-container-inner:drop-target .tab:moving, .tab-container .tab:current {
                assigned!: self.scroll-to-view(), self.start-timer(200);
                timer!: self.previous().scroll-to-view(), self.next().scroll-to-view(), self.stop-timer();
                font-weight: normal;
                width: max-intrinsic !important;
                max-width: max-intrinsic !important;
        }
        .tab-container .tab .text {
                min-width: 5em;
        }
        .tab-container .tab:current .text {
                max-width: max-intrinsic;
        }
        .scrolldiv {
                height: 100%%;
                border-bottom: 1 solid @TAB_BOTTOM_BORDER;
                width: max-intrinsic;
                vertical-align: middle;
        }
        .tabscroll {
                width: 28;
                height: 14;
        }

11. Enregistrez et fermez le fichier skin.css
12. Créez un dossier nommé tabbar dans le dossier C:\MySkins\AwesomeTabs\main
13. Copiez C:\MySkins\ui\main\tabbar\index.htm dans ce dossier
14. Editez ce fichier index.htm, ajoutez juste après la ligne 19 :

<div class="bottom-wrapper max-spacer" mx-object="win.captionBar">

la ligne suivante :

<div class="scrolldiv"><widget class="tabscroll" type="hscrollbar" for="div.tab-container-inner" at="div.tabbar" /></div>

15. Enregistrez et fermez le fichier index.htm
16. Déposez le dossier C:\MySkins\AwesomeTabs sur la fenêtre principale de MxPacker.exe, dans la boîte de dialogue "output package file", modifiez l'extension du fichier de .mxaddon en .mxskin
17. Cliquez sur le bouton Package, puis cliquez sur le lien "Open File" en bas à gauche de la fenêtre
18. Bravo ! Vous avez créez votre propre Skin "awesome tabs".

 

Voici à quoi il ressemble :
204433rgxqr7giqjxdj91q.gif
 
Vous pouvez télécharger le Skin ici : http://old-forum.maxthon.com/forum.php?mod=attachment&aid=NTA2MnwzMTJmZDA4NXwxMzg2NDA3MDExfDI1fDY5NDY%3D

Source : http://old-forum.maxthon.com/forum.php?mod=viewthread&tid=6946&fromuid=25

Lien vers le commentaire
Partager sur d’autres sites

  • 9 mois après...

Je pense qu'il faut suivre les instructions du fichier Skin SDK 2.0.0 mis à jour le 02/09/2014. Le fichier est malheureusement en anglais. :angelic:

 

Personnellement, je n'ai jamais essayé de faire un Skin. :s:

 

Source : http://old-forum.maxthon.com/forum.php?mod=viewthread&tid=804&extra=&highlight=skin%2Bsdk&page=1

Lien vers le commentaire
Partager sur d’autres sites

Archivé

Ce sujet est désormais archivé et ne peut plus recevoir de nouvelles réponses.

×
×
  • Créer...

Information importante

Nous avons placé des cookies sur votre appareil pour aider à améliorer ce site. Vous pouvez choisir d’ajuster vos paramètres de cookie, sinon nous supposerons que vous êtes d’accord pour continuer.