Chrome Skin

xren · February 2009

If Tss reads this: please read my comment for your style Bookmarks: Home Button as Bookmarks Menu (GNOME)

Neiimad · February 2009

(I answered in his reviews)

xren · February 2009

For some reason your comment doesn't work for me..... :( Could you please explain here (with pics if possible)

Neiimad · February 2009

To have a "home button" containing bookmarks you just have to create a personal folder named, for the example, "Places" (think to capitalize the first letter).

Then find in the style :



#home-button {
  -moz-image-region: rect(0px 16px 14px 0px) !important;
  list-style-image: url("
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAABnRSTlMA/wAAAACkwsAdAAAACXBIWXMAAAsSAAALEgHS3X78AAABrUlEQVR42mP4z8CAFU2ZvRrODogpCkkog7Cxq54wZ5N/Qt2kRXsgXN+EhqjsTpwaJszZ4pvQGJw1OTJ/2rQl+4AifknN8QV92DUAVfskNAdlTYsoWhxTviy6aPbEpSeA4gm5DVg09M3Z5hvfHJg5Nbx4aXjpyoiyVVFlK6KK5k1edgyuBqG6e+Zmj5hG39TJQXkLgguXhhStAKNloYULQ3NnTlh8GEVD17Q1rhEVnom9vpmz/XMX+uUsCMxZCET+uYuB3MDc+UEZEyfP3wrV0D1lsUtIrltMo2fKZM/02T4Zs3wyZgSkTfVPnwpke2XMAwr6pU0KSakDqkQ4ySWq3j1pokfKNM+UiV0LTx2//rN3/mG3xAmuydPdUmZ5J/ej+8EhuNgxptMlvs8jrhUuaB9W7xjb7xg/2T2uA12DtU+WXVgLUI9HdA1c0MKv2Dq83S5mgkt0C7oGC8906+BGu8g2t8gquKCpZ45FSIt1ZK9jRCO6BhP3VIuAOqvQJseQUrigsXuGaWCDeWinbUgtugYj12QzvxqL4AbbwCK4oKFrmrF/nVlIh3VQNUQEAJP4BYD9OSSoAAAAAElFTkSuQmCC
") !important;
}

And add before :



.bookmark-item[label="Places"] .toolbarbutton-icon,

So you must have :



.bookmark-item[label="Places"] .toolbarbutton-icon,
#home-button {
  -moz-image-region: rect(0px 16px 14px 0px) !important;
  list-style-image: url("
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAABnRSTlMA/wAAAACkwsAdAAAACXBIWXMAAAsSAAALEgHS3X78AAABrUlEQVR42mP4z8CAFU2ZvRrODogpCkkog7Cxq54wZ5N/Qt2kRXsgXN+EhqjsTpwaJszZ4pvQGJw1OTJ/2rQl+4AifknN8QV92DUAVfskNAdlTYsoWhxTviy6aPbEpSeA4gm5DVg09M3Z5hvfHJg5Nbx4aXjpyoiyVVFlK6KK5k1edgyuBqG6e+Zmj5hG39TJQXkLgguXhhStAKNloYULQ3NnTlh8GEVD17Q1rhEVnom9vpmz/XMX+uUsCMxZCET+uYuB3MDc+UEZEyfP3wrV0D1lsUtIrltMo2fKZM/02T4Zs3wyZgSkTfVPnwpke2XMAwr6pU0KSakDqkQ4ySWq3j1pokfKNM+UiV0LTx2//rN3/mG3xAmuydPdUmZ5J/ej+8EhuNgxptMlvs8jrhUuaB9W7xjb7xg/2T2uA12DtU+WXVgLUI9HdA1c0MKv2Dq83S5mgkt0C7oGC8906+BGu8g2t8gquKCpZ45FSIt1ZK9jRCO6BhP3VIuAOqvQJseQUrigsXuGaWCDeWinbUgtugYj12QzvxqL4AbbwCK4oKFrmrF/nVlIh3VQNUQEAJP4BYD9OSSoAAAAAElFTkSuQmCC
") !important;
}

