大笨狗 Posted December 6, 2013 Report Share Posted December 6, 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 Link to comment Share on other sites More sharing options...
-ody- Posted December 6, 2013 Report Share Posted December 6, 2013 thank you ! Link to comment Share on other sites More sharing options...
eshaun Posted December 6, 2013 Report Share Posted December 6, 2013 Very clear indtructions. Even penguins can undestand that. Well done that guy. More please ???? Link to comment Share on other sites More sharing options...
Mhzayer Posted December 6, 2013 Report Share Posted December 6, 2013 WTG Brother Nice Work Link to comment Share on other sites More sharing options...
SnowLeopard Posted December 7, 2013 Report Share Posted December 7, 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 Link to comment Share on other sites More sharing options...
TomHatz Posted December 9, 2013 Report Share Posted December 9, 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!! Link to comment Share on other sites More sharing options...
Blinderson Posted December 10, 2013 Report Share Posted December 10, 2013 Thanks; I was wondering how to get those working! Link to comment Share on other sites More sharing options...
BugSir Posted December 10, 2013 Report Share Posted December 10, 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! Link to comment Share on other sites More sharing options...
Ldfa Posted December 10, 2013 Report Share Posted December 10, 2013 Translated in French : http://www.maxthon-fr.com/forum/index.php?showtopic=9089 See ya, Ldfa. Link to comment Share on other sites More sharing options...
TomHatz Posted December 14, 2013 Report Share Posted December 14, 2013 Hey, 大笨狗 Any Idea how to move the favorites to the window frame?? Link to comment Share on other sites More sharing options...
大笨狗 Posted December 14, 2013 Author Report Share Posted December 14, 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? Link to comment Share on other sites More sharing options...
TomHatz Posted December 15, 2013 Report Share Posted December 15, 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. Link to comment Share on other sites More sharing options...
大笨狗 Posted December 15, 2013 Author Report Share Posted December 15, 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 Link to comment Share on other sites More sharing options...
TomHatz Posted December 15, 2013 Report Share Posted December 15, 2013 My dear friend your test skin is exactly what I needed. Thank you SO MUCH... Link to comment Share on other sites More sharing options...
Pedromull Posted December 30, 2013 Report Share Posted December 30, 2013 Nice well described. Link to comment Share on other sites More sharing options...
subgoku Posted January 5, 2014 Report Share Posted January 5, 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;} Link to comment Share on other sites More sharing options...
大笨狗 Posted January 6, 2014 Author Report Share Posted January 6, 2014 Just remove the entire style. Link to comment Share on other sites More sharing options...
subgoku Posted January 6, 2014 Report Share Posted January 6, 2014 i dont know how or why but still not working include my skin you see its not working skin.mxskinskin2.mxskin Link to comment Share on other sites More sharing options...
subgoku Posted January 6, 2014 Report Share Posted January 6, 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 Link to comment Share on other sites More sharing options...
大笨狗 Posted January 6, 2014 Author Report Share Posted January 6, 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. Link to comment Share on other sites More sharing options...
subgoku Posted January 6, 2014 Report Share Posted January 6, 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? Link to comment Share on other sites More sharing options...
大笨狗 Posted January 7, 2014 Author Report Share Posted January 7, 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. Link to comment Share on other sites More sharing options...
subgoku Posted January 7, 2014 Report Share Posted January 7, 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 Link to comment Share on other sites More sharing options...
大笨狗 Posted January 7, 2014 Author Report Share Posted January 7, 2014 1. Yes, this menu can only switch tabs but not close them. 2. Tab bar will not move unless it is scrollable. Link to comment Share on other sites More sharing options...
subgoku Posted January 7, 2014 Report Share Posted January 7, 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 Link to comment Share on other sites More sharing options...
大笨狗 Posted January 7, 2014 Author Report Share Posted January 7, 2014 Because it's overflowed, you should set {overflow-x: hidden;} in skin.css Link to comment Share on other sites More sharing options...
subgoku Posted January 8, 2014 Report Share Posted January 8, 2014 not working Link to comment Share on other sites More sharing options...
大笨狗 Posted January 8, 2014 Author Report Share Posted January 8, 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; } Link to comment Share on other sites More sharing options...
subgoku Posted January 8, 2014 Report Share Posted January 8, 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 Link to comment Share on other sites More sharing options...
大笨狗 Posted January 8, 2014 Author Report Share Posted January 8, 2014 Simple, in tabbar/container.htm, change to Link to comment Share on other sites More sharing options...
Recommended Posts