Stylish Scripts for Firefox

[HX1]

Stylish

---

This will be the place for users to share their user scripts for customizing Firefox using

Stylish.

'Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. You can even customize Firefox and other programs themselves. '

What we will need:

• Firefox browser - the latest stable and beta versions are posted in our Frontpage
  
• Stylish add-on for Firefox
  

How to insert scripts - ( Click on images below for detailed view )

1. You can use the ' Install with Stylish ' button on the main site. As shown below.
   
2. Use the ' Preview ' or ' Install ' Buttons, OR..
   
3. Open your add-on options for Stylish by right-clicking on the StatusBar Icon and choose ' Manage styles... '.
   
4. You may also open this window by opening your ' Addons ' from ' Tools ' and going to ' User Styles '
   
5. Next you will choose ' Write New Style '.
   
6. Don't forget to name your new script, or if copying in a script, be sure to insert it's name and tags.
   
7. Write the new script or Copy/Paste in a pre-existing script.
   
8. Next click ' Preview ', and if no error is shown, click ' Save '. ( *Note that some Scripts may not Preview )
   
9. Don't forget to share your new modifications and scripts. :)
   

More Info/Scripts:

Neowin

Userstyles.org

[HX1]

Progress Line Modded

---

I have one for my minimal appearance and function of Firefox... the other settings can be made available as well...

The modification you are looking for, is the white glowing line which travels across the bottom of the URL Bar from left to right, as your page and resources are loading. This code will respect the favicon area, even when changing from verified/encrypted certificates and connections.

This is one of two mods I have made of the code to previously existing codes for Stylish/Fission ( required) based mods.

EDIT: This script is also compatible with Status-4-Evar.

Stylish has basic settings and require you add the code for this to work. Fission is set to its basic settings as well except I have chosen to use the URL Bar to show links when 'mousing over' them...

This one is from 4.0 Mockup 'Progess Line' 1.1 . It was used in several ways and I have seen versions of it used to give progress lines on top of the FF Tabs...

This modification is a color change. I found that most individuals have no idea how to do this for the script.

The secret is to alter the data URI for the png image ( which I have also included.. ) This image can be changed to any color desired.. by using simple changes in Hue, Saturation.. and so on.. then saved. The next step is to turn the image into a Base64 code, then copy the code into the script..

There are plenty of online versions and even a FF Extension which will allow you to turn an image under 50K into a Base64 code.. Did find one program that was capable.. Can't remember what it was though..

EDIT: Base64Encoder...I think this was the Encoder/Decoder I was speaking of..

The script may need a few small pixel adjustments for your theme, mine has been tweaked for mine.. All code credits go to Krill3.

*Note: Remember to only alter the code area.. ' data:image/png, ' must remain in place. The image code start with something like .. " %89PNG%0D%0A%1A%....... ", this is the area you alter for your image of choice.

Original Post : Progress Lines 1.1 Mod

Download : DeviantArt.com

.tab-progress, .progress-bar, .progress-remainder
{
background: none !important; /* Hides the default Fission progress bar */
}

