Sign in to follow this  
Followers 0
大笨狗

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

50 posts in this topic

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

post-14548223-14315114875561_thumb.gif

Share this post


Link to post
Share on other sites

thank you !:)

sigmax.png

Share this post


Link to post
Share on other sites

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

More please ????

Share this post


Link to post
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:

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

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

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

Hey, 大笨狗

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

Share this post


Link to post
Share on other sites

TomHatz replied at 2013-12-14 11:40 back.gif

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

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.

post-352841-14315115090821_thumb.png

post-352841-14315115092404_thumb.png

Share this post


Link to post
Share on other sites

TomHatz replied at 2013-12-14 19:14 back.gif

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

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

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

post-17650688-14315115577036_thumb.jpg

Share this post


Link to post
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

post-17650688-14315115584294_thumb.jpg

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

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

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

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

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

post-17650688-14315115612043_thumb.jpg

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

subgoku replied at 2014-1-8 03:03 back.gif

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

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
Sign in to follow this  
Followers 0