Archived

This topic is now archived and is closed to further replies.

ltGuillaume

OneBar: minimal amount of changes to default skin for single-line toolbar

31 posts in this topic

Inspired heavily by Marsealdelo's Fastwork skin (to whom all deserved credits should go), I tried to make a minimal set of overrides to the default skin in order to achieve largely the same results, but without some compromises Marsealdelo chose to make.

Differences:

Favorites bar can be enabled

Only two HTML files changed and one CSS to override some styles

You can use the Quick Tools

All address bar fancyness (RSS, security, Reader mode, Ad blocker, switch core) can still be used.

New version (March 7, 18:00 UTC/GMT):

Address bar auto-expands when it gets focus (click, or ALT-D)

Includes CSS to change the Favorites bar background color if you want to

Menu button properly aligned (was missing left border on hovering)

Adjusted Favorites bar height and button alignment

New version (March 9, 6:00 UTC/GMT):

When you have many tabs opened (so there's no space to the right), you can still drag the window with the separator next to the main menu button, or with the empty space next to the New Tab button

Realigned private mode indicator

New version (March 24, 16:30 UTC/GMT):

Saved a bit of horizontal space with/around New Tab button

Alternative version (March 24, 16:30 UTC/GMT):

Locked tabs only show the favicon (no lock indicator, no title) and have minimal width (see http://forum.maxthon.com/thread-9141-1-1.html)

New version (April 15, 22:30 UTC/GMT):

Removed Refresh button for more horizontal space: use F5, or Shift+F5 to refresh all tabs, and Ctrl+F5 to force refresh

Removed Favorites button (when Favorites bar off): just use default keyboard shortcut Ctrl+B, or set a more ergonomic shortcut, like Alt+A

New version (April 21, 01:00 UTC/GMT):

Fixed private mode indicator position

Turns out I did like the Favorites button: reintroduced

Width of navigation buttons slightly altered for more horizontal space.

New version (April 21, 15:30 UTC/GMT):

Gained another 2 (!) pixels vertically, hurray! :p

Dirty fix for navigation buttons not showing up in W8, possibly Vista/W7 (there's something wrong with it when the opacity is <1 since Maxthon v4.4.0.2000). Thx2 大笨狗

New version (April 29, 8:45 UTC/GMT):

Made resizing of window easier (hit-margin expanded)

New version (June 5, 19:00 UTC/GMT):

Little fix needed for Maxthon v4.4.1.1000

Additionally, I found a problem with the Fastwork skin when trying to use a custom search engine via its keyword (e.g. "g search terms"): Maxthon v4.3.1.2000 crashed.

The skin can be downloaded here: https://db.tt/5PPovUia

Alternative "small locked tabs" version: https://db.tt/cE0J1Xj4

Tip: to save some horizontal space, you might want to edit Maxthon\Language\en.ini to make the Reader Mode button smaller. Change it into something likeReaderMode.Available=Reador you could even make it 'button-only' by putting only a space there (although the tooltip is gonna be blank then, too).

post-30200321-14315117866485_thumb.png

post-30200321-14315117914006_thumb.png

post-30200321-1431511791648_thumb.png

Share this post


Link to post
Share on other sites

@SnowLeopard: yes, if you unpack the skin, it's easy to uncomment the lines for the downloader button so it shows up again (in main\navbar\realindex.htm). As for reducing the height, it's possible, and I've thought about it, but it would mean only so few extra pixels for the webpages that I thought it wasn't worth the trouble. Besides, it would make it a bit annoying to hit the right button quickly on smaller screens / (my) touch screens.

Oh, and if someone doesn't like the toolbar's background color, this is the one to change:body {

background-color: #D3D3D3;

Share this post


Link to post
Share on other sites

You can also modify the layout.htm and acheive the same result without touching any files in navbar / tabbar folder.

And here are some suggestions:

The favorites bar, when shown, should be same background color as top toolbar.

The address box width is too small in a narrow screen, maybe it should change to full size when you click and type in it. (By hiding the tabs, because when you type, you don't need to use the tab bar)

Share this post


Link to post
Share on other sites

Yes I reckon that would work really nice as well. But it would mean that I would have to import the whole changed file instead of including it like this and I like the idea of being able to do a quick side by side comparison of the files with the original. It's always possible that in a new Maxthon version some new stuff shows up in those files within ui.dat and this way an easy comparison can be done.

I thought the Favorites bar looked ok, as sort of an extension of the currently active tab, but I guess you're right, in the long run it might distract a bit too much.

As for the address bar, that's a great point. I'll try and think of something there.

Share this post


Link to post
Share on other sites

I tried making the address bar expand when focused, but I can't get it working properly. Any ideas?

I tried regular :hover, but that's annoying, especially since I can't use any "transition: width .5s linear 1s;"-like delay.

I saw the focus-on! : ... at some places, but I really can't get it working properly to then change the width... Would be great if I got some help here.

I uploaded the .mxskin with a quick :hover fix and an alignment fix for the separator in the Favorites bar. For changing the color of the Favorites bar, I added the CSS code, but it's commented, because I don't like it. Download link in first post.

Share this post


Link to post
Share on other sites

Thank you and it does fix the problem with using alias for search found in 大笨狗's fastwork(although I hadn't noticed it before.)

Edit : Address bar seems to be working fine, hover DOES expand it for me....????? Oh, you fixed it :)

Share this post


Link to post
Share on other sites

I think the current implementation is better now: only on focus (click) in the address bar, it expands. Doesn't matter where the mouse is now, a lot easier. Is this ok for you?

Share this post


Link to post
Share on other sites

Oof, little glitch with the right margin of the tabbar when maximized. Fixed.

Share this post


Link to post
Share on other sites

Split screen is dependent on tools and buttons you are showing, the split window is to the right of the tool bar so if all are showed the split screen is off center.

Edit4 Ah, you can hide most of them and they still show in drop down :)

I haven't tried your latest update yet...

Edit: I also prefer click over hover option, makes address bar buttons(mode, proxy, adhunter{status bar disabled}) easier to access.

*No idea what the tab glitch was :) Ah, I think I liked your glitch better, it allowed easy movement of browser even with a lot of tabs. Not easy to move if you have many tabs open while in restore mode(actually it is nearly impossible)

7085

Edit: 2 You'll notice a few issues in split screen mode, number of tabs become hidden and inaccessible in the left pane, the right pane seems to work properly

P.S., Not trying to be an a$$, otherwise this skin is very usable :)