#urlbar .progress-bar
{
border-bottom: 7px solid transparent !important; /* Needed, trust me on this one */
margin: 0 -26px -4px -4px !important; /* Fiddle with to adapt to other themes */
-moz-border-image: url("data:image/png,%89PNG%0D%0A%1A%0A%00%00%00%0DIHDR%00%00%01'%00%00%00%07%08%06%00%00%00J%81%8B%C3%00%00%00%04sBIT%08%08%08%08%7C%08d%88%00%00%00%09pHYs%00%00%0B%12%00%00%0B%12%01%D2%DD~%FC%00%00%00%1CtEXtSoftware%00Adobe%20Fireworks%20CS5q%B5%E36%00%00%04%00IDATh%81%EDXKr%151%0ClM%02%2CX%C09Xq%FF%5B%E4%26TA%91%CA%2B%18%B1x%23%A7%D5%96%FC%26)%A0X%E0%CD%8CmI-%CB%B6%3E%B6%C7%C7%C7%8Ff%B6%01%D8%DD%DD%00%C0%CC%10%CD%CC%E0%EE%E6%EE1%EE1%E7%EEP%9E%A0%E5%C6c%87%3C%00%60%3A%0F9A%CF%18%00%9E%15*%E6%05%AF%A3e%3C%0BP%A1K%BC*%EF%A0q%D2_%E9%13-%D9%24%D1%A8%1E%2B%8CB%F64%A6%F6V%1A%95%B5%B0W%87%D1%E9%13%7D%8F%F3%C1%F6f%90N%C7%85%EEN%F3%93%3E%B2%B6%09%AF%90%17%8Bp%95w%C8%D0%F1%A5%2C%EE%93%DCD%A3%FB%CF%F7%EA%DA%1Dw%C1i~%BA%83%838%F7%C7%B2%9Aq%95%E17%E6G%BF%1B%3F%CB%FF%12%BA%AA%0F%E0%AD%99%5D%EE%CD%ECst%CC%EC4%407%F6%AF%B5JGr%B4%D5%E5%F8%ED%F8%7F%1A%E3l%2B%9Ci%3B%2F%CE%9A%1DE%F4%5Dy%82%A6%B8%EC%AE6%88~%11%5C8P1n%F5o%95%2C3Kx4%EF*%8B%B1%AA%A0w%EC_r%CE%8C%A7%18%B4X%D6q%B2%7B%04!%1A2%5C%1D%E5%E4%E4%F8%DF%AE%8BK%B2%0E%C7U%D2%03%D8%24%A90%A1%E7%EF%EA_%E5o%AF%94Q%058%A5%7D%0F%E0%BB%3D%3C%3C%FC%1B7%E7%7F%FB%DFN%B6%5BA%B1%9B%3F%13%60%23%98%EC%FB%8E%7D%DF_%AF%E4_j%B7%92%893%DF%5Bcg%FE_%3A%B6%FA%0E%BE%A7%A7%A7O%00%DE%00%F8%C1k%0E%82%AA%AC%02%CA%92%26%CA%B7*%9D%8F%88%13%D1%01%D4Wy)U'~-%036%8E%3E%EE%BE-%F4K%7D%89f%09%A3%FB%17l%E5O%11B%F8R%B48h7%B1%CD%14M%C4%EEK%B9%0B%BC%E0%D3%BD%DA%E4%BF%93%13%3AOQR%22%BC%DA%1Ex%8E%D0j%B7%C1C%19F%E2%97%F5j%BB%B5%1F%90%FF%B0%B5S%3F%CEM%87%AD%F4%95%DC%0A%DB%A5%1F%17%8Ee%A4%CC%A8p%98%5C%C1%0D%B9i%F0F%89%D7%94gN%ACS%89%B7%E0c8_%A8%E1f6%B2%E5%93e%5D%D0j%06%F9%C1%CC%BE%DC%03%F8jfw%00~%F2%3BIS%0E%0D%C3%F3%3C_N.%97%9A7%19%3DX%83%91%0F5%D7%E9%D5E%95%B9Q%AF%87%8EE%D9%C6%7C%DD%E1%0F%BE%CA%A1%F0%9B%40r%A0b%EC%95%23%B7DLkV%BBP%EA%DD%DA%F0%F8%BA%3D%BF%F5%94%0E%B1%E3%3B%FE%87%E3%91%92a%D2%99%1D%92%9C%CC%E4%E8%C9N%DA*%BD%86%3C%D9%8F%0AWex1%06%99%9F%CE%0D%F1%25%99%B2%3E%9DO%8DUR%E2%86%2FaW%F6%D3%F2%AB%14x%25%9A%DE%A80%AFiR%990%3B%DA%0A%FB%CC%5B%5C'%EB%B5%7C%EF%01%7C%BF%07%F0%0D%D7%03%BA%83%0E%978%07v%16%A3%96%AE%1CH%F0%93%B3%60%E0%B1%09%C1SdQ%93S%A3%CB%A7r%2B%03Xf%9D%A2%D0%B46%A6aGH%9B%BF%7C%07%88%7F%D6%B18%BC%2B%3De%B9%C3%B1NQX3Y%CDRD%9F%C1%D7%E0%9B%D0%7Ba%2F%0D%06%E5%C5%0E%7D%8Bh%5D%3Aa%D0%DE%F1%3E%04F%B3%0F%CAg%C8%BE%AB%CAv%86%9Eb%D7%B4%5Ew%B7m%DB%D2%9B%16%E9%1B%0A%25%5B%F0%5DP%DD%04X%F5W'%3F%DE%C0%24x%25%3DVYO3%5E%C9J%F4%15%ED%8D%A6wA%03%C7K%F8%3A%FA%B7%00.v%B9%5C%DE%81%220%F0%EC%3C%8E%BA%9B%A3aj%3C%16%B4%0B%E5%C6)%3Aj%FA%9660%2B%2Cv%9E%E1%20%9B%2C%AFz%AC%8D%83%E5%87%0E%CAsK%FFW%CD%8B%E3uZC%99E%2C%CA%99%D3%D8%EC%FC%D5F%1Dn%23%BA%B5a%F4%09%AB%F0%5D%B5%2C%096%13%DD!o%E7%3E%AF%ED%84%8C%EAI%A2%CA%B4%5Cy%F6%7D_-%A2%CB%DA%D2%E2%9Bl%8A%87%9D%F7%08H%25S%CA%D2%8F%3E%3B%B4%E4%10%C8%1E%C3%F1%8D%12%A0%A1%25%3C%93~U%D6U%EBR%FE%C0%9Ap%3B%9Cf%1E%00%EE%CC%EC%E7%2F%D1%F3j%AD%A8%0F%0D%24%00%00%00%00IEND%AEB%60%82") 0 0 7 0 stretch !important;
}

