Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Contributor

Urindunk

Posted
Posted

Oi lads. I registered to ask if any of you maybe knew how to make the tabs (and new tab button) square? I really hate rounded things.

Also would appreciate if any of you knew how to make the menubutton square too?

Last thing, is it possible to make this not-rounded when non-maximized?:

grl8q.png

I'm so damn square, huh?

Anyway, thanks in advance!

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Oi lads. I registered to ask if any of you maybe knew how to make the tabs (and new tab button) square? I really hate rounded things.

Also would appreciate if any of you knew how to make the menubutton square too?

Last thing, is it possible to make this not-rounded when non-maximized?:

I'm so damn square, huh?

Anyway, thanks in advance!

#appmenu-button,
#nav-bar {
  border-radius: 0 !important;
}

The tabs are images so you can't use CSS to do it. You need to either remake the images, or recreate them in CSS.

Contributor

Urindunk

Posted
Posted 

#appmenu-button,
#nav-bar {
  border-radius: 0 !important;
}

The tabs are images so you can't use CSS to do it. You need to either remake the images, or recreate them in CSS.

Thanks for the menubutton!

Regarding tabs.. I see.. Where would i get the default images, so i could edit them and then how would i replace the original ones, with mine?

Thanks,

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Thanks for the menubutton!

Regarding tabs.. I see.. Where would i get the default images, so i could edit them and then how would i replace the original ones, with mine?

Thanks,

The image is located here: chrome://browser/skin/tabbrowser/tab.png, to use it:

.tabbrowser-tab,
.tabs-newtab-button {
  -moz-border-image: url(pathtoimage.png) 4 5 3 6 / 4px 5px 3px 6px repeat stretch !important;
  border-radius: 10px 8px 0 0 !important;
}

You will also need to tweak the border-radius values too.

Collaborator

vasa1

Posted
Posted

I'm on the latest Minefield (Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110226 Firefox/4.0b13pre) and I have a slight problem :(

I had tweaked the close buttons on tabs, both active and inactive, using this code:

.tabbrowser-tab[selected="true"]
.tab-close-button {background: -moz-radial-gradient(white, maroon);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}
.tabbrowser-tab:not([selected="true"])
.tab-close-button {background: -moz-radial-gradient(black, white);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}

This had worked for several recent Minefield updates. Now, I'm seeing the close button (as I styled it) only on the active tab and nothing at all on the inactive tabs even if I hover over where the close button should be. I would very much like to have the close button visible on inactive tabs as well.

Is it possible?

Contributor

Urindunk

Posted
Posted

Hm, guys, does your... favicon-holder-thing also looks like mine does, on the pic below (the left side)?

I was wondering if there was some way to make it like the mockup i made on the right side? or maybe it's something we just can expect Mozilla to fix soon?

Ge80H.png

Collaborator

vasa1

Posted
Posted

I'm on the latest Minefield (Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110227 Firefox/4.0b13pre) and I have a slight problem :(

I had tweaked the close buttons on tabs, both active and inactive, using this code:

.tabbrowser-tab[selected="true"]
.tab-close-button {background: -moz-radial-gradient(white, maroon);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}
.tabbrowser-tab:not([selected="true"])
.tab-close-button {background: -moz-radial-gradient(black, white);
	-moz-border-radius-topleft: 6px !important;
	-moz-border-radius-topright: 6px !important;
	-moz-border-radius-bottomleft: 6px !important;
	-moz-border-radius-bottomright: 6px !important;
	}

This had worked for several recent Minefield updates. Now, I'm seeing the close button (as I styled it) only on the active tab and nothing at all on the inactive tabs even if I hover over where the close button should be. I would very much like to have the close button visible on inactive tabs as well.

Is it possible?

I wonder if it has been removed in the latest Minefield? In browser.css, there's no mention of ":not([selected=true])" in what I think is the relevant code:

