Why I Love Firefox.... Pics

dugums

dugums

Better, Faster, Stronger
Apr 10, 2007
699
0
16
Chicago, IL
Besides all of the typical, useful reasons, I love being able to change CSS and javascript to my favorite sites so they look better to me!

These aren't complete yet, but thought I would share.

No header, no ads, integrated into my browser scheme.
117z9ci.jpg


Supramania Red header and bg pic.
vgtztl.jpg
 
dugums

dugums

Better, Faster, Stronger
Apr 10, 2007
699
0
16
Chicago, IL
Well, there are a bunch of ready-made themes at the firefox add-on site.

Here is the browser theme I am using: https://addons.mozilla.org/en-US/firefox/addon/4521

Supramania CSS attributes can be changed via javascript or CSS manipulation. I did mine by overriding CSS using the "stylish" add on:
https://addons.mozilla.org/en-US/firefox/addon/2108

There are also ready-made stylish and grease monkey(javascript based add on) "templates" available for popular sites:

20rvayh.jpg

15390k7.jpg


If I ever get a couple more minutes to finish up my theme, I'll post it so it can be used -- I'll have to take out the ad-removal coding -- I wouldn't want Mike to get angry.
 
dugums

dugums

Better, Faster, Stronger
Apr 10, 2007
699
0
16
Chicago, IL
mk3ftMFw said:
you have the same theme i do, im not sure how to change everything to black... LEARN ME!!!
Click to expand...

Well, the version that contains the header is pretty much done. It will give you the black/grey/red theme and looks good with lumiblue, supramania red, or default styles chosen.

If you want I can send it to you along with instructions. I haven't really had a chance to "debug" it - so you should let me know if I missed something. If you want the header-less style, I'll probably finish that up eventually.

If you want to do it for yourself - you download stylish and alter css properties. If you don't know css already, it's pretty easy to learn.
 
dugums

dugums

Better, Faster, Stronger
Apr 10, 2007
699
0
16
Chicago, IL
Here is the first one. It uses only CSS changes, so should work for just about everybody. It is intended for use with Supramania Red, but looks good with Lumiblue and Default styles as well.

This is a Black/Grey/Red/White theme, I also have a javascript theme almost ready which is mainly black with white text and red table borders. It removes the header so you can get more content on the screen.

1. Go to https://addons.mozilla.org/en-US/firefox/addon/2108

2. Download and install stylish.

3. Restart Firefox.

4. Tools > Addons > Stylish > Options > Write

5. Description: Anything you want (i.e. Supramania)

6. Copy and paste code into the editor

7. Save

