Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Mentor

Kyang

Posted
Posted

I can't use it as my scripts do not show up in it. This is do to the fact that I have altered scripts/combined some so in stylish none of them show up.

I'm not sure I follow what you mean by you, altered them, and now they don't show up.

Link to comment
Share on other sites
Collaborator

vajlent

Posted
Posted

Is it possible to edit the spacer you can use in the customize menu?

there is "flexible space" & "space" to choose from.

I've used "space" here.

Have a look to see what i mean:

post-251611-12831617856436.png

post-251611-12831617884669.png

I have rounded corners in the nav.bar and want the "home" button more close to the edge

to suite the bar.

Maybe a little bit vague, but I hope someone understands :laugh:

Cheers

Link to comment
Share on other sites
Veteran

bogas04

Posted
Posted

Anyone who wants to make a mockup like style , i am giving you a base code :)

Pic :

96245213.png

Code :

#appmenu-button dropmarker
{ margin: 0 1px 0 0 !important; }

#appmenu-button-container
{	position: fixed !important;
	top: -1px !important; }

#main-window[tabsontop="true"] menubar 
{	margin-left: 100px !important; }


#main-window[sizemode="maximized"][tabsontop="true"] #appmenu-button-container 
{	position: fixed !important; 
 	margin: 6px 0px 4px 4px !important;
 	top: 2px !important; }

#navigator-toolbox[tabsontop="true"] #TabsToolbar
{ padding: 22px 0 0 9px !important; }

#main-window[tabsontop="true"]
{ margin-top: -25px !important; }

.tabbrowser-tab[fadein]:not([pinned])
{ max-width: 200px !important; }

#appmenu-button {
 -moz-box-shadow: 0 0 2px 0 rgba(255,255,255,.75) inset,
 	0 1px 0 rgba(255,255,255,.45) inset !important;
 border: 2px solid !important;
 border-top: 0!important;
 -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
 -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
 -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
 max-height: 20px !important;
 min-height: 20px !important;
 background-color: rgba(255,255,255,1) !important;
 background-image: -moz-linear-gradient(rgba(244,172,17,.85),
 	rgba(218,107,17,1) 100%) !important;
 padding: 0 16px 1px 16px !important;
}

#appmenu-button:hover:not(:active):not([open]),
#bettermenu-button:hover:not(:active):not([open]) {
 background-image: -moz-linear-gradient(rgba(244,172,17,.70),
 	rgba(218,107,17,1) 100%) !important;
}

#appmenu-button:hover:active,
#appmenu-button[open],
#bettermenu-button[open] {
 -moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.4) !important;
}

#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
 -moz-appearance: none !important;
 margin: 0 !important;
 padding: 0 !important;
 background-repeat: no-repeat !important;
 background-size: 200% !important;
 -moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 3 6 / 4px 5px 3px 6px !important;
 -moz-border-radius: 10px 8px 0 0 !important;
}

.tabbrowser-tab:not([selected="true"]),
.tabs-newtab-button,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button) {
 background-position: -5px -2px !important;
 background-image: -moz-linear-gradient(top,rgba(198,201,206,.70),
 	rgba(151,160,172,.70)),
 	-moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]):hover,
.tabs-newtab-button:hover,
#TabsToolbar > .toolbarbutton-1:not(#alltabs-button):not(#new-tab-button):hover {
 background-image: -moz-linear-gradient(top,rgba(198,201,206,.8),
 	rgba(151,160,172,.8)),
 	-moz-linear-gradient(bottom, rgba(0,0,0,.8) 20%, rgba(0,0,0,0) 60%) !important;
}

.tabbrowser-tab:not([selected="true"]) {
 text-shadow: 0 1px 0 rgba(255,255,255,.3) !important;
}

I have rounded corners in the nav.bar and want the "home" button more close to the edge

to suite the bar.

Cheers

Code for rounded corners please!! :drool:

Link to comment
Share on other sites
Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

I'm not sure I follow what you mean by you, altered them, and now they don't show up.

