TCBasic

Customize TC Styles

Last Updated on Thursday, 22 October 2009 07:10

Thanks to Mused [591697] for this code/ Tutorial!

This tutorial shows you hwo to customize the CSS (page styles) for Torn City.
For instance, you can change the sidebar colours, text colours, text sizes, fonts and backgrounds etc. on every page.

How to install and implement custom styles:

To be able to use Custom Styles, you need to be using the Firefox browser, and install the Stylish extension.
Download the Firefox browser from:
http://www.mozilla.com/en-US/firefox/
Remember, if you don't like it, you can always just uninstall it again.

Then, open the firefox browser, and install the following Greasemonkey firefox addon:
https://addons.mozilla.org/en-US/firefox/addon/2108

After you've restarted firefox, open torncity.com, and click on the small page and paintbrush icon at the bottom of the page.
Then select Write Style > For www.torncity.com, as shown:


You can now enter a description for your Style into the box that pops up, and then enter the code for the style itself into the larger box.

For now you can now copy and paste in the entire following code as an example (courtesy of Mused):


After you've entered this code (You have to Save it, and click ‘use the code as it is’ when the Error box pops up), your TC page should change to the following Styles:


You can edit this code at will- you can use Google to find simple (or complex) tutorials on how to edit and change page Styles.
It should be easy for you to edit the colors, fonts, backgrounds etc by editing the template above, and removing/ adding attributes. The '!important' in the code overrides TC's default CSS.

If you have any other Styles/Codes you'd like to share with other users, please comment on this page, or in the forums.


Comments (11)

Subscribe to this comment's feed

Show/hide comments
...
0
In forums, we can see "Super secret reinforced spam barrier".
Newbie , December 10, 2008
...
NiTRO
Ermmm heres a code for a Grey and Pink skin:)

