Thread: How To: Create your own theme/colors for most websites

UPDATE: Added two more themes

Before and After Sample:
http://img155.imageshack.us/img155/3530/beforeafter.gif

This tutorial is in response to a couple of threads I read regarding the theme/color of TI. Personally, I'm comfortable with it, but thought some of you may find this easier on the retinas.

NOTE: Versions are not necessarily important. It's very possible it will work with older versions, so as long as the Stylish Plugin is compatible with Firefox. If you have older versions then please try it and post back if it worked or not. Below are tested and working versions, but again, not necessarily a requirement.

Firefox 3.0.11
Stylish Plugin 1.0.3

1. Search what version of FF you have and install it with the corresponding version of Stylish.
You can find the version you have installed by clicking Help > About Mozilla Firefox located on top of the FF browser.

https://addons.mozilla.org/en-US/fir.../versions/2108

2. Once installed, you should have this image located at the bottom right corner of the browser. Optionally, you can place the Stylish icon at the toolbar if you know how to customize it. If not, you can go here.

Toolbar customization - Firefox - MozillaZine Knowledge Base

3. Left Click > Write new Style > Blank Style

A "New Style" window will appear that should look like this

.

4. In the Name dialog box, you can put whatever you want. I just put Gold CTICSS because most of the text are colored in yellow while the posted text is white. I do plan on having other colors you can choose from perhaps something called Fish CTICSS with green text....lol. Or even share what you've come up with. I'll get into detail for those who aren't familiar with web dev stuff. I included notes to hopefully encourage users to create their own colors.

5. In the "Tags" dialog box, you can leave it blank.

6. Copy the code below and paste it into the larger dialog box. Make sure to copy everything because a missing curly bracket will break the whole thing. Currently, you can choose from three different themes:

- Gold CTICSS Theme (below)
- Red & Gold CTICSS Theme
- Pink CTICSS Theme

Gold CTICSS Theme:

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

@-moz-document domain("www.torrent-invites.com"), domain("torrent-invites.com"){

/**********GOLD CTICSS***********/
/**********By: Patman************/


/*BACKGROUND COLOR **NOTE: RECOMMENDED TO LEAVE IT AS IS** */
body
{
background-color: #000000 !important;
color: #646464 !important;
}



/*COLOR OF FORUM BACKGROUND*/
.page
{
background-color: #000000 !important;
}

/*COLOR FOR LINKS NOT VISITED*/
a:link, body_alink
{
color: #C8B560 !important;

/*I REMOVED THE UNDERLINE FOR LINKS*/
text-decoration: none !important;
}

/*COLOR FOR LINKS VISITED*/
a:visited, body_avisited
{
color: #817339 !important;

/*I REMOVED THE UNDERLINE FOR VISITED LINKS.
IF YOU REMOVE THIS, LINKS THAT YOU HAVE VISITED
WILL BE UNDERLINED. (CAN BE USEFUL FOR SOME)*/

text-decoration: none !important;
}

/*COLOR FOR HOVERING OVER LINKS ONLY FOR THE TOP MENU*/
a:hover, a:active, body_ahover
{
color: #EAC117 !important;

/*UNDERLINE WILL ONLY APPEAR WHEN HOVERING OVER LINKS*/
text-decoration: underline !important;
}

/*COLOR FOR TEXT AT THE BOTTOM OF SITE*/
.page
{
color: #C8B560 !important;
}

/*COLOR FOR HOVERING OVER LINKS FOR THE MAJORITY OF THE SITE*/
.page a:hover, .page a:active, .page_ahover
{
color: #EAC117 !important;
}

/*COLOR FOR SOME TITLES MOSTLY FOUND AT "HOME" PAGE*/
.tcat
{
color: #C8B560 !important;
}

/*COLOR FOR THREAD HEADER*/
.thead
{
color: #C8B560 !important;
}

/*****************THREAD HEADER******************/

/*COLOR FOR THREAD HEADER LINKS NOT VISITED*/
.thead a:link, .thead_alink
{
color: #C8B560 !important;
}

/*COLOR FOR THREAD HEADER LINKS VISITED*/
.thead a:visited, .thead_avisited
{
color: #817339 !important;
}

/*COLOR FOR THREAD HEADER LINKS WHEN HOVERING*/
.thead a:hover, .thead a:active, .thead_ahover
{
color: #EAC117 !important;
}

/*COLOR FOR POSTS AND OTHER MISC TITLES*/
.alt1, .alt1Active
{
color: #FFFFFF !important;
}

/*COLOR FOR POSTS AND OTHER MISC TITLES*/
.alt2, .alt2Active
{
color: #FFFFFF !important;
}

/*COLOR FOR TIME*/
.time
{
color: #FFFFFF !important;
}

/****CUSTOM BANNER****/
/*THIS WAS JUST A BANNER I PUT TOGETHER REAL QUICK SO YOU CAN DELETE EVERYTHING BELOW. THIS WAS JUST A PROOF OF CONCEPT.
ALTERNATIVELY, YOU CAN JUST COMMENT IT OUT OR CREATE YOUR OWN. IMAGE SHOULD BE 830PX X 120PX
*/

img[src$="30d9yrd.jpg"]
{
padding-right:830px !important;
margin-right: -5px !important;
height:120px !important;
background-image:url("http://img145.imageshack.us/img145/2417/ticopy.png") !important;
width:0px !important;
}

}

