· #1 Posted 6 Dec 2013 The tab bar of the default maxthon skin is rather awkward. At first, every tab is equal length, no matter how long or how short the title is. Then, as more tabs open, they shrink their length, until only the site icon and few letters remain. User can not recognize which tab is what by glancing at the tab bar. Now how about tab size fit to the title of page when the title is short, and they won't shrink too much when too many tabs open? Would it be nice to show FULL title on the current tab? Today, I will guide you how to make this happen by modifying the default skin. (Note: The turtorial content is removed because this thread is locked by system. If you want to read the content, ask the admins to unlock this thread.) Here is how it looks: 5063 Share this post Link to post Share on other sites
· #3 Posted 6 Dec 2013 Very clear indtructions. Even penguins can undestand that. Well done that guy. More please ???? Share this post Link to post Share on other sites
· #5 Posted 7 Dec 2013 Great tutorial, Brother ... great to see some tutorials around here. There's another, older tutorial ... not so detailed in a thread named "Skin Update" at: http://forum.maxthon.com/forum.php?mod=viewthread&tid=1025&highlight=skin%2Bupdate. I found it by accident and think it might be good to link them together. Also, readers, don't overlook the Skin SDK posted in another pinned thread in this Topic Area. I've found it to have some very educational documentation to help learn how to do skins. Keep up the good work. Many of us will apreciate it. >>SL Share this post Link to post Share on other sites
· #6 Posted 9 Dec 2013 First thank you for your post. Would it be possible to show us how would you move the favorites bar to the window frame? This would be in between the minimize button and the tab scroll of your AwesomeTabs skin. Thanks!! Share this post Link to post Share on other sites
· #7 Posted 10 Dec 2013 Thanks; I was wondering how to get those working! Share this post Link to post Share on other sites
· #8 Posted 10 Dec 2013 And here is my awesome skin. Thank you very much for you time and effort you put in this inspiring awesome skin design tutorial. I'm very very appreciative!:handshake You the best! Share this post Link to post Share on other sites
· #9 Posted 10 Dec 2013 Translated in French : http://www.maxthon-fr.com/forum/index.php?showtopic=9089 Share this post Link to post Share on other sites
· #10 Posted 14 Dec 2013 Hey, 大笨狗 Any Idea how to move the favorites to the window frame?? Share this post Link to post Share on other sites
· #11 Posted 14 Dec 2013 TomHatz replied at 2013-12-14 11:40 Hey, 大笨狗 Any Idea how to move the favorites to the window frame?? Do you mean both tab bar and favorites bar in the window caption area? Share this post Link to post Share on other sites
· #12 Posted 15 Dec 2013 YES I have condensed my favorites to three folders. I like to move them to the window caption area (I call it the window frame). When Maxthon is maximized it should appear on the far right of the Tab bar. Next to the minimize button. When Maxthon is not maximized it should be just on the far right of the tab bar. I tried to attach two pics. Thank you. Share this post Link to post Share on other sites
· #13 Posted 15 Dec 2013 TomHatz replied at 2013-12-14 19:14 YES I have condensed my favorites to three folders. I like to move them to the window caption area ( ... Try this: 5285 Share this post Link to post Share on other sites
· #14 Posted 15 Dec 2013 My dear friend your test skin is exactly what I needed. Thank you SO MUCH... Share this post Link to post Share on other sites
· #16 Posted 5 Jan 2014 i remove scrollbar from index.htm (i dont like it) but now i got something wrong, pages not get smaller like in orginal mahxton just hide in right side can i somehow block it and make show this number page like in orginal my code i use: { overflow-x: hidden-scroll;} .tab { width: max-intrinsic !important; max-width: 500 !important; assigned!: self.start-timer(200); } .tab-container .text { max-width: max-intrinsic;} Share this post Link to post Share on other sites
· #17 Posted 6 Jan 2014 Just remove the entire style. Share this post Link to post Share on other sites
· #18 Posted 6 Jan 2014 i dont know how or why but still not working include my skin you see its not working skin.mxskinskin2.mxskin Share this post Link to post Share on other sites
· #19 Posted 6 Jan 2014 somehow is still working (autoresizing) after leaving only this two lines: .tab { width: max-intrinsic !important; max-width: 555 !important; } but no "More Tabs button" when i remove this two lines everytnig is fine but no autoresize to test this two lines i put to\tabbar\container.css Share this post Link to post Share on other sites
· #20 Posted 6 Jan 2014 When you code: width: max-intrinsic !important; you told Maxthon this: "Dude, I don't want you to shrink my tabs anymore, leave the tab size as is", so the tabs overflow, and you can not see the overflowed tabs, until opened tabs reach a certain number(based on your screen width), the "more tabs" button appears. So, you have two options, either use the default behavior, or use a scroll bar, just like the first post of this tutorial. Share this post Link to post Share on other sites
· #21 Posted 6 Jan 2014 thank YOU i got third option - show "more tabs" button as soon as tab overflowed this can be best for me just where that could be that information? i look for container.css and container.menu.css cant find, somewhere else? Share this post Link to post Share on other sites
· #22 Posted 7 Jan 2014 Well, the "more tabs" button can not be displayed by a skin, it's controlled by Maxthon program. You can, however, display a tab list menu. For an example, you can take a look at my post "My Maxthon skin collection", skin number 4. Share this post Link to post Share on other sites
· #23 Posted 7 Jan 2014 two question its normal that right click on tab list menu not closing page? while changing pages in tab list menu, pages on tab bar not moving, that bad too and now the new tab button moved back to original position Share this post Link to post Share on other sites
· #24 Posted 7 Jan 2014 1. Yes, this menu can only switch tabs but not close them. 2. Tab bar will not move unless it is scrollable. Share this post Link to post Share on other sites
· #25 Posted 7 Jan 2014 what about this why i can block it (new tab button) when i remove autoresize, margin is good blocking, but when autoresize tabs its make problem and go under it Share this post Link to post Share on other sites
· #26 Posted 7 Jan 2014 Because it's overflowed, you should set {overflow-x: hidden;} in skin.css Share this post Link to post Share on other sites
· #28 Posted 8 Jan 2014 subgoku replied at 2014-1-8 03:03 not working This should work:.tab-container-inner { overflow-x: hidden; width: 100%%; } .tab-container .free-spacer { display: none; } .tab-container .tab { width: max-intrinsic !important; max-width: 555 !important; } Share this post Link to post Share on other sites
· #29 Posted 8 Jan 2014 hehe always problems, how yes its working wery nice but now when i double click on empty tab bar nothing happend without "overflow" in code double click open new tab, what i sometimes use, new tab button is for my friends skin, while they prefer to click Share this post Link to post Share on other sites
· #30 Posted 8 Jan 2014 Simple, in tabbar/container.htm, change to Share this post Link to post Share on other sites