Share your custom Firefox/Minefield 4 stylish scripts

[SoapyHamHocks Member]

Is there a way to move the page loading status poput at the bottom left of the screen? I want it a few pixels up and few to the right, so there's just a little gap.

You can try this:

.statuspanel-label {
  margin: 0 5px 5px !important;
}

It will move it 5px from the bottom and left.

[foxxyn8]

Is there a way to move the page loading status poput at the bottom left of the screen? I want it a few pixels up and few to the right, so there's just a little gap.

statuspanel { 
        position: fixed; 
        bottom:5px;
        left:5px !important;  
}

**edit: Soapy's approach is probably better

[Karl-Johan]

You can try this:

.statuspanel-label {
  margin: 0 5px 5px !important;
}

It will move it 5px from the bottom and left.

statuspanel { 
        position: fixed; 
        bottom:5px;
        left:5px !important;  
}

Exactly what I wanted.

Thanks!

[vasa1]

You can try this:

.statuspanel-label {
  margin: 0 5px 5px !important;
}

It will move it 5px from the bottom and left.

Perfect! But what is the function of the first "0"?

[foxxyn8]

Perfect! But what is the function of the first "0"?

.statuspanel-label {
  margin: 0 5px 5px !important;
}

is shorthand for:

.statuspanel-label {
  margin-top: 0 !important;
  margin-right: 5px !important;
  margin-bottom: 5px !important;
  margin-left: 5px !important;
}

Here's a further explanation: http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-shorthand-at-a-glance/4/

[Frylock86]

Get the stratiform addon. Failing that try:

http://userstyles.org/styles/33773/firefox-4-choose-your-color

I did not know Stratiform could do that, thanks!

[vasa1]

.statuspanel-label {
  margin: 0 5px 5px !important;
}

is shorthand for:

.statuspanel-label {
  margin-top: 0 !important;
  margin-right: 5px !important;
  margin-bottom: 5px !important;
  margin-left: 5px !important;
}

Here's a further explanation: http://www.devarticles.com/c/a/Web-Style-Sheets/CSS-shorthand-at-a-glance/4/

Thanks, foxxyn8. Will definitely read your link tomorrow. :)

[Quillz]

I posted this in my own topic, but thought I should share it here. This will get your Fx 4 tabs all the way into the title bar and take up all available horizontal space, assuming you've moved the Firefox menu button elsewhere (use one of many extensions):

* Tabs in Title Bar

#main-window[sizemode=normal][tabsontop] #appmenu-button-container {
position: fixed !important;
z-index: 2 !important;
}
#main-window[sizemode=normal][tabsontop] #toolbar-menubar[autohide="true"]{
margin-top:-14px;
-moz-padding-start:70px!important;
}
#main-window[sizemode=normal] #navigator-toolbox[tabsontop] > #toolbar-menubar[autohide] ~ #TabsToolbar {
-moz-padding-start:0px!important;
-moz-padding-end:110px!important;
}

[vasa1]

I have yet another question. This one is more related to "content" than to "chrome" but I hope I'll get help!

If I'm viewing a web-page in Fx4, I can select just a bit of the page content by "left-click-hold and drag" with the mouse. If I then right-click, I get a context menu with the option to "View Selection Source". Taking this option opens a new window titled "DOM Source of Selection ..." which shows the source code of the highlighted stuff as well as some code to the left and right (as opposed to ctrl+U which shows source code for an entire page).

I want to know how to tweak the appearance of this page, the "DOM Source of Selection ...". Specifically, I'd like a darker page background with appropriately contrasting text.

I searched userStyles.org but the closest I got was this: http://userstyles.org/styles/37975/about-blank-view-source-dark which helps fix about:blank and about:source (when we hit Ctrl+U on a page).

[foxxyn8]

I have yet another question. This one is more related to "content" than to "chrome" but I hope I'll get help!

If I'm viewing a web-page in Fx4, I can select just a bit of the page content by "left-click-hold and drag" with the mouse. If I then right-click, I get a context menu with the option to "View Selection Source". Taking this option opens a new window titled "DOM Source of Selection ..." which shows the source code of the highlighted stuff as well as some code to the left and right (as opposed to ctrl+U which shows source code for an entire page).

I want to know how to tweak the appearance of this page, the "DOM Source of Selection ...". Specifically, I'd like a darker page background with appropriately contrasting text.

I searched userStyles.org but the closest I got was this: http://userstyles.org/styles/37975/about-blank-view-source-dark which helps fix about:blank and about:source (when we hit Ctrl+U on a page).