/* Tab close button */
.tab-close-button {
  -moz-appearance: none;
  -moz-image-region: rect(0, 64px, 16px, 48px);
  border: none;
  padding: 0px;
  list-style-image: url("chrome://global/skin/icons/close.png");
}

.tab-close-button:-moz-system-metric(touch-enabled) {
  -moz-transform: scale(1.2);
}

.tab-close-button:hover,
.tab-close-button:hover[selected="true"] {
  -moz-image-region: rect(0, 32px, 16px, 16px);
}

.tab-close-button:hover:active,
.tab-close-button:hover:active[selected="true"] {
  -moz-image-region: rect(0, 48px, 16px, 32px);
}

.tab-close-button[selected="true"] {
  -moz-image-region: rect(0, 16px, 16px, 0);
}

.tab-close-button:focus {
  outline: none !important;
}

Community Regular

foxxyn8

Posted
Posted

I'm on the latest Minefield (Mozilla/5.0 (Windows NT 5.1; rv:2.0b13pre) Gecko/20110226 Firefox/4.0b13pre) and I have a slight problem :(

This had worked for several recent Minefield updates. Now, I'm seeing the close button (as I styled it) only on the active tab and nothing at all on the inactive tabs even if I hover over where the close button should be. I would very much like to have the close button visible on inactive tabs as well.

Is it possible?

.tabbrowser-tab:not([selected="true"]):not([pinned]) .tab-close-button {
        display: -moz-box !important;
}

I was wondering if there was some way to make it like the mockup i made on the right side?

try something like this:

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
}

Contributor

Urindunk

Posted
Posted 

.tabbrowser-tab:not([selected="true"]):not([pinned]) .tab-close-button {
        display: -moz-box !important;
}

try something like this:

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
}

Brilliant Foxxy, much better! All it needs is the border on the right side, if its possible ,that'd be really great!

Thanks.

BTW, is it possible to edit the bagground that the titlebar uses whenever aero is disabled? (basic titlebar)

Community Regular

foxxyn8

Posted
Posted

Brilliant Foxxy, much better! All it needs is the border on the right side, if its possible ,that'd be really great!

BTW, is it possible to edit the bagground that the titlebar uses whenever aero is disabled? (basic titlebar) 

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
border-right: 1px solid rgba(0, 0, 0, 0.32)!important;
}

not sure about the titlebar

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

can I do this with modified userchrome.css?

https://addons.mozilla.org/en-US/firefox/addon/icon-effects/

This should take care of most of them.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

Enthusiast

mysiskatten

Posted
Posted

This should take care of most of them.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

almost perfect

thanks!

edit:

bookmark sidebar icons and location bar icons still color

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

almost perfect

thanks!

edit:

bookmark sidebar icons and location bar icons still color

Can't seem to get it to just effect the treechildren icons (sidebar,library), so the whole row is greyscale.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image,
#urlbar-icons > image,
#identity-box image,
treechildren {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

Veteran

max22

Posted
Posted

Ok this one may be a challenge for you all. How do I move my whole addonbar while using the Barlesque add-on to the top left hand corner of the screen right below my Navigation toolbar please? I know I could just move the icons to top to a totally new toolbar but do not want that. The bar would be to big and not work like it does in Barlesque.

Veteran

max22

Posted
Posted

Oh yeah I forgot one thing how do I add the find bar to the top right hand corner as well ? It is not part of the addon bar but I am sure everyone here knows that already. Was just making sure is all. No need to rush either I am trying some new things as we speak. Thanks again.

Collaborator

vajlent

Posted
Posted 

#identity-box {
margin-top: -2px !important;
margin-bottom: -2px !important;
margin-left: -2px !important;
border-radius:0 !important;
border-right: 1px solid rgba(0, 0, 0, 0.32)!important;
}

not sure about the titlebar

Almost there ;) but it needs radius on the left side, bottom left & top left.

Enthusiast

mysiskatten

Posted
Posted