7083

post-7385961-14315117894108_thumb.jpg

post-7385961-14315117894354_thumb.jpg

Share this post


Link to post
Share on other sites

joemax replied at 2014-3-7 07:59 back.gif

Split screen is dependent on tools and buttons you are showing, the split window is to the right of ...

I'm glad you're helping out, no worries!

The empty space between the tabs and the min/max/close buttons didn't show up when NOT maximized, so I don't think the glitch helped you drag the window. I added a few pixed to the top in order to make dragging easier. These pixels only show up when the window is not maximized.

When I compared the issue from your screenshot with the default Maxthon skin, these things also showed up, depending on how many tabs and/or how big your window is. I'm afraid this has to be fixed in the official skin. There's only one difference that I saw, namely that the tabs bar split and the actual page split don't align, but that isn't a bad thing, because it mitigates the problem of your screenshot to some extent.

Share this post


Link to post
Share on other sites

When I compared the issue from your screenshot with the default Maxthon skin, these things also showed up, depending on how many tabs and/or how big your window is.

Actually, it doesn't, it handles them properly, at least mine does.

Ah you're right, I see the problem when restoring to a smaller size.

I also don't mind the screen bar as long as I can move it. I can still use it(your skin) most of the time, I only have that many tabs open once or twice a day, and then rarely in split screen with that many open. Thanx again

Share this post


Link to post
Share on other sites

How about this now? You can now drag the window by the separator between the main menu button and the back button. I think it's easy to do and this way the basic goal of the skin (gain vertical space) doesn't have to be compromised.

Share this post


Link to post
Share on other sites

ltGuillaume replied at 2014-3-7 10:08 back.gif

How about this now? You can now drag the window by the separator between the main menu button and th ...

Well that is simply grand :) So easy, thank you very much, works beautifully! :) I don't think I've ever seen separator used to move, very clever ! :)

