Share your custom Firefox/Minefield 4 stylish scripts

By Steven P.
in Web Browser Discussion & Support

 Share

Recommended Posts

Community Regular

foxxyn8

Posted
Posted

Well, True... Now with Content UI not appearing anymore. I've latest hourly.

Few problems left... Seems appears an address randomly ( when I'm in Add-ons Manager and Trying to go to the creator's address for example )? Dunno, anyway. Since you don't use it, crap for me!

Replace what with what? That was kinda confusing...

Do you know if the final patch for UI Content will be exactly like mock-up design?

You're talking about these mockups?: http://news.softpedia.com/newsImage/Firefox-4-0-UI-Redesign-In-Content-UI-Visual-Unification-14.png/

I wouldn't even venture a guess on that. From what I understand ICUI isn't going to extend beyond the addons manager for 4.0. We won't have total ICUI until 4.next.

oh and replace:

.urlbar-over-link-box

with

#main-window:not([stylish-url="about:addons"]) .urlbar-over-link-box

Collaborator

Excelsis

Posted
Posted

Hey, I'm trying to put the awesome bar on the same toolbar as the tabs but I'm having an issue when I try to make the awesome bar smaller. The tabs are really small and they dont take up the entire space on the left. Anyway to fix this?

This is what it looks like ATM; fxabtb.jpg

Community Regular

foxxyn8

Posted
Posted

Hey, I'm trying to put the awesome bar on the same toolbar as the tabs but I'm having an issue when I try to make the awesome bar smaller. The tabs are really small and they dont take up the entire space on the left. Anyway to fix this?

This is what it looks like ATM; fxabtb.jpg

Looks like you used #urlbar as the selector instead of #urlbar-container for resizing the awesome bar

#urlbar-container {
max-width: 500px !important;
min-width:500px !important;
}

post-350326-12917363295833.png

Rookie

Makmende

Posted
Posted

Not much activity lately around here, eh? Well foxxyn8, since i've seen that you are the one to ask when it comes to CSS i'd like to ask you if you could make a style which combines the home button and the bookmark button like in this picture LiNK (if it's possible).

I think it looks kinda good, I would do it myself if i knew how but unfortunately i don't :rolleyes:

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Not much activity lately around here, eh? Well foxxyn8, since i've seen that you are the one to ask when it comes to CSS i'd like to ask you if you could make a style which combines the home button and the bookmark button like in this picture LiNK (if it's possible).

I think it looks kinda good, I would do it myself if i knew how but unfortunately i don't :rolleyes:

Simple enough, here you go:

#home-button {
 border-top-right-radius: 0 !important;
 border-bottom-right-radius: 0 !important;
 margin-right: 0 !important;
 border-right: 0 !important;
}

#bookmarks-menu-button {
 border-top-left-radius: 0 !important;
 border-bottom-left-radius: 0 !important;
 margin-left: 0 !important;
}

#home-button:hover:active + #bookmarks-menu-button-container > #bookmarks-menu-button {
 border-left-color: rgba(0,0,0,.55) !important;
}

Edit: fixed some border colors on pressed.

Enthusiast

mNiosu

Posted
Posted

Hmm, they finally made some upgrades to the add-on bar: they added a freaking stupid close button :angry: ! How do I remove this new button area (see picture) ?

My style looks like this:

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

#browser-bottombox {
  position: fixed;
  bottom: 0;
  background: none !important;
}

#addon-bar {
  position: fixed;
  bottom: -22px;
  right: 0;
  margin-right: 20px !important;
  border: 0 !important;
  opacity: 0;
  -moz-appearance: none !important;
  -moz-transition: bottom .6s 1.5s ease-in, opacity .6s 1.5s ease-in;
  padding-top: 22px !important;
}

#addon-bar:hover {
  bottom: 0;
  opacity: 1;
  -moz-transition: bottom .6s 1s ease-out, opacity .6s 1s ease-in;
}

#addon-bar > #status-bar {
  margin: 0 !important;
  padding: 0 2px 0 2px;
  border-radius: 4px 4px 0 0;
  border: 0 !important;
  border-left: 1px solid rgba(0,0,0,.25) !important;
  border-right: 1px solid rgba(0,0,0,.25) !important;
  border-top: 1px solid rgba(0,0,0,.25) !important;
  background:rgba(245,245,245,.9) !important; 
  box-shadow: 0 0 4px rgba(161,161,161,.9) inset !important;
}

@SoapyHamHocks

Is there a way to style the buttons made with custom buttons add-on ? I want to use your style ideas ... :D

post-344974-12920119874372.jpg

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Hmm, they finally made some upgrades to the add-on bar: they added a freaking stupid close button :angry: ! How do I remove this new button area (see picture) ?

My style looks like this:

#addonbar-closebutton {
 display: none;
}

Community Regular

foxxyn8

Posted
Posted