Can't seem to get it to just effect the treechildren icons (sidebar,library), so the whole row is greyscale.

.tabbrowser-tab .tab-content > image,
toolbarbutton > image,
#urlbar-icons > image,
#identity-box image,
treechildren {
  filter: url("chrome://mozapps/skin/extensions/extensions.svg#greyscale");
}

thanks :)

Mentor

grayscale

Posted
Posted

I changed the background color of the app button, but I want to be purple (default) when in private mode. What do I need to change?

#main-window[sizemode="maximized"] #appmenu-button {
background: -moz-linear-gradient(top, rgba(58,127,197,1), rgba(47,119,189,1), rgba(0,58,229,1)) !important;

This topic is now closed to further replies.
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.

  • Posts

    • This new cabinet design lets you run AMD, Intel, and Nvidia PCs inside one case

      By ChickyBoom · Posted

      Guess it's one of those things best used by devs to thoroughly test stuff.
    • Hi my name is Olivia and I am from Australia

      By WITHOUT-ME · Posted

      is it all upside down there? traffic lights reverted too?
    • I Can't Wrap My Head Around This Number - Google to buy computing from SpaceX at $920 million per month

      By WITHOUT-ME · Posted

      just 0.035% of their budget
    • Bluesky COO warns social media regulations could destroy competition from small startups

      By zikalify · Posted

      Bluesky COO warns social media regulations could destroy competition from small startups by Paul Hill Fears that increasing government control of social media risks regulatory capture by the biggest social media firms were raised again recently. Bluesky’s chief operating officer said in an interview that social media bans for children and tighter regulations for social media firms risk creating a world where there are only a few social media platforms run by companies with the deepest pockets. Regulations on social media firms have been very lax since they appeared for mainstream users in the 2000’s. This gave Meta, Snapchat, and Google time to build up their user bases and get entrenched, with Meta being the most successful. Now that Meta has succeeded, it has been attempting regulatory capture. By pushing for more regulations of social media, Meta hopes to make it more difficult for rivals to challenge it. For its part, it doesn’t need to worry about the cost of regulation because it has a lot of money to spend, whereas startups do not. Speaking to CNBC, Rose Wang, Bluesky’s chief operating officer, said: “I support the protection and the safety of youth, the question that we have then is at what cost, because essentially what I’m scared of is in the long term, we’re headed to a world where there’s about three to five platforms, and extreme heavy regulation of those platforms, and basically the whole compliance teams of these platforms are 10 times the size of our entire team. So, basically, we’re living in a world where it’s almost impossible for smaller entrants to come in and build healthier spaces. These platforms have led to a place where the bottom line is the thing that drives what they do... so I understand why governments have to step in and regulate, because the platforms have done nothing right.” She said that while she is not against regulation, there needs to be more channels between the small to mid-sized players and regulators to help protect them. She says that big tech players, on the other hand, “who we know are circumventing regulation,” need to be regulated. Essentially, the Bluesky position is one of nuance, rather than absolutes. While Bluesky’s proposal may preserve competition in the social media space, it still doesn’t address the massive privacy implications these age verification measures introduce, such as handing over sensitive identity documents to access age-gated content. Source: CNBC
    • Politically funny images of the World

      By Michael Scrip · Posted

  • Recent Achievements

    • One Month Later
      DJC50PLUS earned a badge
      One Month Later
    • Week One Done
      DJC50PLUS earned a badge
      Week One Done
    • Proficient
      Eric Biran went up a rank
      Proficient
    • Dedicated
      Conjor earned a badge
      Dedicated
    • Week One Done
      Windows Guy earned a badge
      Week One Done

  • Popular Contributors

    1. 1
      +primortal
      493
    2. 2
      PsYcHoKiLLa
      249
    3. 3
      Steven P.
      71
    4. 4
      +Edouard
      70
    5. 5
      ATLien_0
      69
    Show More

  • Tell a friend

    Love Neowin? Tell a friend!