Jump to content

Archived

This topic is now archived and is closed to further replies.

Ldfa

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

Recommended Posts

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

Share this post


Link to post
Share on other sites

Bonjour,

 

manquerait pas une ligne pour indiquer d'utiliser le fichier "skin.css" ?

 

Comment, ensuite, dire à Maxthon d'utiliser ce nouveau skin ? pas réussi pour ma part !

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.