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

Ldfa · le 7 décembre 2013

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".