The scripts I used were from userstyle.org and some from here. But I did not use the entire script of anyone of them. Just bits and pieces. I just put the CSS in userChrome.css manually. When I tried to install Stylish, it showed no scripts being installed. In order for them to show up in Stylish, I would have to remove everything I have and then install each script using Stylish and then edit the scripts. That is way too much work.

Link to comment
Share on other sites
Collaborator

vajlent

Posted
Posted
Code for rounded corners please!! :drool:

Here you go:

(don't remember where I got it from)

#navigator-toolbox[tabsontop="true"] #nav-bar {
	-moz-border-radius-topleft: 5px;
	-moz-border-radius-topright: 5px;
}

Link to comment
Share on other sites
Mentor

Kyang

Posted
Posted

The scripts I used were from userstyle.org and some from here. But I did not use the entire script of anyone of them. Just bits and pieces. I just put the CSS in userChrome.css manually. When I tried to install Stylish, it showed no scripts being installed. In order for them to show up in Stylish, I would have to remove everything I have and then install each script using Stylish and then edit the scripts. That is way too much work.

I see. Would just copying all the contents of your userchrome.css over to a single new stylish script work? Afterwards you can organize those bits and pieces into their own individual stylish scripts, one at a time, whenever you wanted.

This way you don't have to click a bunch of times and make a ton of individual new scripts just to recreate your current set up, you would be set with one script. But you would still have the capability to organize them later on when you feel like it.

Link to comment
Share on other sites
Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

I see. Would just copying all the contents of your userchrome.css over to a single new stylish script work? Afterwards you can organize those bits and pieces into their own individual stylish scripts, one at a time, whenever you wanted.

This way you don't have to click a bunch of times and make a ton of individual new scripts just to recreate your current set up, you would be set with one script. But you would still have the capability to organize them later on when you feel like it.

Thanks, I probably could do that but it may be against their TOS as the styles are a mosh of other users posted scripts. It is not a big deal, to not have Stylish. When Firefox 4 goes final, I may just start over again anyway.

Link to comment
Share on other sites
Rookie

Mr.Dude

Posted
Posted

Tabs in Titlebar

/* Move tabs up to titlebar in maximized window */

#navigator-toolbox[tabsontop=true] #TabsToolbar {

margin-top: -16px !important;

padding-left: 112px !important;

padding-right: 112px !important;

}

/* Move tabs up to titlebar in normal window */

#main-window[sizemode=normal] #navigator-toolbox[tabsontop=true] #TabsToolbar {

margin-top: -21px !important;

padding-left: 109px !important;

padding-right: 109px !important;

}[/code]

But if i show the menu with ALT Key, the tab shows overlapped with menu. Not nice...

Link to comment
Share on other sites
Veteran

bogas04

Posted
Posted

But if i show the menu with ALT Key, the tab shows overlapped with menu. Not nice...

#main-window[tabsontop="true"] menubar 
{	margin-left: 100px !important; }

try something like this...

Link to comment
Share on other sites
Veteran

Darrian

Posted
Posted

That's not going to work, because using that method to move the tabs up the menu bar ends up aligned inside the navigation toolbar.

Link to comment
Share on other sites
Community Regular

FrostAM

Posted
Posted

Is there a way to change the height of the tabs? I recently downloaded a windows 7 theme and it put a blue bar on top of a black background. This would be perfect for the tab bar if the tabs didn't stick out above the blue bar. I just need to shrink the tabs by a few pixels but I have no idea where to start. Any help would be appreciated.

post-201025-12831924755856.jpg

Link to comment
Share on other sites
Grand Master

+Gary7 Subscriber²

Posted
  • Subscriber²
Posted

Is there a way to change the height of the tabs? I recently downloaded a windows 7 theme and it put a blue bar on top of a black background. This would be perfect for the tab bar if the tabs didn't stick out above the blue bar. I just need to shrink the tabs by a few pixels but I have no idea where to start. Any help would be appreciated.

http://userstyles.org/styles/13709

The above userstyle may work for you.

