Page 2 of 15
Posted: Mon Jan 04, 2010 8:02 am
by 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.
Posted: Sun Jan 17, 2010 4:08 am
by 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
Posted: Sun Jan 17, 2010 2:12 pm
by 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?
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Sat Feb 06, 2010 2:00 am
by 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.
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Sat Feb 06, 2010 4:54 am
by BIKR
I like the green it doesnt mess up my eyes that much, White is to bright for me a lot.
Re:
Posted: Sun Feb 07, 2010 11:32 am
by joo
maliseh wrote:*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?
joo wrote: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):
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).
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Mon Feb 08, 2010 1:47 am
by 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.
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Mon Feb 08, 2010 11:48 am
by 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;
}

Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Mon Feb 08, 2010 2:52 pm
by Armulus Satchula
Is it possible to write a script that would change the color of cantr?
Re:
Posted: Mon Feb 08, 2010 2:54 pm
by Armulus Satchula
EchoMan wrote: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.
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Tue Feb 09, 2010 9:57 am
by 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;
}
}
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Wed Feb 10, 2010 10:28 am
by 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:

Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Wed Feb 10, 2010 6:19 pm
by Armulus Satchula
EchoMan wrote: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".
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Wed Feb 10, 2010 6:33 pm
by 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
Re: GreaseMonkey'ing Cantr - customizing Cantr, clientside
Posted: Thu Feb 11, 2010 7:52 pm
by joo
Ah, there you go Bes. I thought there might be an option similar to that for Userstyles.