@-moz-document domain("www.torncity.com") {

body, td {
font-family:Arial, Helvetica, sans-serif !important;
color: #FF00CC !important;
font-size: 11px !important;
background-color: #999999 !important;
}
input, textarea, select{
color : #FF00CC !important;
font: normal 10px !important;
border-collapse: collapse !important;
border: 1px solid #999999 !important;
}
.maintable {
border: 1px #FF00CC solid !important;
background-color: #999999 !important;
width: 90% !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 12px !important;
}
.regrow {
font-family: Verdana,Sans-serif !important;
color: #999999 !important;
font-weight: bold !important;
background-color: #999999 !important;
}
.headline {font-family: Verdana,Sans-serif !important;font-weight: bold !important;color: #FF00CC !important;background-color: #999999 !important;font-size: 11px !important}
.mainrow {
font-family: Verdana,Sans-serif !important;
color: #999999 !important;
background-color: #999999 !important;
font-size: 14px !important
}
.maintables {
border: 1px #FF00CC solid !important;
width: 120px !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 12px !important;
}

th {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: small !important;
font-weight: bold !important;
background-color: #999999 !important
}
td {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 11px !important
}
form {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 11px !important
}
input {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 10px !important;
color: #FF00CC !important
}
select {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 10px !important;
color: #FF00CC !important
}
textarea {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 10px !important;
color: #FF00CC !important
}
h1 {font-family: helvetica, arial, geneva, sans-serif !important; font-size: large !important; font-weight: bold !important}
A:link {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: none !important;
color: #FF00CC !important
}
A:visited {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: none !important;
color: #FF00CC !important
}
A:hover {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: underline !important;
color: #FF00CC !important
}

smalltext {font-family: Arial !important; font-size: 10 !important; color:#FF00CC !important}

}
Jamie , January 07, 2009
...
nandinhathayde
sorry copied just a bit :) there is it full

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

@-moz-document domain("www.torncity.com") {

body, td {
font-family:Papyrus, Comic Sans, tahoma !important;
color: #FF6EB4 !important;
font-size: 13px !important;
background-color: #000000 !important;
}
input, textarea, select{
color : #F00 !important;
font: normal 12px !important;
border-collapse: collapse !important;
border: 2px solid #000000 !important;
}
.maintable {
border: 1px #003366 solid !important;
background-color: #C6CBFF !important;
width: 100% !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 14px !important;
}
.regrow {
font-family: Comic Sans, Tahoma !important;
color: #000000 !important;
font-weight: bold !important;
background-color: #C6CBFF !important;
}
.headline {font-family: Comic Sans, Tahoma !important;font-weight: bold !important;
color: #FFFFFF !important;
background-color: #003366 !important;
font-size: 13px !important
}
.mainrow {
font-family: Comic Sans, Tahoma !important;
color: #000000 !important;
background-color: #C6CBFF !important;
font-size: 16px !important
}
.maintables {
border: 1px #003366 solid !important;
width: 120px !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 14px !important;
}

th {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: small !important;
font-weight: bold !important;
background-color: #003366 !important
}
td {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 13px !important
}
form {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 13px !important
}
input {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 12px !important;
color: #FF83FA !important
}
select {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 12px !important;
color: #FF83FA !important
}
textarea {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 12px !important;
color: #FF83FA !important
}
h1 {font-family: Papyrus, Comic Sans, Tahoma, garamond !important
font-size: large !important;
font-weight: bold !important
}
A:link {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 13 !important;
text-decoration: none !important;
color: #FF83FA !important
}
A:visited {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 13 !important;
text-decoration: none !important;
color: #FF83FA !important
}
A:hover {
font-family: Papyrus, Comic Sans, Tahoma, garamond !important;
font-size: 13 !important;
text-decoration: underline !important;
color: #900 !important
}

smalltext {font-family: Arial !important; font-size: 10 !important; color:#333333 !important}

}
Fernanda , February 06, 2009
...
picaleo
Here is my "TornCityWhite" Theme

@-moz-document domain("www.torncity.com") {

body, td {
font-family:Arial, Helvetica, sans-serif !important;
color: #999999 !important;
font-size: 11px !important;
background-color: #FFFFFF !important;
}
input, textarea, select{
color : #FF00CC !important;
font: normal 10px !important;
border-collapse: collapse !important;
border: 1px solid #999999 !important;
}
.maintable {
border: 1px #FF00CC solid !important;
background-color: #999999 !important;
width: 90% !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 12px !important;
}
.regrow {
font-family: Verdana,Sans-serif !important;
color: #999999 !important;
font-weight: bold !important;
background-color: #999999 !important;
}
.headline {font-family: Verdana,Sans-serif !important;font-weight: bold !important;color: #FF00CC !important;background-color: #999999 !important;font-size: 11px !important}
.mainrow {
font-family: Verdana,Sans-serif !important;
color: #999999 !important;
background-color: #999999 !important;
font-size: 14px !important
}
.maintables {
border: 1px #FF00CC solid !important;
width: 120px !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 12px !important;
}

th {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: small !important;
font-weight: bold !important;
background-color: #999999 !important
}
td {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 11px !important
}
form {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 11px !important
}
input {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 10px !important;
color: #FF00CC !important
}
select {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 10px !important;
color: #FF00CC !important
}
textarea {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 10px !important;
color: #FF00CC !important
}
h1 {font-family: helvetica, arial, geneva, sans-serif !important; font-size: large !important; font-weight: bold !important}
A:link {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: none !important;
color: #5555FF !important
}
A:visited {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: none !important;
color: #FF00CC !important
}
A:hover {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: underline !important;
color: #FF00CC !important
}

smalltext {font-family: Arial !important; font-size: 10 !important; color:#FF00FF !important}

}
picaleo , February 24, 2009
...
0
I was just wondering how you change the color of the font to red? i like the font type and background color of Nanda's style but i would like the font color to be red could someone help me out?

YourRuler101 , May 05, 2009
...
0
Love this one

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

body, td {
font-family:Verdana, Trebuchet MS, Courier New !important;
color: #829F53 !important;
font-size: 15px !important;
background-color: #E0CC97

!important;
}
input, textarea, select{
color : #F00 !important;
font: normal 15px !important;
border-collapse: collapse !important;
border: 2px solid #000000 !important;
}
.maintable {
border: 2px #003366 solid !important;
background-color: #C6CBFF !important;
width: 90% !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 12px !important;
}
.regrow {
font-family: Verdana,Sans-serif !important;
color: #000000 !important;
font-weight: bold !important;
background-color: #C6CBFF !important;
}
.headline {font-family: Verdana,Sans-serif !important;font-weight: bold !important;color: #FFFFFF !important;background-color: #003366 !important;font-size: 11px !important}
.mainrow {
font-family: Verdana,Sans-serif !important;
color: #000000 !important;
background-color: #C6CBFF !important;
font-size: 15px !important
}
.maintables {
border: 1px #003366 solid !important;
width: 120px !important;
padding: 0px !important;
font-family: Verdana,Sans-serif !important;
font-size: 12px !important;
}

th {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: small !important;
font-weight: bold !important;
background-color: #003366 !important
}
td {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 11px !important
}
form {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 11px !important
}
input {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 10px !important;
color: #F00 !important
}
select {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 15px !important;
color: #900 !important
}
textarea {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 15px !important;
color: #70 !important
}
h1 {font-family: helvetica, arial, geneva, sans-serif !important; font-size: large !important; font-weight: bold !important}
A:link {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: none !important;
color: #900 !important
}
A:visited {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: none !important;
color: #900 !important
}
A:hover {
font-family: helvetica, arial, geneva, sans-serif !important;
font-size: 12 !important;
text-decoration: underline !important;
color: #900 !important
}

smalltext {font-family: Arial !important; font-size: 10 !important; color:#333333 !important}

}
Grindelwald , September 16, 2009
...
0
Our Coach Outlet Online store can steadily supply Coach handbags with high quality, various styles as well as dicount prices.Now kinds of Coach Bags Outlet are on sale.The Coach Outlet with Low Price and you will get the best service!
Coach Outlet , May 07, 2011
...
0
Coach Tote Bags are great discounts and affordable.Coach Bags just like what you can find in trendy counterfeit Coach Stores that you can find in the market. Coach women's handbags were made out of sturdy cowhide, which was of much better quality than others.Coach Online Store are famous for the discounts they offer.
Coach Outlet Online Store , May 16, 2011
...
0
The article is worth reading,gucci handbags outlet I like it very much.gucci handbags I will keep your new articles
gucci handbags , October 28, 2011
...
0
I like this website, and I can benefit a lot from it!
buy men watches
buy men watches , November 08, 2011
...
0
I like this articleReplica Rolex Daytona II
Replica Rolex Daytona II , December 20, 2011

Write comment

feedShow/hide comment form
smaller | bigger

busy
< Prev   Next >

Random Info

The TC SuperPack Greasemonkey script will highlight all known scammers, as well as giving you a custom shortcut panel, and more!
This content on this website is © gamebasics.info | Images © Torn City - Online RPG Game | Hosted by BlueTreeHost