GreaseMonkey'ing Cantr - customizing Cantr, clientside

[EchoMan]

If you use FireFox and get the Stylish plugin, you can alter a lot of stuff. This is how my Cantr looks when I am at work:



I haven't done anything with the graphic icons yet, I might just make them greyscale and save them on a server someplace.

And here is the script. Right click the stylish icon in the bottom right of your browser and choose Manage styles / Write new style. Name it cantr or something.

Code: Select all

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

@-moz-document domain("cantr.net") {

/* --------------------------------------------- *\
   General stuff
\* --------------------------------------------- */

BODY {
  background-color: #FCFCFC !important;
  color: #000 !important;
  text-align: left !important;
}

BODY CENTER {
  text-align: left !important;
}

A {
  color: #00F !important;
}

/* Color for active projects etc */
TABLE TBODY TR TD FONT FONT[color="#cccccc"] {
  color: #606 !important;
}

/* green top and bottom border bars */
BODY CENTER TABLE TBODY TR[height="20"]  {
  display: none !important;
}

/* Green headers */
BODY CENTER TABLE TBODY TR TD[bgcolor="#008800"] {
  background: #CCC !important;
}

TD {
  font-size: 9pt !important;
}

.button_form, .button_charmenu {
  background-color: #DDD !important;
  color: #00F !important;
  font-weight: normal !important;
}

.button_charmenuactive {
  background-color: #BBB !important;
  color: #000 !important;
  font-weight: normal !important;
}

P[align="center"] {
  text-align: left !important;
}
/* --------------------------------------------- *\
   Top box with Cantr II and time and stuff
\* --------------------------------------------- */

BODY TABLE TBODY TR TD[align="center"] {
   text-align: left !important;
}

/* Remove background image */
BODY TABLE TBODY TR TD[background="http://www.cantr.net/graphics/cantr/pictures/header.gif"] {
  background-image: none !important;
  background: #FCFCFC !important;
  border-bottom: 1px solid #000 !important;
}
BODY TABLE TBODY TR TD[background="http://www.cantr.net/graphics/cantr/pictures/footer.gif"] {
  background-image: none !important;
  background: #FCFCFC !important;
  border-bottom: 1px solid #000 !important;
}



}

Feel free to use/alter the code however you want. PM me if you want to recieve updates.

[AlchemicRaker]

Made another script...
http://natso.darknovagames.com/files/ca ... nd.user.js

It resizes your text area (if you use the Large text area). It acts like the top text box in this page:
http://javascript.internet.com/forms/te ... -demo.html

Cheers
- Natso

[maliseh]

*sigh* Forgive me, I'm not great with this stuff - how do I make it work in Chrome? I've got the beta version, so I can do add-ons - but how do I put the emote script in?

[SekoETC]

The code that makes the talk box resize itself unfortunately also affects the note editing box, so if you open a real long note, it will lag just to scroll, or at least to type.

[BIKR]

I like the green it doesnt mess up my eyes that much, White is to bright for me a lot.

[joo]

*sigh* Forgive me, I'm not great with this stuff - how do I make it work in Chrome? I've got the beta version, so I can do add-ons - but how do I put the emote script in?

I have made some changes to allow the script to work correctly on other browsers. I have tested it on the most recent versions of the following browsers (the links give more specific information on how to use userscripts with that browser):

• Firefox
• Opera
• Internet Explorer
• Chrome

And yes, the script its self is not an add-on to Firefox, but does require an add-on to run. In Firefox, if you have Greasemonkey installed, you should get the option to install the script when you navigate to the link in the OP.

Safari users may also be able to install the script using Greasekit, however I have not tested this myself (and it looks like it may only work on Macs).

[Piscator]

I got me the Stylish plug-in, invested an evening and that's how my forum looks like now.



I still have to figure out how to exchange the icons though.

[EchoMan]

Freebie:

Code: Select all


/*
Replace New Posts icon
X = width of YOUR icon
Y = height of YOUR icon
*/