The other 'Progress Line' edit I have, does not seem to have the glow this one does.. but may go for more minimal appearance.. It is a simple color and adjustment modification that will be specific, ( to CSS ) possibly to each user and style. It is also white but offers shadowing which allows for theme color switching and appearance to remain.. ( like when going from black to white )

This can be found here, and is not pictured.

/*
* Name: Fission - Thin & Smooth line at the bottom
*
* Author: banthaz
*
* Compatibility: + Only tested on Firefox 3.6, Default theme!
* + Mainly developed in:
* Windows 7, Windows Aero OS Theme
* + Also tested on:
* Windows Vista, Windows Aero OS Theme
* Windows XP, Windows Classic OS Theme
* Windows XP, Windows XP (blue) OS Theme
*
* Requires editing: The moving to the start of the URLbar is dependent on the width
* of the box where the favicon is, and the look of your URLbar.
* Because of that you might have to make a slight adjustment in
* the "MOVE TO THE START OF URLBAR" part. It's easy though. Just
* follow the instructions there!
*
* Updated: Aug 05 2010
*
* Version: 1.1
*
* Notes: Change the colors to your favorites!
*/


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


/*************************** BONUS FEATURES ****************************/


/* Bonus feature
#urlbar[fission="fusion"][progress="100"] #identity-box:not(:hover) #identity-icon-label
{
display: none !important;
}*/
/*
(*) The text next to the favicon (for example "mozilla.org") on secure sites (the #identity-icon-label) will be removed until hover on the box where the favicon is (but not when the page loads). This is recommend when Alt. 1 in the "MOVE" part is enabled.
*/





/******************************** MAIN *********************************/


/* Color, Shadow, Position & Height */
#urlbar[fission="fusion"] > #statusbar-icon .progress-bar
{
background-color: highlight !important; /* ← Background color */
-moz-box-shadow: 0px 0px 6px 0px highlight !important; /* ← Shadow (size, color) */
margin-bottom: -1px !important; /* This moves the progress line 1px down */
margin-top: 20px !important; /* This value should be [your URLbar height] - 4px, if you want the progress line to be 1px. If not, just keep on testing until it looks like you want it. */
}





