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

[大笨狗 4]

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

[-ody- 1,187]

thank you !

[eshaun 0]

Very clear indtructions. Even penguins can undestand that. Well done that guy.

More please ????

[Mhzayer 29]

WTG Brother

Nice Work

[SnowLeopard 210]

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

[TomHatz 1]

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!!

[Blinderson 11]

Thanks; I was wondering how to get those working!

[BugSir 0]

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!

[Ldfa 162]

Translated in French : http://www.maxthon-fr.com/forum/index.php?showtopic=9089

[TomHatz 1]

Hey, 大笨狗

Any Idea how to move the favorites to the window frame??

[大笨狗 4]

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?

[TomHatz 1]

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.

[大笨狗 4]

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

[TomHatz 1]

My dear friend

your test skin is exactly what I needed.

Thank you SO MUCH...

[Pedromull 0]

Nice well described.

[subgoku 3]

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;}

[大笨狗 4]

Just remove the entire style.

[subgoku 3]

i dont know how or why but still not working

include my skin you see its not working

skin.mxskin

skin2.mxskin

[subgoku 3]

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

[大笨狗 4]

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.

[subgoku 3]

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?

[大笨狗 4]

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.

[subgoku 3]

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

[大笨狗 4]

1. Yes, this menu can only switch tabs but not close them.

2. Tab bar will not move unless it is scrollable.

[subgoku 3]

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

[大笨狗 4]

Because it's overflowed, you should set {overflow-x: hidden;} in skin.css

[subgoku 3]

not working

[大笨狗 4]

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;

}

[subgoku 3]

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

[大笨狗 4]

Simple, in tabbar/container.htm, change

to