Link to comment
Share on other sites
Collaborator

Hiiragi Tsukasa

Posted
Posted

Navigator Toolbar Shadows and Curved Corners (with work, could become the white underglow in the Office 2010 titlebar)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Shadow above navigator toolbar, curved corners */
#navigator-toolbox[tabsontop="true"] #nav-bar {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-box-shadow: 0px -3px 5px rgba(0,0,0,0.3);
}

How did you get it so that the shadow doesn't appear on the active tab?

Link to comment
Share on other sites
Contributor

BantryRed

Posted
Posted

Messing around with a few "clear" codes, anyone got a good one? Using a combination of Gary7 and Soapys, good, but not complete yet. Having problems with app tabs not aligning properly at the bottom, and also getting the history sidebar to look like the bookmarks sidebar in Gary7 code.

post-346088-1283298962378.png

Link to comment
Share on other sites
Mentor

argonite

Posted
Posted

How did you get it so that the shadow doesn't appear on the active tab?

The navigation toolbar is at a lower layer than the active tab (I think) so its box shadow is drawn below it.

Some script updates:

Here's what it looks like when you hit ALT (the tabs are now shifted down and the menu bar appears):

post-173518-12833005521623.png

Tabs in Titlebar (now the menu-bar is shown properly, instead of behind the tabs!)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Move tabs up to titlebar in maximized window */
#navigator-toolbox[tabsontop="true"] #TabsToolbar {
    padding-left: 109px !important;
    padding-right: 112px !important;
}

/* Move tabs up to titlebar in normal window */
#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    padding-left: 109px !important;
    padding-right: 109px !important;
}

/* Move the menubar above the tabs so it moves the tab bar down when activated */
#toolbar-menubar {
    margin: -19px 0px 3px 109px !important;
}

#main-window[sizemode="normal"] #toolbar-menubar {
    margin: -24px 0px 3px 109px !important;
}

Navigator Toolbar Shadows and Curved Corners (now has a sweet white underglow, Office 2010 style, when maximized!)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

/* Shadow above navigator toolbar, curved corners */
#main-window[sizemode="normal"] #navigator-toolbox[tabsontop="true"] #nav-bar {
    -moz-border-radius-topleft: 5px;
    -moz-border-radius-topright: 5px;
    -moz-box-shadow: 0px -3px 8px rgba(0,0,0,0.4);
}

/* White underglow above navigator toolbar */
#main-window[sizemode="maximized"] #navigator-toolbox[tabsontop="true"] #TabsToolbar {
    background-image: -moz-linear-gradient(top, rgba(255,255,255,0) 20%, rgba(255,255,255,1)) !important;
}

New App Button Margin Fixes

Now you can use Soapy's new app button out of the box, just add and modify this short script, which also moves the app button to the corner when maximized.

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#main-window[sizemode="normal"] {
    margin-top: -1px !important;
}

#main-window[sizemode="maximized"] #appmenu-button {
    margin-left: -3px !important;
    -moz-border-radius-bottomleft: 0px !important;
}

Link to comment
Share on other sites
Mentor

argonite

Posted
Posted

Just a note that due to the changes in the stylish code, it is now only compatible with tabs-on-top and a hidden menu-bar (the default Minefield configuration). I could probably fix this using more refined selectors, but the current script will work for now.

Link to comment
Share on other sites
Rookie

Mr.Dude

Posted
Posted

The navigation toolbar is at a lower layer than the active tab (I think) so its box shadow is drawn below it.

Some script updates:

Thank you. I like it, the menu is showing very nice!

Link to comment
Share on other sites
Apprentice

panoc

Posted
Posted

tabs on top for beta 5 with no firefox button.

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); 
#navigator-toolbox[tabsontop="true"] 

#navigator-toolbox[tabsontop="true"] #TabsToolbar{
padding-left: 0px !important;
margin-right: 105px !important;
padding-top: 0px !important;
}

#appmenu-button-container {
position: fixed !important;
}

#main-window {
margin-top: -24px !important;
}