If you do as well and do not have other personal bookmarks in personal bar, it will simply look like the home button, and if you have other bookmarks, you'll have a personal bar containing the new "home button".

Sorry for no screenshot, but it works well, i tested it. More : i do the same to personalize my own folders you can see on the screenshot ;)

Tss · February 2009

Hey guys, I trying to do it too, but for me it´s not as easy as it seems...
The way Neiimad suggested works, but the button spacing doesn't seem right, specially if it's on the menubar, where it is supposed to be.

Tss · February 2009

Until now, the best I could do was:
.bookmark-item[label="Places"] .toolbarbutton-icon
{-moz-image-region: rect(0px 16px 16px 0px) !important;
list-style-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAOCAIAAACpTQvdAAAABnRSTlMA/wAAAACkwsAdAAAACXBIWXMAAAsSAAALEgHS3X78AAABrUlEQVR42mP4z8CAFU2ZvRrODogpCkkog7Cxq54wZ5N/Qt2kRXsgXN+EhqjsTpwaJszZ4pvQGJw1OTJ/2rQl+4AifknN8QV92DUAVfskNAdlTYsoWhxTviy6aPbEpSeA4gm5DVg09M3Z5hvfHJg5Nbx4aXjpyoiyVVFlK6KK5k1edgyuBqG6e+Zmj5hG39TJQXkLgguXhhStAKNloYULQ3NnTlh8GEVD17Q1rhEVnom9vpmz/XMX+uUsCMxZCET+uYuB3MDc+UEZEyfP3wrV0D1lsUtIrltMo2fKZM/02T4Zs3wyZgSkTfVPnwpke2XMAwr6pU0KSakDqkQ4ySWq3j1pokfKNM+UiV0LTx2//rN3/mG3xAmuydPdUmZ5J/ej+8EhuNgxptMlvs8jrhUuaB9W7xjb7xg/2T2uA12DtU+WXVgLUI9HdA1c0MKv2Dq83S5mgkt0C7oGC8906+BGu8g2t8gquKCpZ45FSIt1ZK9jRCO6BhP3VIuAOqvQJseQUrigsXuGaWCDeWinbUgtugYj12QzvxqL4AbbwCK4oKFrmrF/nVlIh3VQNUQEAJP4BYD9OSSoAAAAAElFTkSuQmCC") !important;
margin-top: 3px !important ;}

It's almost there, but needs some polish. The hover effect is not right, and the icon is not centered...

Neiimad · February 2009

In fact, i ruled it directly in the style (I just had to set margins (and few fixes for popup) into the style), as it you don't have to load the icon twice...

Tss · February 2009

Neiimad, this is how it looks now, with the real "Home" button on the left for comparison.:
http://img88.imageshack.us/my.php?image=1crep1.png
Seems a bit "squished"...
This is with the code in the comment above (which I edited, by the way):
http://img88.imageshack.us/my.php?image=2cros4.png
There's still a 1px line in the right that is brighter than the rest, but that's all.

Tss · February 2009

But for this you must declare ".bookmark-item..." separated from "#home-..."

Neiimad · February 2009

The height is now the same, the margins left-right too. In fact, the home icon width is impair and the button width is pair, so 1px on the right is normal. The icon must be remade now.

It's ok now. Icon remade = centered vertically and horizontally.

xren · February 2009

Icon buttons seems to be smaller than url-bar height. I think this is not right
Image Hosted by ImageShack.us

Neiimad · February 2009

Yep, it is not right. On my FF (3.0.5 on XP) they have the same size (other styles desactivated).

And in the style they even are set with :

min-height: 22px !important;
max-height: 22px !important;

So it's strange... Are you sure another style doesn't modify them ? (be ensured to have the last version of )

xren · February 2009