/********************* MOVE TO THE START OF URLBAR *********************/
/* The moving is dependent on the width of the box where the favicon is, and the look of your URLbar. Either try and copy a predefined value from the "PREDEFINED VALUES" part and paste it next to any "Paste/Edit here!" comments, or edit the value next to any "Paste/Edit here!" comment until it looks good. By default, a value tested with Windows 7/Vista with Windows Aero OS Theme and Firefox 3.6 with the default theme is used. */


/************** MOVE **************/
/* Choose ONE of the following alternatives. */


/* Alt. 1: Move always (*) */
urlbar[fission="fusion"][progress]:not([progress="100"]) #identity-box #identity-icon-label
{
display: none !important;
}
urlbar[fission="fusion"] > #statusbar-icon .progress-bar
{
margin-left: -22px !important; /* ← Paste/Edit here! */
}
/*
(*) When you move always, the text next to the favicon (for example "mozilla.org") on secure sites (the #identity-icon-label) must be hidden when the page loads, to keep the box where the favicon is at a consistent width. If you don't like that, use Alt. 2.
*/


/* OR */


/* Alt. 2: Move it only on low security sites, like google.com (*) */
#urlbar:not([level="high"])[fission="fusion"] > #statusbar-icon .progress-bar
{
/*margin-left: -22px !important;*/ /* ← Paste/Edit here! */
}
/*
(*) This does not require temporarily hiding of the text described in the comments of the above code block.
*/


/* OR disable both and don't move at all */




/******** PREDEFINED VALUES *******/
/* Either try and copy a predefined value from here and paste it next to any "Paste/Edit here!" comments in the "MOVE" part, or edit the value next to any "Paste/Edit here!" comment until it looks good. The values below are ony tested with Firefox default theme. */

/*


***** Value tested with Windows 7 & Vista with Windows Aero OS Theme *****
-22px


***** Value tested with Windows XP with Windows Classic OS Theme *****
-26px


***** Value tested with Windows XP with Windows XP (blue) OS Theme *****
-24px


*/

EDIT: Forgot download links and code posts.. updated..

[Sl@pSh0ck™]

Thanks for sharing heath28m, this one is dudulz project, so please guys if you are using Stylish and have some stylish scripts to share .. please don't hesitate to post here :dance2:

[dudulz]

before

after

Firefox 4 Tabs In Titlebar w/ Appmenu As Tab

before

after

Firefox Change Bookmark Menu Folder Icons

Screenshot Tabs - progress throbber

Tabs - progress throbber

Before

After

about:config (tab-icon-image) [Warning]

[Bizarre™]

Does anyone know how to change the context menu in Firefox? Strata Reloaded seems to be able to do that.

[dudulz]

Does anyone know how to change the context menu in Firefox? Strata Reloaded seems to be able to do that.

try this

tooltip,

menupopup menu:not([disabled=true]),

menupopup menuitem:not([disabled=true]) {

font-size: 3mm !important;

font-family: verdana !important;

font-weight: bold !important;

color: black !important;

}

change any font

or you cant seacrh context menu

[dudulz]

purple button

#appmenu-button-container{

margin: 0px 0px 4px 4px !important;

}

#appmenu-button{

padding: 2px 10px 2px 7px !important;

background: -moz-linear-gradient(top, rgba(153,123,179,1), rgba(131,98,162,1), rgba(120,93,159 ,1)) !important;

-moz-border-radius: 0px 0px 4px 4px !important;

border-top: 0px !important;

margin-top: -1px !important;

}

#appmenu-button dropmarker:before {

padding-right: 5px !important;

}

#appmenu-button:hover{

background: -moz-linear-gradient(top, rgba(146,115,174,1), rgba(152,122,178,1)) !important;

}

Remove RSS from address bar

/* Remove live feed icon in Address url toolbar */

#feed-button

{

display: none !important;

}

Hide bookmarks "star" button from address bar

toolbar #star-button{

display:none !important;

}

Hide favicons in bookmarks toolbar

/* Hide bookmark icons in the Personal Toolbar */

toolbarbutton.bookmark-item > .toolbarbutton-icon {

display: none; }

[dudulz]

Screenshot

Perfect Dark Google

[dudulz]

