Fast Dial Styles



Notice: Items marked with "n/a" are in preparation, and will be available soon!

Search Gradient Web 2.0 - Fast Dial

Make your search bar look much cooler with a gradient! SCREENSHOTS (click to enlarge): Normal: Photobucket Hover or Focus: Photobucket CODE: @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("chrome://fastdial/content/fastdial.html") { #search { margin-top: 15px !important; margin-bottom: -15px !important; } #search img { -moz-opacity: 0.5 !important; } #search img:hover { -moz-opacity: 0.75 !important; } #search input { padding: 1px 8px 0px 8px !important; border-color: black !important; -moz-border-radius: 10px !important; border-width: 1px !important; font-size: 12px !important; color: black !important; height: 20px !important; width: 250px !important; font-weight: bold !important; background: url("/files/layout/FastDial/gradient4search20px.png") center center repeat-x !important; -moz-opacity: 0.75 !important; } #search input:hover, #search input:focus { -moz-opacity: 1.0 !important; } }

Rounder Fast Dial Cells - Stylish Extension

Note: For the rounder corners to work best, transparent logos must be used, thus firefox 3 will work best - but is not required! (Thanks to chiaroscuro for pointing this out.) _____________________ Hi again.. Heres a tutorial on editing the radius of the Fast Dial box corners with Stylish. Confused? Heres an image of what im actually talking about: Here it is EDITED vs ORIGINAL: Now do you see the difference? User chiaroscuro has found an easy way to do this without CSS Editing..but by using the Stylish Firefox Extension. If you are using Fast Dial v1.9 or below, you can just Load the code into stylish from here: Link. And you are done - no need to follow the below steps!! Thanks to chiaroscuro for posting this on userstyles. To get yours to do the same you must do the Following: ( If you already have Stylish installed skip to Step 3 ) 1. Download Stylish: Link. 2. Restart Firefox 3. Right Click Stlish icon in bottom left corner 4. Choose "Manage Styles" 5. Click "Write.." The code for Fast Dial v1.9 is: @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("about:blank") { div.cell { -moz-border-radius: 20px !important; } } The code for Fast Dial v2 BETA is: @namespace url(http://www.w3.org/1999/xhtml); @-moz-document url-prefix(chrome://fastdial/content/) { .thumbnail { -moz-border-radius: 20px !important; } } Now Give the style a description, and SAVE.

Autohide the Bookmarks Toolbar in Firefox 3

For those who use the Bookmarks Toolbar, especially if in multiple lines, the following code is really useful to get the toolbar out of the way when not needed.

I use this together with the Extension Autohide

I came across this code here


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

/* Auto-hide bookmarks toolbar */
#PersonalToolbar
{
visibility: collapse !important;
}

#navigator-toolbox:hover > #PersonalToolbar
{
visibility: visible !important;
}

Mmmm...
After all that I have discovered that there is a Firefox Extension which does the same thing..

Please see here

Many thanks

BMW/Facebook Userlogos Style - Work in Progress


/*
* BMW/Facebook UserLogos written by M.Shadows
*/

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

@-moz-document url("about:blank") {

body{ background-color:#ffffff !important }
}
@-moz-document url-prefix(http://userlogos.org/) {

* {
background-color: #ffffff !important;
background-image: none !important;
border-color: #222222 !important;
color: #000000 !important;
font-family: Tahoma !important;
}
a:link {
color: #0d3958 !important;
}
a:visited {
color: #0d3958 !important;
font-weight: bold !important;
}
a:hover,
a:active {
color: #0d3958 !important;
}
em {
color: #3b5998 !important;
}
select,
textarea,
input[name=q],
input[type=text],
input[type=password],
input[type=file] {
background-color: #cbd5df !important;
-moz-appearance: none !important;
color: #000000 !important;
font-family: Tahoma !important;
font-size: .9em !important;
border: 1px solid #bdc7d8 !important;
}
input[type=button],
input[type=submit],
input[type=reset] {
background-color: #5c74a3 !important;
color: #ffffff !important;
font-family: Verdana !important;
font-weight: bold !important;
-moz-appearance: none !important;
border-color: #183262 !important;
}
img {
opacity: 1.00 !important;
-moz-opacity: 1.00 !important;
}

}

Centre Tab text and change Tab Font Color in Firefox

This small Style will enable one to change the Font Color , and Centre Text in the Firefox Tab

I use in conjunction with this style, which alters many of Firefox's Internal Fonts including Tabs


Please alter color to suit.



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

.tab-text
{
text-align: center !important;
color:#CCCCCC !important;
}

Change Font for UserLogos

Am playing with this at the moment.

This is a basic starting point.


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

@-moz-document domain("userlogos.org")

{

*
{
font-family:ENTER FONT HERE !important;
}

}

Another option I am trying at the moment allows certain windows to have a new font and other parts of the UL Page to retain their conventional aspect.
(using bluemarine)
A good use would be a scrpt style font for only the central elements


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

@-moz-document domain("userlogos.org")

{

p,div.node
{
font-family:ENTER FONT NAME HERE !important;
}

}

Change Many of the Fonts in Firefox

I use this in conjunction with the small change Tab Font Style I put together


By altering the name of the Font in this Style you will be able to change a number of Fonts that appear in Firefox.

Work in progress.


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

menubar > menu, menubar, menubutton, menulist, menuitem
{
font-size: 12px !important;
font-family: FONT NAME HERE !important;
font-weight: normal !important;
}

menupopup > *
{
font-size: 12px !important;
font-family: FONT NAME HERE !important;
font-weight: normal !important;
}

#urlbar
{
font-size: 12px !important;
font-family: FONT NAME HERE !important;
font-weight: normal !important;
}

#ubhist-popup > .popup-internal-box, .textfield-popup > .popup-internal-box
{
font-size: 12px !important;
font-family: FONT NAME HERE !important;
font-weight: normal !important;
}

dialog, box, button, page, label, caption, textbox, input, select
{
font-size: 12px !important;
font-family: FONT NAME HERE !important;
font-weight: normal !important;
}

window
{
font-size: 12px !important;
font-family: FONT NAME HERE !important;
font-weight: normal !important;
}

#sidebar
{
font-size: 12px !important;
font-family: FONT NAME HERE !important;
font-weight: normal !important;
}

Controlling the layout of Userlogos Front Page - Version 1 - for Blue Marine

This is the first effort to try and stop the Userlogos Page in Bluemarine from going very wide in the center section when a Logo entry is for some reason causing this.

Have not got on top of this one yet.
But it did the job when the page went very wide
Am trying to get it so it matches the standard page,but not there yet.

This Style is made to have an effect on the Frontpage only

I need to make a similar Style for the Logo/Logo search page

I hope you find this useful


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

@-moz-document url("http://userlogos.org/")

{

div.node
{
width:400px; !important
}

div.content
{
width:400px; !important
}

body

{
td#sidebar-left
{
width:50px; !important
}

td#sidebar-right
{
width:50px; !important
}

}

Detailed Instructions how to Load a Style into Stylish from UL

For more general information about Stylish please see here

________________________________________________________________________________________

Typically Styles written for Stylish are simply downloaded from Userstyles.

Find the Style you want and click load into Stylish and all is done

___________________________________________________________________________________________

However on this site we have a number of inhouse Styles.

To Load these one has to go though the following steps

1. Download Stylish

2. Copy all the text of the Style from the UL page

3. Open Stylish Manage Styles Window

4. Click on write (write a new style/blank)

5. Paste in the text that you have copied.

6. Name the file

7. Save the file

8. If you get any errors it would suggest that you might have missed some detail when you selected the text, so please try again

________________________________________________________________________________________

FD Styles Archive

This is an archive of Styles made for earlier Versions of Fast Dial and Experimental Versions

"Sample CSS" - Fast Dial

This is not strictly a Stylish Style at all.

But it is in css and there is nowhwere else to put it right now.

_______________________________________________________________________________________

This was telega's sample css that he put together for Fast Dial 2.5-6.
It is a useful template for creating a css for Fast Dial

(It was very easy in 2.15-6 to load and save css versions to Themes)

I will put 2 Versions here

The original telega Version

The expanded Stylish Version of the same code that a user can modify to suit.

Original telega Version

body { background-image: none; background-repeat: repeat;
background-position: top left; font-family: 'Tahoma'; font-size: 11;
background-color: #000000; } .back { background-image:
url(chrome://fastdial/skin/back.png); } #grid { border-spacing: 10; }
.thumbnail { background-color: transparent; border: 1px solid #d3d3d3;
opacity: 1; } .title { color: #000000; background-color: #eeeeee;
border-top: 1px solid #d3d3d3; } div.thumbnail:hover, .hover {
background-color: transparent; border: 1px solid #d3d3d3; opacity: 1; }
div.thumbnail:hover .title, .hover .title { color: #000000;
background-color: #e8e8e8; border-top: 1px solid #d3d3d3;

3. Stylish Version (modified)

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

body
{
/*background-image: none !important;*/
/*background-repeat: repeat !important;*/
background-position: center !important;
font-family: 'Tahoma' !important;
font-size: 11px !important;
background-color: black !important;
}

.back
{
background-image: url(chrome://fastdial/skin/back.png) !important;
}

#grid
{
border-spacing: 10px !important;
}

div.thumbnail
{
background-color: transparent !important;
border: 1px solid transparent !important;
opacity: 0.9 !important;
}

div.thumbnail:hover
{
background-color: transparent !important;
border: 1px solid transparent !important;
opacity: 1.0 !important;
}

div.title
{
color: transparent !important;
background-color: transparent !important;
border-top: 1px solid transparent !important;
}

div.title:hover
{
color: white !important;
background-color: transparent !important;
border-top: 1px solid transparent !important;
}

Firefox 3.5 - Annoying Search Bookmarks and History in the URL Field

Came across these few lines of code that remove the very annoying
Search Bookmarks and History in the URL Field.

These words appear when you are in the Root Folder in Fast Dial

Here is the link to the Userstyles Page
http://userstyles.org/styles/19165

Pop these few lines into Stylsh

And things will be back to normal.

Perfect for Fast Dial users !

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

#urlbar[empty="true"] {

color: transparent !important;

}

Hide Favicons & other stuff in v2.15 beta 11 - Fast Dial

This is just a temporary fix due to shortcomings in Preferences in Version 2.15 beta 11

Please copy paste into Stylish.

To simply remove Favicons please use this

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

.title img
{
-moz-opacity: 0.0 !important;
}

or


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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

.title img
{
display:none !important;
}

---

Help (top right) only appears on hover
Favicons the same (does not work as favicons so small)
Fast Dial logo removed

In 2.15 beta 11 favicons appear on hover.
So this works well with Title also appearing on Hover

---

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

/* help button top right */

a#help
{
-moz-opacity: 0.0 !important;
}

a#help:hover
{
-moz-opacity: 1.0 !important;
}

/* favicons */
.title img
{
-moz-opacity: 0.0 !important;
}

.title img:hover
{
-moz-opacity: 1.0 !important;
}

/* fast dial logo */
img#enable
{
-moz-opacity: 0.0 !important;
}

Hide help except on Hover Fast Dial 2.23

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

/* help button top right */

a#help
{
-moz-opacity: 0.0 !important;
}

a#help:hover
{
-moz-opacity: 1.0 !important;
}

Hide help permanently 2.23

Please load into Stylish

This code will stop the word Help from appearing in your Fast Dial Screen.

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

/* help button top right */

a#help
{
display:none !important;
}

Larger Fast Dial Cells on hover

Playing around with this at the moment.

Works after a fashion.

Please change size to suit

Best maybe to keep original ratio size of cell.

So check computed values in Fast Dial/Preferences/General/General/Size

before changing values in code

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

div.thumbnail:hover
{
width: 480px !important;
height: 360px !important;
}

Opacity in Fast Dial 1.x - Stylish Extension

This description will be expanded but is at present quite usable.

--------------------------------------------------------------------------------------

It is quite possible to alter the Opacity of all the Cells in Fast Dial 1.x

To do this one makes use of a very useful Firefox Extension called Stylish.

There is a short introduction to Stylish here

To simply download Stylish from the Mozilla Add-Ons page go here.

The best site for finding Styles to use in Stylish is called Userstyles

At the moment there are a couple of Styles on the Userstyles Site that will enable you to alter the Opacity of your Fast Dial Cells

Style 1 enables one to change the Opacity of All Cells in Fast Dial 1.x.
Also it allows one to alter the Opacity of Dialling Cells Seperately from Group Cells.

Style 2 is eactly the same as Style 1 but it has the added possibility of altering the opacity of your cell when you hover over it with the Mouse.

.

PedroMRP's Tranparent Search Bar - Fast Dial

This fix was invented entirely by PedroMRP here .

It was placed in a Style format for ease of loading.

---

Text colour of course can be changed to suit in this line

color: white;

font size in this line

font-size: 1.2em;

---

this is the effect

Before (your wndow may also be white) Default v2.14 Toolbar

Screenshot_-_28_10_2008_,_04_06_16.png - upload images with Picamatic

after

Screenshot_-_28_10_2008_,_04_07_00.png - upload images with Picamatic

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

#search {
margin-top: 5px;
margin-bottom: -5px;
}

#search input {
font-size: 1.2em;
color: white;
border: 1px solid lightgray;
background: transparent;
}

Rounder Cells in FD1 - Fast Dial

This is an adaption of a Lain_13 idea see here to be used in Fast Dial 1.x

The whole matter is discussed in detail in Mafi0z Tutorial Rounder Fast Dial Cells

This can also be downloaded directly into Stylish from Userstyles here

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

@-moz-document url("about:blank") {

}

div.cell

{

-moz-border-radius: 25px !important;

}

Stylish Version 1.0.0 plus

There is it seems a new Version of Stylish


References to new Stylish Logo here


Mozilla Addons/ AMO Ver 1.0.1 (May 4 ) Download link


There a number of not so positive reports on AMO to this Version

Old version better
by Kellchmia on May 5, 2009
I don’t want Jason to feel bad but I really like the old version.
Other users have mentioned the reasons.


Some Feedback to Version 1.0 (Jason Barnabe) Link

---

Further more detailed comments on Version 1.0 here

---

Please see more detailed comments on Version 1.0a here

---

Please see more detailed comments on Version 1.0.1beta here


How to get old icons back, revert to previous version and other useful tips by Jason Barnabe (plus a thread devoted to the whole question) here


Stylish Nostalgia Icons here (uses old icons in new Version)

But effects icons both in status bar and addons panel.
But probably can be edited to suit, but have not tried as yet.


There are a number of facilities that are being permanently removed.

No important! button anymore.
No colorpicker either.

My sympathies are with Drugoy...


Two useful styles to go with Version 1.0.1

Stylish - Manage Window beautified

Stylish - Edit Window beautified


So modified by Stylish now becomes:

Screenshot_-_10_05_2009_,_04_02_41.png - Picamatic - upload your images


Temporary Fix to remove Search Icon in 2.23b

The problem of turning off the display of the Search Bar in Fast Dial v2.23b has been resolved in Version 2.23b1

Please see also see discussion here
______________________________________________________________________________________

It is easy to hide the search bar in Version 2.22b

But there is a setting change in Version 2.23earlybeta (not yet released) that is not so effective.

I am told that I should set in Preferences/General the Search value to zero
I have done that
But it has no effect at all.

Either I will discover how to remove it, or maybe Fast Dial will be changed.

However in the meanwhile for anyone that has a similar problem, one can make the search bar transparent and remove the search engine faviocon with this Style.

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

}

img#search-icon
{
display:none !important
}

Transparency with Hover for v1.x - Fast Dial

This Style is for Fast Dial 1.x

Thanks to telega a very well designed and easily set up Opacity setting is in place in Fast Dial 2

This Style can be loaded directly into Stylish from here.

________________________________________________________________________________________

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

@-moz-document url("about:blank") {
}

/*-----for dialling cells-----*/

.image
{
opacity: 0.5;
}

.image:hover
{
opacity: 0.0;
}

/*-----for cells with group-----*/

.parent
{
opacity: 0.5;
}

.parent:hover
{
opacity: 0.0;
}

Voting display colour - UserLogos

Please enter the colours or images of your choice to make your own display.

Hover and opacity settings are offered should you want to use them

This is the gradient Version seen against a dark background

This Version at the moment set to grey with change of opacity on hover
Please enter the colours you would like to use and change settings to suit.

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

@-moz-document domain("userlogos.org") {

}

div.foreground
{
background:grey !important;
-moz-opacity: 0.75 !important;
}

/* colour on hover */

div.foreground:hover
{
background:grey !important;
-moz-opacity: 1.0 !important;
}

This is a variation using Mafi0z Gradient that he made for the Search Bar
See picture above

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

@-moz-document domain("userlogos.org") {

}

div.foreground
{
background:url("/files/layout/FastDial/gradient4search20px.png") center center repeat-x !important;
-moz-opacity: 0.75 !important;
}

div.foreground:hover
{
-moz-opacity: 1.0 !important;
}

change cell size in Fast Dial

This Style is just sitting here to be adapted by different users for their own needs

If you change the values you can use Fast Dial to calculate the height for you

Put this together really for anyone who wanted to make cells smaller than the Fast Dial minimum size

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

@-moz-document url("chrome://fastdial/content/fastdial.html") {

.box
{
width:400px !important;
height:300px !important;
}

}

Fast Dial Transparent For Vista And Windows 7 Only.

This code makes fast dial and all of firefox transparent but the down side is it makes all websites transparent, which some people will like it some people won't.

Beginners can have a look at the beginning of this thread here http://userlogos.org/node/12345

Make sure you remove all other transparent apps, plugins, addons or stylish glass codes.

You will need to add both styles or it will not work, firefox may freeze when enabling styles.

If firefox freezes click on show desktop on windows and restore firefox, will not happen again until you disable any of the styles.

Add New Stylish Name It Glass Firefox.

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

*:not([style*="rgb"]){
-moz-appearance: -moz-win-glass !important ;
background: transparent !important;
color:white !important;

}

Add Another Stylish Name It Glass Websites and Fast Dial.

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

@-moz-document url("") {

*:not([style*="rgb"]){
-moz-appearance: transparent !important ;
color: white !important;}

}

@-moz-document url-prefix("http://"), url-prefix("https://") {

*:not([style*="rgb"]){
background: black !important ; }

}

Click on this link for expanded version

http://i44.tinypic.com/2qdsrw2.jpg

Help in using Stylish

________________________________________________________________________________________

This is a collection of links that I have put together for those interested in using the Firefox Extension Stylish


Download Stylish

here


Recent link

http://www.honestlyillustrated.com/userstyles/stylishguide/


It's all Text Download

Ver 0.8.5 only !!!!
Later Versions don't work in Stylish !!!!!!!

here

----------------------------------------------------------------------------------------

Stylish Quick Guide

here

----------------------------------------------------------------------------------------
Stylish Edit Window Tutorial by ChoGGi

here

----------------------------------------------------------------------------------------

ChoGGi's Guide to using Stylish Tutorial

here

----------------------------------------------------------------------------------------

Custom Userstyle made just for viewing ChoGGi's Guide to using Stylish by whatrevolution

here

----------------------------------------------------------------------------------------

whatrevolution's Guide to using Stylish Tutorial

here

----------------------------------------------------------------------------------------

Valacar's Specificity Guide Thread/Tutorial

here
----------------------------------------------------------------------------------------

Best way to design with Stylish Interview
Globex designs

here

----------------------------------------------------------------------------------------

Stylish Forum

here

----------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------

Modified Version of Midnight Surfing Global Dark Style for Userlogos

Thanks to gumanov for this
Without this modification a number of images would not be visible on userlogos

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

/* Browser Background */
browser[type="content-primary"] {background-color: #141414 !important;}

@-moz-document url-prefix(http://), url-prefix(https://), url-prefix(ftp://), url-prefix(file://) {

/*No background images. try to exclude icons, other misc items. */

*:not(:empty):not([onclick*="open"]):not(SPAN):not([class*="stars"]):not([id*="stars"]):not([id="rating"]):not([class="rating"]):not([class*="SPRITE"]):not([id*="SPRITE"]):not([id*="lbImage"]):not([id*="sideheader"])

{ background-image: none !important }

/* Basic Bodies */
HTML, BODY { background: none #141414 !important }

/* Make descendents of the body element transparent. Formerly "DIV + SPAN" rules. */
BODY * {background-color: transparent !important}

/* Give id's BG hopefully */
DIV[id] {background-color: inherit !important}

/* Filter non-icons */
SPAN:not(:empty):not([class*="icon"]):not([id*="icon"]):not([class*="star"]):not([id*="star"]):not([id*="rating"]):not([class*="rating"]):not([class*="Sprite"]):not([class*="sprite"]) {

background: none transparent !important;
border-color: #000 !important}

/* Try to contrast containers */
html:root > BODY > * > * > * > *:not(INPUT):not([onclick]) > DIV:not(:empty):not([id])

{background: none #1c1c1c !important}

/* :::::::: Text Presentation :::::::: */

SUMMARY, DETAILS {background-color: inherit !important}

ABBR, PROGRESS, TIME, LABEL,
.date {color: #CDEFC2 !important}

MARK,
CODE, PRE,
BLOCKQUOTE,
[class*="quote"],
TD[style*="inset"][class="alt2"] { background-color: #00090F !important }

/* :::::::: Headings + Header :::::::: */

/* Header gradient rules */

HEADER, #header {background: -moz-linear-gradient(#333,#141414) transparent !important;}
#header h1 {background-color: transparent !important;}

H1, H2 {

background: none #28313E !important;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;}

H3, H4 {

background: none #2A3731 !important;
border-radius: 5px !important;
-moz-border-radius: 5px !important;
-webkit-border-radius: 5px !important;}

H5, H6 {background: none #372A2A !important}

/* :::::::: Lists :::::::: */

DT {background-color: #2B3135 !important}
DL, DD {background-color: #232323 !important}
LI, UL {background-color: inherit !important}

LI A:not([class*="icon"]):not([id*="icon"]):not([onclick]),
DT A:not([class*="icon"]):not([id*="icon"]):not([onclick])

{background-image: none !important; text-indent: 0 !important}

/* :::::::: list Item highlight :::::::: */

LI[class*="item"] A:hover,
LI[class*="item"]:hover,

[class*="menuitem"]:hover /* Not list item, but still useful*/

{background-color: #2E2B2F !important}

/* :::::::: Tables, cells :::::::: */

TABLE {background-color: #232323 !important; border-color: #333 !important}
TABLE TABLE {background: #191919 !important;}

TH, CAPTION {background-color: #353535 !important}

/* :::::::: Input :::::::: */

/*Basic*/

INPUT *, TEXTAREA * {color: #DDD !important;} /* anonymous divs */

HTML BODY INPUT:not([type="image"]), button,
HTML BODY TEXTAREA {

background: none #353535 !important;
-moz-appearance: none !important;
-webkit-appearance: none !important;
color: #DDD !important;
border: solid 1px #777 !important;
border-radius: 0 !important;
-moz-border-radius: 0 !important;
-webkit-border-radius: 0 !important;
opacity: 1 !important;}

/* Style reset. */

HTML BODY INPUT[type="checkbox"] {-moz-appearance: checkbox !important; -webkit-appearance: checkbox !important;}
HTML BODY INPUT[type="radio"] {-moz-appearance: radio !important; -webkit-appearance: radio !important;}

/* :::::::: Custom styling :::::::: */

HTML:root INPUT[type="button"],
HTML:root INPUT[type="submit"],
HTML:root INPUT[type="reset"],
HTML:root BUTTON {

color: #EEE !important;
background-color: #222437 !important;

-moz-box-shadow: inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.15), inset 0 -15px 30px rgba(0,0,0,0.2) !important;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.2), inset 0 10px rgba(255,255,255,0.1), inset 0 10px 20px rgba(255,255,255,0.15), inset 0 -15px 30px rgba(0,0,0,0.2) !important;}

HTML:root INPUT[type="button"]:hover,
HTML:root INPUT[type="submit"]:hover,
HTML:root INPUT[type="reset"]:hover,
HTML:root BUTTON:hover {

color: #FFF !important;
background-color: #31344F !important;
border-color: #5F687F !important;

-moz-box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3) !important;
-webkit-box-shadow: inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3) !important;}

HTML:root INPUT[type="image"] {opacity: .85 !important}
HTML:root INPUT[type="image"]:hover {opacity: .95 !important}

/* Drop-down menu */

SELECT, OPTION, optgroup{

background: none #383838 !important;
border-color:#555 !important;
color:#f1f1f1 !important;
-moz-appearance: none !important;}

/* :::::::: Misc :::::::: */

ADDRESS {background: none #333 !important}
HR {background: none #444 !important}
.current {color: #FFF !important;} /*currently viewed page*/

/* Remove Rounded Corners, Borders, Spacer, Padding images */

IMG[src*="spacer"]:empty,
[id*="round"]:empty,
[id*="bottom"]:empty, [class*="bottom"]:empty, [class*="Bottom"]:empty,
[id*="top"]:empty, [class*="top"]:empty, [class*="Top"]:empty,
[class*="spacer"]:empty

{background-image: none !important;}

/* Menus and Navigation */

NAV,
MENU,

/*Common naming conventions - in case previous declarations fail to give solid BG*/

HTML BODY [class*="open"],
HTML BODY [id*="Dropdown"],
HTML BODY [id*="dropdown"],
HTML BODY [class*="Dropdown"],
HTML BODY [class*="dropdown"],
HTML BODY [id*="menu"]:not(SELECT),
HTML BODY [class*="menu"]:NOT(SELECT),
HTML BODY [class*="tooltip"],
HTML BODY [class*="popup"],
HTML BODY [id*="popup"],

/* Notes, details, etc. Maybe useful */

HTML BODY [class*="note"],
HTML BODY [class*="detail"],
HTML BODY [class*="description"]

{background-color: #232323 !important}

/* Also common */
[class*="content"], [class*="container"] {background-color: #1c1c1c !important}

/* Headers, Logos */

[id*="masthead"] a,[id*="header"] a,
[id*="logo"] a, [class*="logo"] a

{text-indent: 0 !important;}

/* Instead of increasing specificity rating by using :not, set rules separately */

HTML:root BODY [class*="layer"],
HTML:root BODY #lightbox-nav,
HTML:root BODY #imageContainer {background-color: transparent !important}

/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* Universal - sets color of text, border */

* {
color: #CCC !important;
border-color: #444 !important;
outline-color: #444 !important;
text-shadow: none !important;}

html *:after,
html *:before

{color: #CCC !important;
border-color: #666 !important;
background: none transparent !important}

/* Link */

a:link,
a:link *:not(IMG){

color: #B1CBF7 !important;
background-color: transparent !important;
border-color: #666 !important;}

a:visited,
a:visited * {color: #CDB4E7 !important;}

a:hover,
a:hover *:not(IMG){

color: #FFE900 !important;
background-color: #363037 !important;
border-color: #999 !important}

html [href*="#"]:hover {color: #FFE900 !important; background-color: transparent !important;}

/* Event Handlers/Attributes */

[onclick],
[ondblclick],
[onmousedown]

{color: #DFD5BC !important;
text-indent: 0 !important}

[onclick]:hover,
[ondblclick]:hover,
[onmousedown]:hover

{color: #FEFF97 !important;}

/* Make images transparent */

IMG { opacity: .75 !important;}
IMG:hover { opacity: 1 !important; background-color: #888 !important; }
svg {background: none #666 !important;}

/* Highlight */
::-moz-selection {background-color: #626F61 !important; color: #F6F7B9 !important;}

/* :::::::: Specific Fixes :::::::: */

/* google search link fix */
.g .r {background-color: transparent !important;}

/* google result hover highlight*/
div.vsc:hover > .vspi, div.vso > .vspi {background: none transparent !important; border: none !important;}

}

/* :::::::: About... :::::::: */

@-moz-document url(about:newtab) {

window {background: #141414 !important;}

#newtab-scrollbox {
background-color: transparent !important;
background-image:
url("chrome://browser/skin/newtab/noise.png"),
-moz-linear-gradient(transparent,transparent) !important }

.newtab-title {background-color: rgba(0,0,0,.75) !important; color: #eee !important;}

}

@-moz-document url(about:blank) {

html, html * {
background: none #141414 !important;
color: #CCC !important;}

}

@-moz-document url-prefix("about:neterror") {

html, body {background-color: #353535 !important; color: #CCC !important}
#errorPageContainer {background-color: #222 !important; border-color: #666 !important}
#errorPageContainer button {opacity: .8 !important}

/*resurrect pages FF extension*/
#resurrect {background-color: #333 !important; border-color: #000 !important}

}

Moving your Styles in Stylish from one Profile to Another

----------------------------------------------------------------------------------------
If one does a Full Profile Backup and Restore with Febe then all the styles as well as Stylish will be restored in the New Profile.

-----------------------------------------------------------

If you use Febe to simply copy your extensions then it will not copy the Styles.

---

However I have learned from Mafia_Penguin the following regarding Febe :

Go to Tools>FEBE>FEBE Options
Click on "User-defined backups".
feBE.JPG - upload images with Picamatic
Click "New".
Fill out the information, and check "Include in backup". Click "Post entries and exit".
Screenshot_-_01_11_2008_,_03_27_52.png - Picamatic - upload your images

This is a useful procedure

_________________________________________________________________________________________

If you want to recover your styles from an otherwise corrupt profile, it is quite sufficient to do the following.

1. Look for the file stylish.rdf in the Profile you want to copy FROM.

2. Copy the contents of the file in 1. into your stylish.rdf in the Profile you want to copy tp, being careful at the same time to remove the previous contents

This system can save a lot of work, as many Styles may also have been customised.

Remove/Hide Cell Buttons in Fast Dial Display

To remove Fast Dial Buttons



 
@namespace url(http://www.w3.org/1999/xhtml); @-moz-document url("chrome://fastdial/content/fastdial.html") { div.button { display:none !important } }

Rounded cells on hover for Fast Dial with glow for dark background

Have been looking at ways of improving on the previous Version

The previous Version had this effect on hover

Image and video hosting by TinyPic


This is a new Version without glow:


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

@-moz-document url-prefix(chrome://fastdial/content/)
{
.thumbnail
{
border: 7px solid transparent !important;
-moz-border-radius:10px !important;
}
}

This will have this effect:

Image and video hosting by TinyPic


This other new Version includes a glow for a dark background

Here is the code


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

@-moz-document url-prefix(chrome://fastdial/content/)
{
.thumbnail
{
border: 7px solid transparent !important;
-moz-border-radius:10px !important;
-moz-box-shadow:0px 0px 10px #ffffff !important;
}
}

effect of with glow

Image and video hosting by TinyPic

and here the same cell with a Logo on hover with glow

Image and video hosting by TinyPic

Rounder Cells in FD2 - Fast Dial

This Style was first posted on the Mozilla Russia Fast Dial Forum by Lain_13 here in English. (here in Russian)

What this Style does is to allow the user to make the border of each cell rounder in FD 2 .

This whole matter is described in detail in Mafi0z Tutorial Rounder Fast Dial Cells

The great usefulness of this style is if you like to have a change of background colour in a cell on hover, then this style will enable you to have a rounded cell just on hover, this will then create a coloured rounded cell.
This is somehow more elegant and makes a change from the square.

This also of course works well if you have a blank transparent logo loaded in a cell.
Works well too if opacity of the resulting colour is changed on hover as well.

---

( If you already have Stylish installed skip to Step 3 )
1. Download Stylish: Link.
2. Restart Firefox
select/copy all the code below
3. Right Click Stylish icon in bottom right corner on the status bar
4. Choose "Manage Styles"
5. Click "Write new Style/Blank"
Give a title to the Style
Paste in the code into the Window
then save

---

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

@-moz-document url-prefix(chrome://fastdial/content/)
{

.thumbnail
{
-moz-border-radius: 10px !important;
}

}


*Change the -moz-border-radius value to suit.

Rounder cells for white background on hover with shadow effect

Have been looking at ways of improving on the previous Version

Many thanks to LAMj

This Version will add a drop shadow to the cells on hover
Here is the code


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

@-moz-document url("chrome://fastdial/content/fastdial.html")
{

.thumbnail {
border: 7px solid #ffffff !important;
-moz-border-radius:10px !important;
-moz-box-shadow:3px 3px 10px -2px #000000 !important;
}

}


This is the effect

Image and video hosting by TinyPic


Stylish - Remove horizontal rule (hr) lines on Userlogos


This Style was put together for MShadows

see comment here

This should remove all horizontal rule lines (hr) on UL when loaded into Stylish.

Here are some test lines (should disappear):







Enjoy !


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

@-moz-document domain("userlogos.org")
{

hr
{
display:none !important;
}

}

Stylish install Problems with AVG Version 9.0

Am running Stylish Version 1.0.2 in Firefox 3.5.3
Fine
Works well.

Have tried to install more recent Versions of Stylish and Stylish refuses to install.

Have Googled the problem.

Have tried disabling AVG Free(Version 9)(recently installed)
Did not work
Have tried loading Firefox in safe mode.
Did not work

Uninstalled AVG Free (Version 9)
Managed to load new Version of Stylish with no problem.

MOST TIRESOME !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

Transparent Logos on UL - Black to a finer checkerboard - chiaroscuro

Posted by chiaroscuro

The below is a developement of an original proposal by Mafi0z here.

This was then developed to make this Style.

This Style will allow you to view all Transparent Logos on UL with a background custom colour of your choice.
It will also show a checkerboard background on Hover to confirm that the Logo is indeed Transparent.

Please change the background colour in this line to suit your own background

For the effect of this Style on a transparent Userlogos Logo (by Grawl) please see bottom of page

background: black !important;

Help in using Stylish

This is the Style. Please copy paste into Stylish.

/*
* Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/

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

@-moz-document domain("userlogos.org") {

.node .content .field-type-image img

{
background: #202020 !important;
}

.node .content .field-type-image img:hover

{
background: #eee url('http://i41.tinypic.com/2ynijq9.png') 0 0 repeat !important;
}

}



Image and video hosting by TinyPic


Transparent Logos on UL - Checkerboard to Black - macleod.mac's

The purpose of this style is to easily show what logos look like both on a light and dark background. Light checkerboard is default, with black on mouseover.


/*
* Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/

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

@-moz-document domain("userlogos.org") {

}

.node .content .field-type-image img

{
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}

.node .content .field-type-image img:hover

{
background: black !important;
}

Transparent Logos on UL - Original suggestion for chequerboard style - gumanov

This was Mafi0z first ground-breaking suggestion

This causes transparent logos to have a checkerboard background, enabling quick identification

First posted here


.node .content .field-type-image img {
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}

Transparent Logos on UL - White to Black - no checkerboard

/*
* Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/

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

@-moz-document domain("userlogos.org") {

}
.node .content .field-type-image img
{

background: #ffffff !important;
}

.node .content .field-type-image img:hover
{

background: #101010 !important;
}

Transparent Logos on UL - black to coarse checkerboard - chiaroscuro

Posted by chiaroscuro

The below is a developement of an original proposal by Mafi0z here.

This was then developed to make this Style.

This Style will allow you to view all Transparent Logos on UL with a background custom colour of your choice.
It will also show a checkerboard background on Hover to confirm that the Logo is indeed Transparent.

Please change the background colour in this line to suit your own background

For the effect of this Style on a transparent Userlogos Logo (by Grawl) please see botoom of page

background: black !important;

Help in using Stylish

This is the Style. Please copy paste into Stylish.

/*
* Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/

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

@-moz-document domain("userlogos.org") {

.node .content .field-type-image img

{
background: #202020 !important;
}

.node .content .field-type-image img:hover

{
background: #eee url('http://i39.tinypic.com/2rxuro4.png') 0 0 repeat !important;
}

}



Image and video hosting by TinyPic

View the Userlogos Page in Wide Mode (BlueMarine only)


The advantage of this Style, is that the document that you are working on/or reading, fills the whole page in Firefox, and you can concentrate on the contents of the whole page a lot easier, especially if there are images..

For use with BlueMarine Theme only ....

If you want to you can set it up just for one thread.
Go stylish, write style for this page, and post in the rest of the code.

For this post for example your Style would start:

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

@-moz-document url("http://userlogos.org/node/7083")
{

td#sidebar-left

{
display:none !important
}

td#sidebar-right

{
display:none !important
}

}


Use the following code for all the pages of Userlogos

@namespace url(http://www.w3.org/1999/xhtml
@-moz-document domain("userlogos.org") {

td#sidebar-left

{
display:none !important
}

td#sidebar-right

{
display:none !important
}
}