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 (6)

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

Write comment

feedShow/hide comment form
smaller | bigger

busy
< Prev   Next >

More Tips...

If you're logged in you can comment/ ask questions on pages!
If your comment never appears, it's because it's been posted in the wrong location, or already been answered.
This content on this website is © gamebasics.info | Images © Torn City - Online RPG Game | Hosted by BlueTreeHost