try this:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("view-source:"){

html {background: #111 !important; color: white !important;}

.start-tag, .end-tag {color: violet !important;}

.attribute-name {color: #ddd !important;}

.attribute-value {color: steelblue !important;}

.comment {color: lightgreen !important;}

a {color:blue !important;}

}

[vasa1]

try this:

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url-prefix("view-source:"){

html {background: #111 !important; color: white !important;}

.start-tag, .end-tag {color: violet !important;}

.attribute-name {color: #ddd !important;}

.attribute-value {color: steelblue !important;}

.comment {color: lightgreen !important;}

a {color:blue !important;}

}

Perfect. As usual. :)

The neat thing is that it works for both plain view source (entire page source), and view source for a particular selection.

Just to push my luck, is it possible to get it to wrap to screen width? No big deal if it isn't, but great if it is.

Edit: I fiddled a bit with the colors and squeezed in one more line as well:

/* View Source*/
@-moz-document url-prefix("view-source:"){
html {background: #111 !important; color: #666611 !important; }
::-moz-selection {background-color: #377 !important; color: #000 !important} /* <<< I added this line*/
.start-tag, .end-tag {color: violet !important; }
.attribute-name {color: #444 !important; }
.attribute-value {color: green !important; }
.comment {color: lightgreen !important; }
a {color: #888 !important;}
}

[+Audioboxer Subscriber²]

How can I remove the drop down arrow from the Firefox button? Thanks :)

[luving]

How can I remove the drop down arrow from the Firefox button? Thanks :)

#appmenu-button dropmarker{
	display: none !important;
}

[foxxyn8]

Perfect. As usual. :)

The neat thing is that it works for both plain view source (entire page source), and view source for a particular selection.

Just to push my luck, is it possible to get it to wrap to screen width? No big deal if it isn't, but great if it is.

Sure, just add this to your code:

pre {white-space: pre-line !important; overflow-x: hidden !important;}

or just enable "Wrap Long Lines" in the "View" menu

[trag3dy]

Is there any way to put the status text in the url bar without using status-4-ever? I'm using Locationbar2 and those 2 addons are not compatible. Much prefer locationbar2 to status-4-ever so if it can be done this way.. Locationbar2 used to have a feature that did that but it was removed for some reason. :wacko:

[parry]

How do I move the text on the firefox button slightly to the left?

[apathy]

How can I remove the drop down arrow from the Firefox button? Thanks :)

How did you get the fox icon in there?

[SkyDX]

Two questions for the CSS pros here^^

How can I remove the red middle line in the menu?

And is it possible to remove the dropdown marker in the URL bar entirely? If yes, could I also place the bookmarks star where the marker was before?

Thanks in advance!^^

[grayscale]

.autocomplete-history-dropmarker.urlbar-history-dropmarker{
display:none;}

- dropmarker

I don't know about the red line.

[foxxyn8]

Two questions for the CSS pros here^^

How can I remove the red middle line in the menu?

And is it possible to remove the dropdown marker in the URL bar entirely? If yes, could I also place the bookmarks star where the marker was before?

Thanks in advance!^^

#appmenuSecondaryPane { box-shadow: none !important; }

.autocomplete-history-dropmarker.urlbar-history-dropmarker{ display:none !important;}

#star-button { -moz-box-ordinal-group: 2 !important; }

[protocol7]

#appmenu-button dropmarker{
	display: none !important;
}

Thanks! The Firefox menu button looks much better without it.

[SkyDX]

#appmenuSecondaryPane { box-shadow: none !important; }

.autocomplete-history-dropmarker.urlbar-history-dropmarker{ display:none !important;}

#star-button { -moz-box-ordinal-group: 2 !important; }

Thanks to both of you, the bookmark and dropmarker switch works like a charm and looks wonderful! :D

Just the red line in the menu is still present, the shadow is gone but not the line :(

I had these red lines everywhere in my UI because I use a non default Windows object color, I remember most of the time it was linked to a threeshadow property in Firefox if that helps :pinch:

[Syanide]

Noob(ish) question, I enable the Firefox menu instead of the regular menubar on Linux, bookmark icon gets placed next to the home button. That's nice and all, but the icon looks like total crap, and unlike home/back/forward button, it doesn't follow the system icon theme (I've included the text editor in the pic just so you can see how much the bookmark icon feels out of place).

Any way of manually changing the icon, or if not, anyone know of a good monochrome icon theme?

[foxxyn8]

Thanks to both of you, the bookmark and dropmarker switch works like a charm and looks wonderful! :D

Just the red line in the menu is still present, the shadow is gone but not the line :(

I had these red lines everywhere in my UI because I use a non default Windows object color, I remember most of the time it was linked to a threeshadow property in Firefox if that helps :pinch:

Do either of these have any effect?

#appmenuPrimaryPane { border-right: 0 !important; }

or

#appmenuSecondaryPane { border-left: 0 !important; }

[anarkhy]

how to put stop reload button inside the urlbar?