IMG[title="New posts"] {
  background: transparent url(http://location.of.image)  no-repeat !important;
  padding:0px 0px Ypx Xpx !important;
  height:0px !important;
  width:0px !important;
  border: 0px !important;
}


[Armulus Satchula]

Is it possible to write a script that would change the color of cantr?

[Armulus Satchula]

If you use FireFox and get the Stylish plugin, you can alter a lot of stuff. This is how my Cantr looks when I am at work:

....

Feel free to use/alter the code however you want. PM me if you want to recieve updates.

OMG this is what i need.

[EchoMan]

Latest version of my script for Stylish. I still haven't gotten around to change the green icons into grey-scale ones, I'll try to find time for that after work today.

Code: Select all

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

@-moz-document domain("cantr.net") {

/* --------------------------------------------- *\
   General stuff
\* --------------------------------------------- */

BODY {
  background-color: #FCFCFC !important;
  color: #000 !important;
  text-align: left !important;
}

BODY CENTER {
  text-align: left !important;
}

A {
  color: #00F !important;
}

/* Color for active projects etc */
TABLE TBODY TR TD FONT FONT[color="#cccccc"] {
  color: #606 !important;
}

/* green top and bottom border bars */
BODY CENTER TABLE TBODY TR[height="20"]  {
  display: none !important;
}

/* Green headers */
BODY CENTER TABLE TBODY TR TD[bgcolor="#008800"] {
  background: #CCC !important;
}

TD {
  font-size: 9pt !important;
}

.button_form, .button_charmenu {
  background-color: #DDD !important;
  color: #00F !important;
  font-weight: normal !important;
}

.button_charmenuactive {
  background-color: #BBB !important;
  color: #000 !important;
  font-weight: normal !important;
}

P[align="center"] {
  text-align: left !important;
}
BODY TABLE TBODY TR[height="70"] {
  height: 10px;
}

PRE {
  background-color: #FCFCFC !important;
  border: 1px solid #000 !important;
  font-size: 9pt !important;
  padding-left: 5px !important;
  margin: -1px !important;
}

TD FONT FONT[color="#ffffff"] {
  color: #000 !important;
}

FONT[color="#fcff9d"] {
  color: #006 !important;
}

SPAN[style="color: rgb(255, 255, 255);"] {
  color: #333 !important;
}

SPAN[style="color: rgb(204, 204, 204);"] {
  color: #F33 !important;
}

/* Top box with Cantr II and time and stuff */
BODY TABLE TBODY TR TD[align="center"] {
   text-align: left !important;
}

/* Remove background image */
BODY TABLE TBODY TR TD[background="http://www.cantr.net/graphics/cantr/pictures/header.gif"] {
  background-image: none !important;
  background: #FCFCFC !important;
  border-bottom: 1px solid #000 !important;
}
BODY TABLE TBODY TR TD[background="http://www.cantr.net/graphics/cantr/pictures/footer.gif"] {
  background-image: none !important;
  background: #FCFCFC !important;
  border-bottom: 1px solid #000 !important;
}

}


[EchoMan]

I have added my "skin" to Userstyles.org. To use it, first install the Stylish plugin in FireFox.

Then point your browser to http://userstyles.org/styles/25065 and click Install With Stylish. If you use Greasemonkey you may install it as a User Script instead.

I will make all updates there from now on. I still have a bunch of images to fix and so on.

Please let me know of any suggestions or problems.

Current looks:

[Armulus Satchula]

I have added my "skin" to Userstyles.org. To use it, first install the Stylish plugin in FireFox.

Then point your browser to http://userstyles.org/styles/25065 and click Install With Stylish. If you use Greasemonkey you may install it as a User Script instead.

I will make all updates there from now on. I still have a bunch of images to fix and so on.

Please let me know of any suggestions or problems.

Current looks:

Love it, but letting you know of a few missing parts i found.

-Login button is still green
-
-Destroying a lock
-Locking/Unlocking
-Entering a building/vehicle
-Exiting a building/vehicle
-Putting on a piece of clothing
-Rolling a die
-Putting a note in an envelope
-Editing a note
-Flipping a coin (which i didn't know you could do)
-Tagging a key
-Copying a key

These are all the spots i find where the images are still green.

As a side note: i think way to even make it more generic would be to get rid of the images completely, and have the buttons looks like "Events", "Locations", "Inventory".

[EchoMan]

Thanks!

Problem is I need a char with the option/activity in question to be able to get the original image and test that the script works as it should. But I'll be getting there eventually. I know I can fix a bunch of those on your list with little effort.

As for your idea with HTML buttons instead of graphics. It's possible, but may be cluttering. Like for objects where you have 5 different options. It will also not be translated to different languages, which makes me sceptical to doing it.

ToDo:

GENERAL
login button

CHARACTER PAGE
in vehicle

INVENTORY
roll die
flip coin

OBJECTS
set frequency (reciever)
use radio (transmitter)

Done :

CHARACTER PAGE
docked

ANIMALS
hunt

INVENTORY
edit note
put note in envelope
copy key
tag key
seal envelope
empty envelope
wear clothing

LOCATION
exit building/vehicle

BUILDIGS/VEHICLES
enter building/vehicle

OBJECTS
destroy lock
lock/unlock lock

PROJECTS
arrow button to continue after selecting what to make

[joo]

Ah, there you go Bes. I thought there might be an option similar to that for Userstyles.