Thanks for sharing heath28m, this one is dudulz project, so please guys if you are using Stylish and have some stylish scripts to share .. please don't hesitate to post here :dance2:

LOL.. might have helped to have added the download links and code.. updated.. BTW.. Sorry..

EDIT: Got some nice edits going! :thumbsup:

@heath28m

please be the author of this thread

because I do not understand english

[HX1]

Does anyone know how to change the context menu in Firefox? Strata Reloaded seems to be able to do that.

Do you mean on 4.0 or 3.6? .. and what specifically.. If dudulz didn't cover it...

[dudulz]

Screenshot

Uploader Link With Favicon

Screenshot

Links: add icon for each type (jpg, wav, doc,...)

After

http://userstyles.org/style_screenshots/35721_after.png

Mediafire Cleaner

[Sl@pSh0ck™]

@heath28m

please be the author of this thread

because I do not understand english

as requested ... heath28m will now be the author of this thread ....

@heath

just edit the first post as you like :)

[HX1]

:thumbsup: I feel so lazy.. all the work already been done.. :lmao:

[dudulz]

@heath28m

please be the author of this thread

because I do not understand english

as requested ... heath28m will now be the author of this thread ....

Thanks you :)

[HX1]

Most welcome!

[Bizarre™]

I finally found out how to modify the context menu :D

For those interested, here's the things you need to add / edit in userchrome.css:

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

/* This is the menu enabled items (e.g., Select All) */
menupopup > menu[_moz-menuactive="true"]:not([disabled="true"]),
menupopup > menuitem[_moz-menuactive="true"]:not([disabled="true"]),
popup > menu[_moz-menuactive="true"]:not([disabled="true"]),
popup > menuitem[_moz-menuactive="true"]:not([disabled="true"])
{ background: url("Put the location of image here") center no-repeat !important;
  border: 1px solid !important;
  border-color: #9BC3FB !important;
  color: #000000 !important;
  -moz-appearance: none !important;
  margin: -1px 1px 1px 1px !important;
  opacity: 0.95 !important; }

/* This is the menu for semi / disabled items (e.g., Back, Forward, Stop) */
menupopup > menu[_moz-menuactive="true"],
menupopup > menuitem[_moz-menuactive="true"],
popup > menu[_moz-menuactive="true"],
popup > menuitem[_moz-menuactive="true"]
{ background: none !important;
  -moz-appearance: none !important;
  margin: 0 2px 2px 2px !important; }

/* This is the image for bullets (e.g., Tab Mix Plus, Page Style, etc.) so it appears black when selected */
menupopup > menuitem[type="radio"][checked="true"] .menu-iconic-left,
popup > menuitem[type="radio"][checked="true"] .menu-iconic-left
{ background: url("Put the location of image here") center no-repeat !important;
  height: 8px !important;
  width: 8px !important;
  -moz-appearance: none !important; }

/* This is the image for checks (e.g., Tab Mix Plus, Check Spelling, etc.) so it appears black when selected */
menupopup > menuitem[type="checkbox"][checked="true"] .menu-iconic-left,
popup > menuitem[type="checkbox"][checked="true"] .menu-iconic-left
{ background: url("Put the location of image here") center no-repeat !important;
  height: 8px !important;
  width: 8px !important;
  -moz-appearance: none !important; }

/* This is the image for enabled arrows (e.g., Bookmark Menu, Context Menu, etc.) so it appears black when selected */
menupopup .menu-right,
popup .menu-right
{ list-style-image: url("Put the location of image here") !important;
  -moz-appearance: none !important;
  -moz-image-region: auto !important;
  padding: 0 10px 0 0 !important;
  position: absolute !important; }

/* This is the image for disabled arrows (e.g., Bookmark Menu, Context Menu, etc.) so it appears faded when selected */
menupopup .menu-right[disabled="true"],
popup .menu-right[disabled="true"]
{ list-style-image: url("Put the location of image here") !important;
  -moz-appearance: none !important;
  -moz-image-region: auto !important;
  padding: 0 10px 0 0 !important;
  position: absolute !important; }