Share this post


Link to post
Share on other sites

ltGuillaume replied at 2014-3-7 08:48 back.gif

I'm glad you're helping out, no worries!

The empty space between the tabs and the min/max/close b ...

i've used your skin, both the original and the recent modification. It's a nice skin, although I do often have five to six tabs open, sometimme more. But sit sstill seems to work.

However, in the recent change I'vee encountered a problem with the taab sidth.

If I have a single tab open (a new Tab specifically), then click in the addressbar to give it focus, then take focuss away, the New Tab shifts to the right as the address ezpands and then the New Tab widens as it's left edge, but not its right edge follows the collapse of the addresssbar.

Here is a screen shot showing the excessively wide tab result. I haven't found a resoluution to this myself, but wanted you to know about it.

7102

Thanks for leaving the downloader code in place, I've restored it to my OneBar skin.

I also have a question related to your skin. Maybe yoou can offer a tip or two.

I like the slim height of your addressbar. My question is how did you achiive this narrow height. The

"min-height: 10;" doesn't work for me in another sskin. So that isn't all there is tr it. What else did you do to force the height reduction?

>

post-17653568-1431511791091_thumb.png

Share this post


Link to post
Share on other sites

@joemax: yeah I thought it would make everything on the bar functional, kinda cool :D

@SnowLeopard: hmz, I can't really reproduce that, just like joemax... Makes it pretty much impossible to troubleshoot it. Bear in mind, though, that the code concerning the tab width is entirely from the default Maxthon skin (it's not even in the .mxskin file at all), and since I'm a minimalist :o, I wouldn't really like to change a lot of code in that respect. As it says in the title, this really is the minimal set of changes to get a single-toolbar UI. As a result, it should have no problems with new Maxthon versions and default skin changes. Of course, you're more than welcome to try to make it yourself. :)

With respect to the height:

/* main/layout.css */

.mainframe {

margin-top: 1px;

}

/* main/navbar/addressbox.css */

.address-box {

min-height: 10px;

}

/* main/navbar/buttons.css */

.nav-buttons .item{

margin: 0 0 1 0;

min-height: 15px;

}

/* main/tabbar/index.css */

.tabbar {

margin-bottom: -1px;

}

That's it.

Can anyone provide me with a not-too-wide screenshot of the skin within Windows 7 for the first post?

Share this post


Link to post
Share on other sites

ltGuillaume replied at 2014-3-8 10:05 back.gif

@joemax: yeah I thought it would make everything on the bar functional, kinda cool

@SnowLeopard: ...

How's this one for you?

7105

Regarding useing the space of the separatror next to the Main Menu to move the window, I've found that it is vvery touchy to do so, but you can do it if you hit the top 4 or so px of the margin. But I've found that the same can be done wwith the margin space between the New Tabd button and the tabs or b etweenn it and the Min button. Just avoind having any button hovered.

With the 4px 4px mainfram margin I could do it prettey much anywhere along the top save for the SearchBox. and the tab s

I';m just observing not sugges3ting a change.

>

post-17653568-14315117911258_thumb.png

Share this post


Link to post
Share on other sites

SnowLeopard replied at 2014-3-8 07:56 back.gif

i've used your skin, both the original and the recent modification. It's a nice skin, although I ...

Ah, I'm seeing this when coming out of split screen mode, happens every time and I haven't been able to replicate with default skin. Quite sure it wasn't happening with previous releases.

7106

and a screenie for win8 if you're interested

7107

post-7385961-143151179138_thumb.jpg

post-7385961-14315117913914_thumb.jpg

Share this post


Link to post
Share on other sites

Thanks both, that was fast! I already had a Win8 screenshot, thanks anyway :)

I can't think of any change that introduced this problem, though. I'll have a look at it IF it turns up here. Cheers!

Share this post


Link to post
Share on other sites