#appmenu-button{
padding: 3px !important;
-moz-border-radius-bottomleft: 0px !important;
}

Link to comment
Share on other sites
Mentor

argonite

Posted
Posted

So I really liked some of the app button concepts that are being considered for the final release of Firefox.

Stephen Horlander even added patch code in bug 574681 to make it look like this:

post-173518-12834977372977.png

Which everyone on Bugzilla seems to like. I do too! So I've created a style out of it!

Firefox 4 App Button Style for Bug 574681 Patch 1.0 (for Windows XP, Vista and 7)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#appmenu-button {
    -moz-appearance: none !important;
    background-image: -moz-linear-gradient(rgb(247,182,82), rgb(215,98,10) 95%) !important;
    -moz-border-radius: 0 0 4px 4px !important;
    border: 2px solid !important;
    border-top: none !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 0 1px rgba(255,255,255,.25) inset !important;
    text-shadow: 0 0 1px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.5) !important;
    padding: .1em 1.5em .15em 1.5em !important;
    -moz-border-left-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
    -moz-border-bottom-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
    -moz-border-right-colors: rgba(255,255,255,.5) rgba(83,42,6,.9) !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 0 2px 1px rgba(255,255,255,.25) inset !important;
}

#appmenu-button:-moz-window-inactive {
    background: transparent !important;
    background-clip: padding-box !important;
    border-color: rgba(0,0,0,.4) !important;
    -moz-border-left-colors: rgba(255,255,255,.4) rgba(0,0,0,.5) !important;
    -moz-border-bottom-colors: rgba(255,255,255,.4) rgba(0,0,0,.5) !important;
    -moz-border-right-colors: rgba(255,255,255,.4) rgba(0,0,0,.5) !important;
    -moz-box-shadow: 0 0 0 1px rgba(255,255,255,.25) inset !important;
}

#appmenu-button:hover:not(:active):not([open]), #appmenu-button:hover:-moz-window-inactive:not(:active):not([open]) {
    background-image: -moz-radial-gradient(center bottom, farthest-side, rgba(252,240,89,.5) 10%, rgba(252,240,89,0) 70%), -moz-radial-gradient(center bottom, farthest-side, rgb(236,133,0), rgba(255,229,172,0)), -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
    border-color: rgba(83,42,6,.9) !important;
    -moz-box-shadow: 0 1px 0 rgba(255,255,255,.1) inset, 0 0 2px 1px rgba(250,234,169,.7) inset, 0 -1px 0 rgba(250,234,169,.5) inset !important;
}

#appmenu-button:hover:active,
#appmenu-button[open] {
    background-image: -moz-linear-gradient(rgb(246,170,69), rgb(209,74,0) 95%) !important;
    -moz-border-radius: 0 !important;
    -moz-box-shadow: 0 2px 4px rgba(0,0,0,.4) inset, 0 1px 1px rgba(0,0,0,.2) inset !important;
}

Remember, this is a work in progress and is not reflective of the final UI. And remember to disable it when the patch finally does get committed!

Link to comment
Share on other sites
Collaborator

vajlent

Posted
Posted

So I really liked some of the app button concepts that are being considered for the final release of Firefox.

Stephen Horlander even added patch code in bug 574681 to make it look like this:

post-173518-12834977372977.png

Which everyone on Bugzilla seems to like. I do too! So I've created a style out of it!

Remember, this is a work in progress and is not reflective of the final UI. And remember to disable it when the patch finally does get committed!

Very nice but I'm not a fan of the inactive button style.

Link to comment
Share on other sites
Mentor

argonite

Posted
Posted

Very nice but I'm not a fan of the inactive button style.

You can remove it entirely by just removing the block of code marked by -moz-window-inactive

Previous button iterations haven't had this kind of effect. It takes a while to get used to, but I don't really look at inactive windows too hard anyway.

If it really bothers you, why don't you sign up at Bugzilla and make a suggestion? Maybe it'll make it into the next patch!

Link to comment
Share on other sites
This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.