/* This controls the margin for texts on troublesome menus */
menupopup .menu-text,
popup .menu-text
{ margin: 0 0 0 15px !important;
  padding: 3px !important; }

[HX1]

I am looking for some help in how to port this IPB Skin.. over to a Stylish Script.. Thing is I have the .xml.gz files.. I have looked at them.. but it seems that they contain code I do not know much about.. I know this can be done as I have found some scripts for this very thing on the site... all in all about 270 KB... but I have to transfer this into a Stylish Script format..

Anyone have any ideas on how to do this? I know I can encode images into dataURI.. but the skin seems to not have any images except possibly the coded elements in the XML files ( I am guessing ) and a PSD for the logo..... Anyway looking for some ideas/help...

EDIT: I have two scripts that I can use as guides to aid in this.. the big thing is pulling the resources from the skin files right now.. to even look at it..

[HX1]

EDIT: Updated first post to include more images and instructions...

[HX1]

YouTube Dark anyone? - http://userstyles.org/styles/26055

Screenshots and details on the Author page.. good script thought I would share..

Also for UserStyles.org.. http://userstyles.org/styles/20859

[HX1]

This was a tool I used for switching things around and playing with Stylish a little here at the forums... Modified from the script used to change the Google search engine logo.. with additions so on..

What this Script does is takes the logo.. and replaces it with an image of your choice.. sizes, margins, and borders can be changed.. There is one for each theme to demonstrate how the script works..

EDIT: Script is available and one logo ( outdated ) Post #25

nsane.logo.replacer.clean:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http://www.nsaneforums.) {

  img[src*="http://www.nsaneforums.com/public/style_images/13_6_1_logo_1.png"] {

	width: 0 !important;

	height: 74px !important;

	padding-left: 400px !important;

	margin: 0px !important;

	border: 0px !important;

	background-image: url("file:///<---insert location of your image file here, can be file system or URL-->");

	background-position: center center;

	background-repeat: no-repeat;
  }
#branding {

	 min-height: 76px !important;
}
}

nsane.logo.replacer.IPB:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix(http://www.nsaneforums.) {

  img[src*="http://www.nsaneforums.com/public/style_images/1_6_1_logo_1.png"] {

	width: 0 !important;

	height: 80px !important;

	padding-left: 400px !important;

	background-image: url("file:///<---insert location of your image file here, can be file system or URL-->");

	background-position: center center;

	background-repeat: no-repeat;
  }

}

[SacredCultivator]

Hmms, just thought I'd get some user input t see if anyone else happens to use any other scripts, as I was bored and thought to style using Stylish.

- - - -

EDIT:

Is "Greasemonkey" equal/ better than Stylish?

[HX1]

I wondered about GreaseMonkey.. I remember looking into the extension in the past but... I am not sure.. I know that scripts are usually compatible for both but I am not for sure on the differences.. I believe that if your going to go for User Customizations for the FF UI.. that Stylish is the better bet.. and that for the most part GreaseMonkey is going to be used for WebSites... but again like I said I am not 100% sure about it..

EDIT: GreaseMonkey is actually geared towards the usage of scripts within Firefox.. while Stylish is geared toward CSS... now that use both for different purposes.. I can answer this question better.. LOL.. All too late probably..

[HX1]

Remove 'Bookmark This Page' Star Button - FF4 ( From the Location Bar )

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);
#star-button {display:none !important;}

ALSO Handy scripts to customize the FF4 UI..

History/Boomarks Manager:minimal

Compact Location Bar

Autohide Sidebar

About:Addons ( and Options too... )

Transparent Addon and Findbar

Hide/Hidden Scrollbars

Most of these will lend customization to any color and mod you like...

EDIT: Added hidden scrollbars.. Almost like hidden scrollbars extension for Opera but without the fade in and out..

[HX1]

Added a new logo to go with the scripts put up on Post #20 ..

I will be adding a few more images to plugin eventually this is just one of the top as I remembered having these... This should work for both IPB Skins..

EDIT: Outdated

[HX1]

One more to add.. I actually have several variations...

nsane.forum.logo320ipbn.rar