Well, I'm sure that not other styles modifies these buttons.
I found out that the button's size is OK IF you place them in Menu Toolbar. The screenshot that I sent before - was for Navigation Toolbar

Neiimad · February 2009

Aaaaah okay, thx to have precised (because your navbar is under the tabs so...) ;)

I'll check that...

Ok, checked, and that's really as you said.

Going to fix this.

It's ok now on all bars.

I'll test on a custom bar... i don't think it will be good ^^'

Size is good on custom bar, but not the margins...

Fixing.

Buttons are OK on every bars.

The bookmarks too.

xren · February 2009

Thanks for the fix!

(Damn, you ARE fast! :] )

xren · February 2009

Well, I've got strange problem which I have on one computer and don't on another (all other styles are the same):

The next "problem" is not computer-specific (happens on any computer) - take a look at arrow pointing to new tab's position:

And another "problem" - I can see "white space" above new-tab button:

Neiimad · February 2009

For the firts problem, it's quite strange. I can see the margins of tabs if there is something to fix.

EDIT: Can you check it now please ?

Then, i don't know how to modify the arrow showing tab position :/ I will try to find how to set it but... Where ? ^^' DOMdomdom...

The white space is normal, it is on the scroll buttons too, to make relief.

xren · February 2009

Well, the first problem is now fixed! Thanks! :)

I don't know about the arrow either... probably it can not be fixed at all....

I didn't understand your answer about the white space above new-tab icon: I don't see white space on scroll buttons :)

EDIT:
Oh! There is another "BUG-REPORT" :) If you move your mouse over scroll buttons blue triangles disappear....

ChoGGi · February 2009

try this for the tab arrow.tab-drop-indicator{position:fixed!important;top:0!important;z-index:9!important}

Neiimad · February 2009


.tab-drop-indicator {
  position: absolute !important;
  z-index: 100 !important;
  margin-top: -65px !important;
}

Thx ChoGGi :)

(I had found the tab drop indicator last night and set it with this code and yours looks like it, so i'm sure it's okay :P)

xren · February 2009

Yeap, the fix works!

What about:

Neiimad · February 2009

Okay Xren.

I'll try to do anything else... Can you tell me what are the different cfg you use ? xp vs vista ? firefox 3.0.x ? to be able to have this bug too and to see how to solve it...

xren · February 2009

Sorry for my misunderstanding. I thought that you posted the update for the bug that I reported the last... The .tab-drop-indicator is fine now!!!

Neiimad · February 2009

The scroll button down hovered is now ok.

I don't have found how to fix the problem of the tab you reported because i can't see the result myself :s
I can just ask you to test at each modif'...

I have maked one. If you can tell me..?

xren · February 2009

Ok, the problem is fixed for right-scroll button. But the same problem is still with left-scroll button

Neiimad · February 2009

In fact the left scroll button is ok since this morning. I update if i have forgotten to do this.

Well, the update is not done, it means i've done it finally ;)

xren · February 2009

Hey?!
Did you try to type any address into URL bar and hit Enter????? Browser doesn't do anything at all !

Not even saying that these "clear textboxes" buttons have not Chrome-like look (they are grey! not light-blue)...... :(

xren · February 2009

Hmmmmm.... As for me, I don't like the change when you made it toooooooooo compact. Right now user can easily "mis-click" the button... :(

qwertz · February 2009

That's easily fixed, change the margins under:


toolbox#navigator-toolbox toolbarbutton
toolbox#navigator-toolbox toolbarbutton .toolbarbutton-icon
#unified-back-forward-button #back-button

to your liking.

I'm currently experimenting with color schemes. It really is a nice style, to integrate with your desktop theme.

Btw, is it possible to remove the close button from faviconized tabs?

xren · February 2009

Well, it is surely possible. But Neiimad styled the tab in a way, that close button is a part of it. So, it is pain in a butt to change it.

Howdy, Stranger!

Categories

Chrome Skin

Comments

Howdy, Stranger!

Quick Links

Categories

Chrome Skin

Comments