CODE said:
@-moz-document domain(www.supramania.com) {

body{
background: #000000!important;
color: #ffffff!important;}

center table tr{
visibility: collapse!important;
height: 0px!important;
background:#000000!important;}

iframe{visibility: collapse!important;}

a:link{color: #ffffff!important;}
a:visited{color: #ffffff!important;}
a:hover, a:active{color: #FF0000!important;}

.page{
background: #000000!important;
color: #ffffff!important;}

.tborder{
background: #111111!important;
color: #ffffff!important;
border: 1px solid #ff0000!important;}

.tcat{
background: #111111!important;
color: #FFFFFF!important;}

.tcat a:link{color: #ffffff!important;}
.tcat a:visited{color: #ffffff!important;}
.tcat a:hover, .tcat a:active{color: #FFFFFF!important;}

.thead{
background: #333333!important;
color: #FFFFFF!important;}

.thead a:link{color: #FFFFFF!important;}
.thead a:visited{color: #FFFFFF!important;}
.thead a:hover, .thead a:active{color: #FF0000!important;}

.tfoot{
background: #111111!important;
color: #ffffff!important;}

.tfoot a:link{color: #ffffff!important;}
.tfoot a:visited{color: #ffffff!important;}
.tfoot a:hover, .tfoot a:active{color: #ff0000!important;}

.alt1, .alt1Active{
background: #111111!important;
color: #ffffff!important;}

.alt2, .alt2Active{
background: #111111!important;
color: #ffffff!important;}

td.inlinemod{
background: #111111!important;
color: #ffffff!important;}

.wysiwyg{
background: #111111!important;
color: #ffffff!important;}

.time{color: #ffffff!important;}

.highlight{
color: #FF0000!important;
font-weight: bold!important;}

.fjsel{
background: #111111!important;
color: #ffffff!important;}

.fjdpth0{
background: #111111!important;
color: #ffffff!important;}

.panel{
background: #111111 url(images/gradients/gradient_panel.gif) repeat-x top left!important;
color: #ffffff!important;
border: 2px outset #ff0000!important;}

.panelsurround{
background: #111111 url(images/gradients/gradient_panelsurround.gif) repeat-x top left!important;
color: #ffffff!important;}

legend{color: #ffffff!important;}

.vbmenu_control{
background: #111111!important;
color: #FFFFFF!important;}

.vbmenu_control a:link{color: #FFFFFF!important;}
.vbmenu_control a:visited{color: #FFFFFF!important;}
.vbmenu_control a:hover, .vbmenu_control a:active{color: #FF0000!important;}

.vbmenu_popup{
background: #111111!important;
color: #ffffff!important;
border: 1px solid #ff0000!important;}

.vbmenu_option{
background: #111111!important;
color: #ffffff!important;}

.vbmenu_option a:link{color: #ffffff!important;}
.vbmenu_option a:visited{color: #ffffff!important;}
.vbmenu_option a:hover, .vbmenu_option a:active{color: #FFFFFF!important;}

.vbmenu_hilite{
background: #111111!important;
color: #FFFFFF!important;}

.vbmenu_hilite a:link{color: #FFFFFF!important;}
.vbmenu_hilite a:visited{color: #FFFFFF!important;}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active{color: #FFFFFF!important;}
}
Click to expand...

Let me know if there are any issues.
 
Last edited:
M

mk3ftMFw

Mini Toon Burnout!! FTW!!
Jan 24, 2007
95
0
0
Cincy
here's a problem, i cant write in the reply box with the code on toyotatuners.com... any ideas??

p799458_1.jpg
 
dugums

dugums

Better, Faster, Stronger
Apr 10, 2007
699
0
16
Chicago, IL
mk3ftMFw said:
here's a problem, i cant write in the reply box with the code on toyotatuners.com... any ideas??
Click to expand...

Haha
The script is for supramania.com. It was developed specifically for the CSS at this site. The first line of the script means that it should only be applied to this site.

It would not be wise to use it elsewhere as some of the elements are dealt with in a not-so-subtle way. It sort of like I used a sledgehammer to kill a mosquito in a couple of lines. It works here, because I inspected the html files to make sure these lines did not affect site content.

It can easily be used at other sites, but it would need to be modified a bit. Check if this works, if not, PM me a pic of the site without the style applied along with the HTML source. I imagine much of this code is doing nothing at that site:

modified code said:
body{
background: #000000!important;
color: #ffffff!important;}

a:link{color: #ffffff!important;}
a:visited{color: #ffffff!important;}
a:hover, a:active{color: #FF0000!important;}

.page{
background: #000000!important;
color: #ffffff!important;}

.tborder{
background: #111111!important;
color: #ffffff!important;
border: 1px solid #ff0000!important;}

.tcat{
background: #111111!important;
color: #FFFFFF!important;}

.tcat a:link{color: #ffffff!important;}
.tcat a:visited{color: #ffffff!important;}
.tcat a:hover, .tcat a:active{color: #FFFFFF!important;}

.thead{
background: #333333!important;
color: #FFFFFF!important;}

.thead a:link{color: #FFFFFF!important;}
.thead a:visited{color: #FFFFFF!important;}
.thead a:hover, .thead a:active{color: #FF0000!important;}

.tfoot{
background: #111111!important;
color: #ffffff!important;}

.tfoot a:link{color: #ffffff!important;}
.tfoot a:visited{color: #ffffff!important;}
.tfoot a:hover, .tfoot a:active{color: #ff0000!important;}

.alt1, .alt1Active{
background: #111111!important;
color: #ffffff!important;}

.alt2, .alt2Active{
background: #111111!important;
color: #ffffff!important;}

td.inlinemod{
background: #111111!important;
color: #ffffff!important;}

.wysiwyg{
background: #111111!important;
color: #ffffff!important;}

.time{color: #ffffff!important;}

.highlight{
color: #FF0000!important;
font-weight: bold!important;}

.fjsel{
background: #111111!important;
color: #ffffff!important;}

.fjdpth0{
background: #111111!important;
color: #ffffff!important;}

.panel{
background: #111111 url(images/gradients/gradient_panel.gif) repeat-x top left!important;
color: #ffffff!important;
border: 2px outset #ff0000!important;}

.panelsurround{
background: #111111 url(images/gradients/gradient_panelsurround.gif) repeat-x top left!important;
color: #ffffff!important;}

legend{color: #ffffff!important;}

.vbmenu_control{
background: #111111!important;
color: #FFFFFF!important;}

.vbmenu_control a:link{color: #FFFFFF!important;}
.vbmenu_control a:visited{color: #FFFFFF!important;}
.vbmenu_control a:hover, .vbmenu_control a:active{color: #FF0000!important;}

.vbmenu_popup{
background: #111111!important;
color: #ffffff!important;
border: 1px solid #ff0000!important;}

.vbmenu_option{
background: #111111!important;
color: #ffffff!important;}

.vbmenu_option a:link{color: #ffffff!important;}
.vbmenu_option a:visited{color: #ffffff!important;}
.vbmenu_option a:hover, .vbmenu_option a:active{color: #FFFFFF!important;}

.vbmenu_hilite{
background: #111111!important;
color: #FFFFFF!important;}

.vbmenu_hilite a:link{color: #FFFFFF!important;}
.vbmenu_hilite a:visited{color: #FFFFFF!important;}
.vbmenu_hilite a:hover, .vbmenu_hilite a:active{color: #FFFFFF!important;}
}
Click to expand...
 
Last edited:
M

mk3ftMFw

Mini Toon Burnout!! FTW!!
Jan 24, 2007
95
0
0
Cincy
I cahnged the first link to toyotatuners.com instead of supramania.com. It changed the layout pretty well.. only the text box is messed up.

My last picture i posted is of toyotatuners.com. but i will try that code when i get back home.
 
dugums

dugums

Better, Faster, Stronger
Apr 10, 2007
699
0
16
Chicago, IL
mk3ftMFw said:
I cahnged the first link to toyotatuners.com instead of supramania.com. It changed the layout pretty well.. only the text box is messed up.

My last picture i posted is of toyotatuners.com. but i will try that code when i get back home.
Click to expand...

Just create a separate one for toyotatuners with the modified code. That way, if we need to do more troubleshooting we don't mess with the working one for SM.

Like I said, if that does not work, just email me the page source for a toyotatuners.com page and tell me how you want it to look - it will only take me a couple minutes to get it set up.
 
eman2289

eman2289

Noob..but not incompetent
Feb 23, 2007
618
0
0
Jersey
Its pretty cool, i just put it on but then uninstalled it, it kinda makes my head hurt. Pretty cool though.
 
You must log in or register to reply here.
Top Bottom