Is there a way to style the buttons made with custom buttons add-on ?

Style them like any other toolbarbutton. Their class is .toolbarbutton-1.

If you have multiple buttons and want to style some of them differently you'll need the specific id for the button. They start with #custombuttons-button0 and increase numerically from there. (ie: #custombuttons-button0 is one button #custombuttons-button1 would be another button etc..) Using domi to get the ids would be easier than just guessing though. You could also do:

.toolbarbutton-1[cb-name="name of button"]

here's an example where I styled a custom button to look like a tab when placed in the tab bar:

#TabsToolbar #custombuttons-button0 {
-moz-appearance: none !important;  
background:-moz-linear-gradient(rgba(247,182,82,.5), rgba(215,98,10,.2)) no-repeat -5px -2px !important;
background-size: 200% !important;
margin: 0 !important;
padding: 0 1px 0 1px !important;
-moz-border-image: url("chrome://browser/skin/tabbrowser/tab.png") 4 5 2 6 / 4px 5px 2px 6px !important;
border-radius: 10px 8px 0 0 !important;
width: 31px !important;
}

#TabsToolbar #custombuttons-button0:hover,
#TabsToolbar #custombuttons-button0[open] {
    background-image: -moz-linear-gradient(rgba(247,182,82,1), rgba(215,98,10,1))  !important;
}

#main-window[privatebrowsingmode=temporary] #TabsToolbar #custombuttons-button0{
    background-image: -moz-linear-gradient(rgba(153,38,211,.5), rgba(105,19,163,.2)) !important;
}

#main-window[privatebrowsingmode=temporary] #TabsToolbar #custombuttons-button0:hover,
#main-window[privatebrowsingmode=temporary] #TabsToolbar #custombuttons-button0[open]{
    background-image: -moz-linear-gradient(rgba(153,38,211,1), rgba(105,19,163,1)) !important;
}

#TabsToolbar #custombuttons-button0 image {
padding-bottom: 1px !important;
margin-bottom: -2px !important;
margin-left: 0px !important;
}

Enthusiast

mNiosu

Posted
Posted

Style them like any other toolbarbutton. Their class is .toolbarbutton-1.

If you have multiple buttons and want to style some of them differently you'll need the specific id for the button. They start with #custombuttons-button0 and increase numerically from there. (ie: #custombuttons-button0 is one button #custombuttons-button1 would be another button etc..) Using domi to get the ids would be easier than just guessing though. You could also do:

.toolbarbutton-1[cb-name="name of button"]

Great, thanks a lot man! All I wanted was a simple style to get SoapyHamHocks's idea for merging the buttons, looking like this for me:

BTW: thanks SoapyHamHocks for the help in the previous post! ;)

post-344974-12920633187557.jpg

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

Is there a simple way to just move the addon bar buttons to the right side without changing anything else?

You could try something like, although I'm sure there is a better way.

#status-bar {
 position: fixed;
 right: 2px;
 bottom: 0;
 margin-bottom: -1px;
 background: none !important;
}

Mentor

Inklin

Posted
Posted

Can somebody post the code for soapys combined buttons here please, I have been trying to get it off userstyles.org but their site is throwing a fit right now with apache errors and thing not loading.

Thanks in advance :)

Rookie

Makmende

Posted
Posted
Can somebody post the code for soapys combined buttons here please' date=' I have been trying to get it off userstyles.org but their site is throwing a fit right now with apache errors and thing not loading.

Thanks in advance :) [/quote']This :rolleyes:

Rookie

Makmende

Posted
Posted

It seems to work again. Anyway :

#nav-bar[currentset*=",home-button,bookmarks-menu-button-container"] #home-button {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  margin-right: 0 !important;
  border-right: 0 !important;
}

#nav-bar[currentset*=",home-button,bookmarks-menu-button-container"] #bookmarks-menu-button {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  margin-left: 0 !important;
}

#home-button:hover:active + #bookmarks-menu-button-container > #bookmarks-menu-button {
  border-left-color: rgba(0,0,0,.55) !important;
}

Rookie

Makmende

Posted
Posted

Does anyone know the identifier for the LastPass button and the SumbleUppon button (the one used to show/hide the toolbar)?

I'd like to add those two as well. But i would probably need to make the LastPass button smaller. Is there anyway to do that too?

Thanks.

Neowinian

Vavvy

Posted
Posted

Soapy, with your style for combine home and bookmarks button, do you know how to get back to the normal home button when the bookmarks toolbar is activated ? Actually the home button remains without the right corner and attacked to the left edge of the window border

Mentor

SoapyHamHocks Member

Posted
  • Member
Posted

sorry I was wrong, the home button remains without the right corners and attacked to the right edge of the window border when the bookmarks toolbar is activated

Unfortunately I don't think there is anything I can do about that.

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

  • Recently Browsing   0 members

    • No registered users viewing this page.