My simple readable transparent style
My simple readable transparent style
I make my first browser style (optimized for pale moon).
More screens:
Normal: http://s.gullipics.com/image/s/o/2/6t6i ... normal.png
Inactive: http://s.gullipics.com/image/3/a/x/6t6i ... active.png
Tabbar: http://s.gullipics.com/image/0/c/i/6t6i ... tabbar.png
Tab hover: http://s.gullipics.com/image/r/6/7/6t6i ... bhover.png
Newtab hover: http://s.gullipics.com/image/j/g/2/6t6i ... nhover.png
Fullscreen normal: http://s.gullipics.com/image/y/5/6/6t6i ... normal.png
Fullscreen inactive: http://s.gullipics.com/image/p/f/0/6t6i ... active.png
Fullscreen tabs on top: http://s.gullipics.com/image/2/6/g/6t6i ... sontop.png
Navbar buttons: http://s.gullipics.com/image/a/q/k/6t6i ... uttons.png
Stylishlink: http://userstyles.org/styles/69771
Have fun
More screens:
Normal: http://s.gullipics.com/image/s/o/2/6t6i ... normal.png
Inactive: http://s.gullipics.com/image/3/a/x/6t6i ... active.png
Tabbar: http://s.gullipics.com/image/0/c/i/6t6i ... tabbar.png
Tab hover: http://s.gullipics.com/image/r/6/7/6t6i ... bhover.png
Newtab hover: http://s.gullipics.com/image/j/g/2/6t6i ... nhover.png
Fullscreen normal: http://s.gullipics.com/image/y/5/6/6t6i ... normal.png
Fullscreen inactive: http://s.gullipics.com/image/p/f/0/6t6i ... active.png
Fullscreen tabs on top: http://s.gullipics.com/image/2/6/g/6t6i ... sontop.png
Navbar buttons: http://s.gullipics.com/image/a/q/k/6t6i ... uttons.png
Stylishlink: http://userstyles.org/styles/69771
Have fun
Last edited by dark_moon on 2012-07-21, 21:31, edited 1 time in total.
Re: My simple readable transparent style
That's pretty good, however, overall some the style is difficult to read and the address bar is almost impossible - I have the links showing on hover in the address bar and cannot see them (black desktop background).
Last edited by Rohugh on 2012-07-21, 21:06, edited 1 time in total.
Re: My simpe readable transparent style
Thanks.
Hmm i have the links too in the adress bar and i can read this:
You can change the textcolor under statusbar-settings -> adressbar -> color
I use grey
Hmm i have the links too in the adress bar and i can read this:
You can change the textcolor under statusbar-settings -> adressbar -> color
I use grey
Re: My simple readable transparent style
http://img225.imageshack.us/img225/9425 ... 140309.jpg
What about the colour of the address itself, the options menu changes only that of the hover over link. (That screen has a dark grey Persona enabled but it is not significantly better with a black background.)
What about the colour of the address itself, the options menu changes only that of the hover over link. (That screen has a dark grey Persona enabled but it is not significantly better with a black background.)
Last edited by Rohugh on 2012-07-21, 21:05, edited 1 time in total.
Re: My simpe readable transparent style
The theme change the adress color to grey.
Or what do you mean?
And yes, the menu changes only the hover over link color.
No i dont have a grey persona enabled. Just set the windows aero glass to black
Or what do you mean?
And yes, the menu changes only the hover over link color.
No i dont have a grey persona enabled. Just set the windows aero glass to black
Re: My simple readable transparent style
OK. Had a play but it doesn't give a high enough contrast for me (old eyes). Nice theme though.
Last edited by Rohugh on 2012-07-21, 21:05, edited 1 time in total.
Re: My simpe readable transparent style
Maybe you explain what changes you need and i will see
Re: My simple readable transparent style
I like the inactive tabs just showing without the tab edge, I have seem a similar idea somewhere else, on that UX theme - Australis or something, but it is good. I personally could do with the text on the tabs and in the address bar being brighter, perhaps a semi-bold font and the contrast a bit more to white so it stands out a bit more.
The style works well and I have seen no glitches or problems so far.
The style works well and I have seen no glitches or problems so far.
Last edited by Rohugh on 2012-07-21, 21:05, edited 1 time in total.
Re: My simpe readable transparent style
Ok i poste the code, so you can change this to your settings.
Change the line 13 to this:
.tabbrowser-tab:not([selected]) .tab-text{opacity:.9;color:white;font-weight:600}
And the line 14 to this:
.tabbrowser-tab[selected="true"] .tab-stack{opacity:.9;color:white;font-weight:600}
Hope this settings are better for your eyes.
Change the line 13 to this:
.tabbrowser-tab:not([selected]) .tab-text{opacity:.9;color:white;font-weight:600}
And the line 14 to this:
.tabbrowser-tab[selected="true"] .tab-stack{opacity:.9;color:white;font-weight:600}
Hope this settings are better for your eyes.
Re: My simple readable transparent style
Perfect. Thanks
Is there a way to "un-grey" the section of the address bar. With the hover-over link set to show in the right of the address bar the whole url "un-greys" but if you set the hover-over to show in a pop up it doesn't effect the url bar content at all.
Edit: Nevermind, sorted it in about:config.
Is there a way to "un-grey" the section of the address bar. With the hover-over link set to show in the right of the address bar the whole url "un-greys" but if you set the hover-over to show in a pop up it doesn't effect the url bar content at all.
Edit: Nevermind, sorted it in about:config.
Re: My simpe readable transparent style
No problem
Yes there is a way to un-grey the adressbar. Change line 34 to:
#urlbar{background:none!important;border:none!important;color:white!important;opacity:.9}
But this dont change the hover-over from the integrated statusbar addon.
Nice what you like my theme (now) ^^
Yes there is a way to un-grey the adressbar. Change line 34 to:
#urlbar{background:none!important;border:none!important;color:white!important;opacity:.9}
But this dont change the hover-over from the integrated statusbar addon.
Nice what you like my theme (now) ^^
Re: My simpe readable transparent style
I like your theme a lot now, we all like slightly different set-ups so thanks for your help.
My top bar looks like this now.
My top bar looks like this now.
Re: My simpe readable transparent style
Thank you.
Nice, this is my top bar
Edit: Lol now i see i misstyped the thread name. I change it to "My simple ...
Nice, this is my top bar
Edit: Lol now i see i misstyped the thread name. I change it to "My simple ...
Re: My simple readable transparent style
I have just noticed that the bookmark star is missing from the right hand end of the address bar ( missing in your screenshot as well). I don't use it often but there are times when it is useful.
Re: My simple readable transparent style
If you need this, replace line 56 with this code:
#context-bookmarkpage,#context-sendpage,#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarklink,#context-sendlink,#context-searchselect,#context-sep-copyimage,#context-sendimage,#context-setWallpaper,#context-setDesktopBackground,#context-selectall{display:none!important}
#context-bookmarkpage,#context-sendpage,#context-back,#context-forward,#context-reload,#context-stop,#context-bookmarklink,#context-sendlink,#context-searchselect,#context-sep-copyimage,#context-sendimage,#context-setWallpaper,#context-setDesktopBackground,#context-selectall{display:none!important}
Re: My simple readable transparent style
Thank you, I have it back.
I don't need it as I can drag the tab into the bookmarks sidebar, I guess it is just easier when I want to temporarily store a page.
I don't need it as I can drag the tab into the bookmarks sidebar, I guess it is just easier when I want to temporarily store a page.
Re: My simple readable transparent style
Take a look at this scrollbar style (not from me) which is realy nice: http://userstyles.org/styles/62434/
But i chance line 5 to this value, because 5 pixel is very small.:
width:10px !important;
But i chance line 5 to this value, because 5 pixel is very small.:
width:10px !important;
Re: My simple readable transparent style
Yeah, nice, combines well with your transparent style. 7px is better for me - but it is all preferences.
Re: My simple readable transparent style
Here is an small update for my style.
What is new?
I change the tabview-button button to inverted. This is better for black themes
Before:
After:
Have fun with the update.: http://userstyles.org/styles/69771
And btw: Dont use the script, i posted above (http://userstyles.org/styles/62434) This destroy your browser design!
What is new?
I change the tabview-button button to inverted. This is better for black themes
Before:
After:
Have fun with the update.: http://userstyles.org/styles/69771
And btw: Dont use the script, i posted above (http://userstyles.org/styles/62434) This destroy your browser design!
Re: My simple readable transparent style
A small update.:
Small icons have now the inverted colors too.
Style: http://userstyles.org/styles/69771
Or just replace code line 28 at the beginnining with this:
#navigator-toolbox[mode=icons]
(before: #navigator-toolbox[size=large][mode=icons])
Small icons have now the inverted colors too.
Style: http://userstyles.org/styles/69771
Or just replace code line 28 at the beginnining with this:
#navigator-toolbox[mode=icons]
(before: #navigator-toolbox[size=large][mode=icons])