Minimal change: When you have many tabs opened (so there's no space to the right), (you can still drag the window with the separator next to the main menu button,) or the private mode indicator. Furthermore, I realigned private mode indicator, with which we even gained an extra pixel in height for the web pages, hurray! :p

Share this post


Link to post
Share on other sites

ltGuillaume replied at 2014-3-8 21:13 back.gif

Minimal change: When you have many tabs opened (so there's no space to the right), (you can still dr ...

There is another place in the toolbar where you can move the window, the space between the NetTab button and the right-most tab. You do need to grip it near the top. Using the separator seems to work regardless of where you grip it vertifally.

I can also grip it near the top between the NewTab button and the Min window control button, but it takes great care to hit the top area without activating either buttro. There is still a small space, but it's less praactical than the other two places.

>

Share this post


Link to post
Share on other sites

joemax replied at 2014-3-9 07:02 back.gif

Yep, see this post http://forum.maxthon.com/forum.php?mod=redirect&goto=findpost&ptid=8774&pid=486 ...

I don't find the area above the QuickTools very difficult at all ... about as easy as hitting the separator. The sreas at the left and right ends of the addressbar may be a bit harder; but none compare to the touchiness of hitting the area between NewTab and Min buttons with lots of tabs.

EDIT: I did find all of the areas (separator, left and right ends of addressbar,, the margin between NewTab and the lst tab all impossible IF YHE WINDOW IS MAXIMIZED. They work find when not maximized.

EDIT2: No, it's possible to maximize and minimize by gripping easily gripable areas and moving the window to the top or pulling it away from the top. The unfilled tabbar area works but the separator doesn't work in maximized stater. I think maybe the area over the QuickTools buttons and the separator may become too small or change its properties to do this reliably. >

Share this post


Link to post
Share on other sites

About SnowLeopard's EDIT2: Hmz, I don't think I can do anything about that, sorry. Hope you don't mind restoring the window first or using the areas you described that do work. I think those clear spaces that work are seen as part of the Windows title bar, whereas the objects like the separator and the privacy indicator are obviously not.

Share this post


Link to post
Share on other sites

Added alternative version: locked tabs only show the favicon (no lock indicator, no title) and have minimal width.

Share this post


Link to post
Share on other sites

ltGuillaume replied at 2014-3-24 03:08 back.gif

Added alternative version: locked tabs only show the favicon (no lock indicator, no title) and have ...

Please consider a new thread for "Locked Tab", otherwise it will get lost and won't be seen. Many have asked for this feature!

@ItGuillaume, thanx for new thread :)

Share this post


Link to post
Share on other sites

Very nice! I am just coming to Maxthon from Firefox, and was looking for the equivalent of the Firefox 'HideTitleBar' addon.

This almost saves as much screen space...one small quibble, is there a way to make the tab sizes either fit the tab title, or just hard code a smaller value?

I unpacked the source...I see this in the .ini file:

;; maxTabWidth = max-tab-width,max-tab-width+padding

maxTabWidth = 220,232

tabSpacerWidth = 54

is that what needs to change?

Thanks for the great skin!

Share this post


Link to post
Share on other sites

Oh, one other small nit...would it be easy to remove the refresh and favorite icons? I never use the refresh button (F5 does that), and have no need of the favorites button on the toolbar.

Thanks again!

Share this post


Link to post
Share on other sites

mcrin replied at 2014-4-10 15:54 back.gif

Oh, one other small nit...would it be easy to remove the refresh and favorite icons? I never use th ...

You're right, there are nice shortcuts for that. I like the right-mouse function of previous/next, so I'm gonna leave those buttons in. Check for updated version. And if you want even more horizontal space, check the alternative version: http://forum.maxthon.com/thread-9141-1-1.html

Tip: to save some horizontal space, you might want to edit Maxthon\Language\en.ini to make the Reader Mode button smaller. Change it into something likeReaderMode.Available=Reador you could even make it 'button-only' by putting only a space there (although the tooltip is gonna be blank then, too).

Share this post


Link to post
Share on other sites

Need some help with the skin here. In Windows 8.1, with the latest stable 4.4.0.2000, the navigation buttons won't show, BUT THEY DO when hovered over...

Even when I removed any CSS changes from the skin completely, they still won't show up.

Does work in XP. Old versions of this skin have the exact same issue now.

Edit: Dirty fix introduced in new version (15:30).

post-30200321-14315118797699_thumb.png

Share this post


Link to post
Share on other sites