Tutorial: How to modify default skin and make your tab bar more user friendly.


Recommended Posts

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:



Link to comment
Share on other sites

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:


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.


Link to comment
Share on other sites


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

  • 2 weeks later...

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

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

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

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