7. Click Save and it should immediately change to the Gold CTICSS theme/color. You can easily disable CTICSS by unchecking in the Stylish Icon if you don't like it.

Red & Gold CTICSS Theme:

Screen shot


Go through Steps 2-7 again, but with the code below if you want this theme.

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

@-moz-document domain("www.torrent-invites.com"), domain("torrent-invites.com"){

/**********RED & GOLD CTICSS***********/
/**********By: Patman************/


/*TEXT COLOR FOR LINKS NOT VISITED*/
a:link, body_alink
{
color: #C8B560 !important;

/*I REMOVED THE UNDERLINE FOR LINKS*/
text-decoration: none !important;
}

/*TEXT COLOR FOR LINKS VISITED*/
a:visited, body_avisited
{
color: #817339 !important;

/*I REMOVED THE UNDERLINE FOR VISITED LINKS.
IF YOU REMOVE THIS, LINKS THAT YOU HAVE VISITED
WILL BE UNDERLINED. (CAN BE USEFUL FOR SOME)*/

text-decoration: none !important;
}

/*TEXT COLOR FOR HOVERING OVER LINKS ONLY FOR THE TOP MENU*/
a:hover, a:active, body_ahover
{
color: #EAC117 !important;

/*UNDERLINE WILL ONLY APPEAR WHEN HOVERING OVER LINKS*/
text-decoration: underline !important;
}

/*TEXT COLOR FOR TEXT AT THE BOTTOM OF SITE*/
.page
{
color: #C8B560 !important;
}

/*TEXT COLOR FOR HOVERING OVER LINKS FOR THE MAJORITY OF THE SITE*/
.page a:hover, .page a:active, .page_ahover
{
color: #EAC117 !important;
}

/*TEXT COLOR FOR SOME TITLES MOSTLY FOUND AT "HOME" PAGE*/
.tcat
{
color: #C8B560 !important;
}

/*TEXT COLOR FOR THREAD HEADER*/
.thead
{
color: #C8B560 !important;
}

/*****************THREAD HEADER******************/

/*TEXT COLOR FOR THREAD HEADER LINKS NOT VISITED*/
.thead a:link, .thead_alink
{
color: #C8B560 !important;
}

/*TEXT COLOR FOR THREAD HEADER LINKS VISITED*/
.thead a:visited, .thead_avisited
{
color: #817339 !important;
}

/*TEXT COLOR FOR THREAD HEADER LINKS WHEN HOVERING*/
.thead a:hover, .thead a:active, .thead_ahover
{
color: #EAC117 !important;
}

/*TEXT COLOR FOR POSTS AND OTHER MISC TITLES*/
.alt1, .alt1Active
{
color: #FFFFFF !important;
}

/*TEXT COLOR FOR POSTS AND OTHER MISC TITLES*/
.alt2, .alt2Active
{
color: #FFFFFF !important;
}

/*TEXT COLOR FOR TIME*/
.time
{
color: #FFFFFF !important;
}

/*BLACKSTREAM TEST*/
#header
{
background-image: url('') !important;
background-color: #301616 !important;
}



/**********************************

******************************************/

/*COLOR OF FORUM BACKGROUND*/
.page
{
background-color: #301616 !important;
}

/*COLOR OF BACKGROUND FOR ENTIRE PAGE*/
body
{
background-color: #000000 !important;
}

/*TEXT & BACKGROUND COLOR OF 'Contact Us' PAGE*/
.panel
{
background: #301616 !important;
color: #FFFFFF !important;
}

/*TEXT & BACKGROUND COLOR OF BOTTOM WEBSITE*/
td[valign="bottom"][bgcolor="#141414"]
{
background-color: #301616 !important;
color: #C8B560 !important;
}

/* A gradient_thead.gif*/
.tcat
{
background: #3f1f1f url('http://img38.imageshack.us/img38/8460/redgradientthead.gif') repeat-x top left !important;
}

/* A gradient_thead.gif*/
.thead
{
background: #3f1f1f url('http://img38.imageshack.us/img38/8460/redgradientthead.gif') repeat-x top left !important;

}

/* A gradient_thead.gif*/
.tfoot
{
background: #3f1f1f url('http://img38.imageshack.us/img38/8460/redgradientthead.gif') repeat-x top left !important;
}

/* A gradient_thead.gif*/
.vbmenu_control
{
background: #3f1f1f url('http://img38.imageshack.us/img38/8460/redgradientthead.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.alt1, .alt1Active
{
background: #3c1010 url('http://img189.imageshack.us/img189/1629/redalt1.gif') repeat-x top left !important;
background-color: #3c1010 !important;
}

/* B alt1.gif*/
.alt2, .alt2Active
{
background: #3c1010 url('http://img189.imageshack.us/img189/1629/redalt1.gif') repeat-x top left !important;
background-color: #3c1010 !important;
}

/* B alt1.gif*/
textarea, .bginput
{
background: #3c1010 url('http://img189.imageshack.us/img189/1629/redalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.button
{
background: #3c1010 url('http://img189.imageshack.us/img189/1629/redalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.wysiwyg
{
background: #3c1010 url('http://img189.imageshack.us/img189/1629/redalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.panelsurround
{
background: #3c1010 url('http://img189.imageshack.us/img189/1629/redalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.vbmenu_hilite
{
background: #3c1010 url('http://img189.imageshack.us/img189/1629/redalt1.gif') repeat-x top left !important;
}

/* D menu_m.png*/
.homelink
{
background-image: url('http://img34.imageshack.us/img34/6360/menumr.png') !important;
}

/* C menu_l.png*/
.homevisited
{
background-image: url('http://img29.imageshack.us/img29/1372/menulg.png') !important;
}

/* C menu_l.png*/
.homehover
{
background-image: url('http://img29.imageshack.us/img29/1372/menulg.png') !important;
}

/* E gradient_tcat.gif*/
.tcatfont
{
background-image: url('http://img32.imageshack.us/img32/6352/redgradienttcat.gif')!important;
}

/* E NOTE:THIS IS THE LEFT CORNER PIECE gradient_tcatleft.gif*/
img[src$="gradient_tcatleft.gif"]
{
padding-right: 5px !important;
height: 25px !important;
background-image: url("http://img187.imageshack.us/img187/9182/redgradienttcatleft.gif") !important;
width: 0px !important;
}

/* E NOTE:THIS IS THE RIGHT CORNER PIECE gradient_tcatright.gif*/
img[src$="gradient_tcatright.gif"]
{
padding-right: 5px !important;
height: 25px !important;
background-image: url("http://img440.imageshack.us/img440/3812/redgradienttcatright.gif") !important;
width: 0px !important;
}


/* C NOTE:THIS IS THE LEFT CORNER PIECE*/
img[src$="menu_l.png"]
{
padding-right: 10px !important;
height: 30px !important;
background-image: url("http://img29.imageshack.us/img29/1372/menulg.png") !important;
width: 0px !important;
}

/* F NOTE:THIS IS THE RIGHT CORNER PIECE*/
img[src$="menu_r.png"]
{
padding-right: 50px !important;
height: 30px !important;
background-image: url("http://img193.imageshack.us/img193/1106/redmenur.png") !important;
width: 0px !important;
}

}

Great job bro, Im using the 1st one and its great really brightened the whole site, which is easier on my eyes great job

Chunky

Pink CTICSS Theme:

Screen shot


Go through Steps 2-7 again, but with the code below if you want this theme.

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

@-moz-document domain("www.torrent-invites.com"), domain("torrent-invites.com"){

/**********Pink CTICSS***********/
/**********By: Patman************/


/*TEXT COLOR FOR LINKS NOT VISITED*/
a:link, body_alink
{
color: #990155 !important;

/*I REMOVED THE UNDERLINE FOR LINKS*/
text-decoration: none !important;
}

/*TEXT COLOR FOR LINKS VISITED*/
a:visited, body_avisited
{
color: #6f6f6f !important;

/*I REMOVED THE UNDERLINE FOR VISITED LINKS.
IF YOU REMOVE THIS, LINKS THAT YOU HAVE VISITED
WILL BE UNDERLINED. (CAN BE USEFUL FOR SOME)*/

text-decoration: none !important;
}

/*TEXT COLOR FOR HOVERING OVER LINKS ONLY FOR THE TOP MENU*/
a:hover, a:active, body_ahover
{
color: #8f687e !important;

/*UNDERLINE WILL ONLY APPEAR WHEN HOVERING OVER LINKS*/
text-decoration: underline !important;
}

/*TEXT COLOR FOR TEXT AT THE BOTTOM OF SITE*/
.page
{
color: #990155 !important;
}

/*TEXT COLOR FOR HOVERING OVER LINKS FOR THE MAJORITY OF THE SITE*/
.page a:hover, .page a:active, .page_ahover
{
color: #8f687e !important;
}

/*TEXT COLOR FOR SOME TITLES MOSTLY FOUND AT "HOME" PAGE*/
.tcat
{
color: #990155 !important;
}

/*TEXT COLOR FOR THREAD HEADER*/
.thead
{
color: #990155 !important;
}

/*****************THREAD HEADER******************/

/*TEXT COLOR FOR THREAD HEADER LINKS NOT VISITED*/
.thead a:link, .thead_alink
{
color: #990155 !important;
}

/*TEXT COLOR FOR THREAD HEADER LINKS VISITED*/
.thead a:visited, .thead_avisited
{
color: #6f6f6f !important;
}

/*TEXT COLOR FOR THREAD HEADER LINKS WHEN HOVERING*/
.thead a:hover, .thead a:active, .thead_ahover
{
color: #8f687e !important;
}

/*TEXT COLOR FOR POSTS AND OTHER MISC TITLES*/
.alt1, .alt1Active
{
color: #FFFFFF !important;
}

/*TEXT COLOR FOR POSTS AND OTHER MISC TITLES*/
.alt2, .alt2Active
{
color: #FFFFFF !important;
}

/*TEXT COLOR FOR TIME*/
.time
{
color: #FFFFFF !important;
}

/*BLACKSTREAM TEST*/
#header
{
background-image: url('') !important;
background-color: #301616 !important;
}



/**********************************

******************************************/

/*COLOR OF FORUM BACKGROUND*/
.page
{
background-color: #5f0738 !important;
}

/*COLOR OF BACKGROUND FOR ENTIRE PAGE*/
body
{
background-color: #000000 !important;
}

/*TEXT & BACKGROUND COLOR OF 'Contact Us' PAGE*/
.panel
{
background: #5f0738 !important;
color: #FFFFFF !important;
}


/*TEXT & BACKGROUND COLOR OF BOTTOM WEBSITE*/
td[valign="bottom"][bgcolor="#141414"]
{
background-color: #5f0738 !important;
color: #990155 !important;
}

/* A gradient_thead.gif*/
.tcat
{
background: #d6087c url('http://img80.imageshack.us/img80/6283/pinkgradientthead.gif') repeat-x top left !important;
}

/* A gradient_thead.gif*/
.thead
{
background: #d6087c url('http://img80.imageshack.us/img80/6283/pinkgradientthead.gif') repeat-x top left !important;

}

/* A gradient_thead.gif*/
.tfoot
{
background: #d6087c url('http://img80.imageshack.us/img80/6283/pinkgradientthead.gif') repeat-x top left !important;
}


/* B alt1.gif*/
.alt1, .alt1Active
{
background: #d6077b url('http://img269.imageshack.us/img269/562/pinkalt1.gif') repeat-x top left !important;
background-color: #d6077b !important;
}

/* B alt1.gif*/
.alt2, .alt2Active
{
background: #d6077b url('http://img269.imageshack.us/img269/562/pinkalt1.gif') repeat-x top left !important;
background-color: #d6077b !important;
}

/* B alt1.gif*/
textarea, .bginput
{
background: #d6077b url('http://img269.imageshack.us/img269/562/pinkalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.button
{
background: #d6077b url('http://img269.imageshack.us/img269/562/pinkalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.wysiwyg
{
background: #d6077b url('http://img269.imageshack.us/img269/562/pinkalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.panelsurround
{
background: #d6077b url('http://img269.imageshack.us/img269/562/pinkalt1.gif') repeat-x top left !important;
}

/* B alt1.gif*/
.vbmenu_hilite
{
background: #d6077b url('http://img269.imageshack.us/img269/562/pinkalt1.gif') repeat-x top left !important;
}

/* A gradient_thead.gif*/
.vbmenu_control
{
background: #d6087c url('http://img80.imageshack.us/img80/6283/pinkgradientthead.gif') repeat-x top left !important;
}

/* D menu_m.png*/
.homelink
{
background-image: url('http://img268.imageshack.us/img268/6291/pinkmenum.png') !important;
}

/* C menu_l.png*/
.homevisited
{
background-image: url('http://img338.imageshack.us/img338/9589/pinkmenul.png') !important;
}

/* C menu_l.png*/
.homehover
{
background-image: url('http://img338.imageshack.us/img338/9589/pinkmenul.png') !important;
}

/* E gradient_tcat.gif*/
.tcatfont
{
background-image: url('http://img381.imageshack.us/img381/3289/pinkgradienttcat.gif')!important;
}

/* G NOTE:THIS IS THE LEFT CORNER PIECE gradient_tcatleft.gif*/
img[src$="gradient_tcatleft.gif"]
{
padding-right: 5px !important;
height: 25px !important;
background-image: url("http://img140.imageshack.us/img140/7620/pinkgradienttcatleft.gif") !important;
width: 0px !important;
}

/* H NOTE:THIS IS THE RIGHT CORNER PIECE gradient_tcatright.gif*/
img[src$="gradient_tcatright.gif"]
{
padding-right: 5px !important;
height: 25px !important;
background-image: url("http://img339.imageshack.us/img339/9820/pinkgradienttcatright.gif") !important;
width: 0px !important;
}


/* C NOTE:THIS IS THE LEFT CORNER PIECE*/
img[src$="menu_l.png"]
{
padding-right: 10px !important;
height: 30px !important;
background-image: url("http://img338.imageshack.us/img338/9589/pinkmenul.png") !important;
width: 0px !important;
}

/* F NOTE:THIS IS THE RIGHT CORNER PIECE*/
img[src$="menu_r.png"]
{
padding-right: 50px !important;
height: 30px !important;
background-image: url("http://img80.imageshack.us/img80/7634/pinkmenur.png") !important;
width: 0px !important;
}


}

Sweet, thanks for this p00n. I bet JustJenna will especially love this.

quite interesting, I'm just wondering, if you do this, can u then take the CSS style sheet that firefox made and change the site with it? I'm guessing probably not, if you run the site the css settings in your styles.css are probably different right? or does FF somehow read the settings first then mod' them..

can u then take the CSS style sheet that firefox made and change the site with it?

Firefox didn't/doesn't make the CSS. You/I can make a custom CSS. To my understanding, the Stylish add-on manipulates the existing CSS to the ones I've created above. Here is an easier break down that I hope can help.

Before:
-TI CSS > FIREFOX BROWSER > DEFAULT STYLE

After:
-TI CSS > FIREFOX BROWSER > STYLISH ADD-ON > ANY STYLE

if you run the site the css settings in your styles.css are probably different right? or does FF somehow read the settings first then mod' them..

I'm not exaclty sure what your asking, but Yes you are correct. "FF somehow read the settings first then mod' them.."

I use this too! Have been for about a year now. I changed google site to a dark blue theme
Google Web Search - Blue Theme (vC) | userstyles.org