[1.3.b69] CSS and Chat

If you have an idea for a new feature, please discuss it in the main MapTool forum first, then post a summary of the discussion here. Use the first Sticky as a template.

Moderators: dorpond, trevor, Azhrei, giliath, jay, Mr.Ice

User avatar
Mathemagician
Dragon
Posts: 666
Joined: Tue May 22, 2007 2:27 pm

[1.3.b69] CSS and Chat

Post by Mathemagician »

I'd like to see the same CSS support that is in frames appear within the chat panel as well. Is this possible, or are they wildly separate beasts?

User avatar
Azhrei
Site Admin
Posts: 12086
Joined: Mon Jun 12, 2006 1:20 pm
Location: Tampa, FL

Re: [1.3.b69] CSS and Chat

Post by Azhrei »

Mathemagician wrote:Is this possible,
Yes. Anything is possible.
or are they wildly separate beasts?
Yes.

:mrgreen:

What are the specific things that are missing from the chat window? As they both use the same core components I'm curious to know what's missing as it might be something that just isn't "turned on".

User avatar
Mathemagician
Dragon
Posts: 666
Joined: Tue May 22, 2007 2:27 pm

Re: [1.3.b69] CSS and Chat

Post by Mathemagician »

You're right, I should have posted an example.

If I copy / paste this code into the chat, I get a properly formatted frame:

Code: Select all

[frame("test"):{
<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS@Lib:xStatus">
</head>

<body>
<table>
<tr class="itemname">Blurred Strike Ki Focus</tr>
<tr class="info">You can master the secret of speed by catching this small mechanical fly in your hands.</tr>
<tr class="info">Level: 5</tr>
<tr class="info">Price: 1,000 gp</tr>
<tr class="info">Implement (Ki Focus)</tr>
<tr class="info">Enhancement: +1 attack rolls and damage rolls</tr>
<tr class="info">Critical: +1d8 damage</tr>
<tr class="power">Property: You can use your Flurry of Blows power an additional time during your turn, but the two uses of that power must be triggered by two different attacks that you make with this ki focus.</tr>
<tr class="power2">Power (Daily): Free Action. Trigger: You move at least half your speed during this turn. Effect: You gain a +2 bonus to all defenses until the end of your next turn.</tr>
</table>
</body>
</html>
}]
On the other hand, if I copy and paste "the guts" of this example (that is, without the frame wrapper)

Code: Select all

<html>
<head>
<link rel="stylesheet" type="text/css" href="myCSS@Lib:xStatus">
</head>

<body>
<table>
<tr class="itemname">Blurred Strike Ki Focus</tr>
<tr class="info">You can master the secret of speed by catching this small mechanical fly in your hands.</tr>
<tr class="info">Level: 5</tr>
<tr class="info">Price: 1,000 gp</tr>
<tr class="info">Implement (Ki Focus)</tr>
<tr class="info">Enhancement: +1 attack rolls and damage rolls</tr>
<tr class="info">Critical: +1d8 damage</tr>
<tr class="power">Property: You can use your Flurry of Blows power an additional time during your turn, but the two uses of that power must be triggered by two different attacks that you make with this ki focus.</tr>
<tr class="power2">Power (Daily): Free Action. Trigger: You move at least half your speed during this turn. Effect: You gain a +2 bonus to all defenses until the end of your next turn.</tr>
</table>
</body>
</html>
I get just black text with a white background.

If I try to get a little more fancy and put my CSS declarations within the html tags, like so:

Code: Select all

[h: str=".itemname {background-color:#FFAA33; color:black; font-weight:bold; font-size:medium; padding:0}
.info{background-color:white; padding:0}
.power { background-color: #FFFFCC; padding:0;line-height:0 }
.power2{background-color:#FFCC99; padding:0;line-heigh:0}
.willname {background-color:green; color:black; font-weight:bold; font-size:medium}
.encname {background-color:red; color:black; font-weight:bold; font-size:medium}
.dailyname {background-color:gray; color:black; font-weight:bold; font-size:medium}
.buttons {background-color:green}"]
<html>
<head>
<style type="text/css">
[r: str]
</style>
</head>

<body>
<table>
<tr class="itemname">Blurred Strike Ki Focus</tr>
<tr class="info">You can master the secret of speed by catching this small mechanical fly in your hands.</tr>
<tr class="info">Level: 5</tr>
<tr class="info">Price: 1,000 gp</tr>
<tr class="info">Implement (Ki Focus)</tr>
<tr class="info">Enhancement: +1 attack rolls and damage rolls</tr>
<tr class="info">Critical: +1d8 damage</tr>
<tr class="power">Property: You can use your Flurry of Blows power an additional time during your turn, but the two uses of that power must be triggered by two different attacks that you make with this ki focus.</tr>
<tr class="power2">Power (Daily): Free Action. Trigger: You move at least half your speed during this turn. Effect: You gain a +2 bonus to all defenses until the end of your next turn.</tr>
</table>
</body>
</html>
it's still a no go, I'm getting my CSS declarations displayed in the text.

It is more than possible I'm doing it incorrectly...all the html and css I know I've learned for maptool :P, but I think it "should" work the way I want it to?

prestidigitator
Dragon
Posts: 317
Joined: Fri Apr 23, 2010 8:17 pm

Re: [1.3.b69] CSS and Chat

Post by prestidigitator »

It's a pain, but have you tried putting 'style' attributes on the individual tags instead? I'd be surprised if an entire HTML document works well in the chat window. My suspicion (though I may well be wrong) is that the whole chat window works like one big HTML document, with fragments continually inserted at the end. That would mean putting 'html', 'head', and 'body' tags in there may not work very well.

EDIT: Example:

Code: Select all

<table>
<tr><td style="background-color:#FFAA33; color:black; font-weight:bold; font-size:medium; padding:0">Blurred Strike Ki Focus</td></tr>
<tr><td style="background-color:white; padding:0">You can master the secret of speed by catching this small mechanical fly in your hands.</td></tr>
...
</table>
EDIT: I tried the above example (minus the elipsis) and it seems to work. I'll leave converting the whole table as an exercise for the reader. :wink:
"He knows not how to know who knows not also how to un-know." --Sir Richard Burton

User avatar
Mathemagician
Dragon
Posts: 666
Joined: Tue May 22, 2007 2:27 pm

Re: [1.3.b69] CSS and Chat

Post by Mathemagician »

Yeah, I knew some elements like that are supported....It would just be nice if I could reference the CSS stuff that I've already defined on my lib token, so that I can copy/paste stuff from notepad into chat for my players, or utilize it more easily in macro output. Thanks though.

prestidigitator
Dragon
Posts: 317
Joined: Fri Apr 23, 2010 8:17 pm

Re: [1.3.b69] CSS and Chat

Post by prestidigitator »

Here's a great guide and reference on CSS and HTML (the "Wilbur" section is HTML 3.2), by the way.
"He knows not how to know who knows not also how to un-know." --Sir Richard Burton

User avatar
Azhrei
Site Admin
Posts: 12086
Joined: Mon Jun 12, 2006 1:20 pm
Location: Tampa, FL

Re: [1.3.b69] CSS and Chat

Post by Azhrei »

Math, your problem is likely the <link> element. The short answer is that it may never work.

The long answer...

The chat window is one, very long document. And the link element likely isn't interpreted except at the very top inside a <head> element, so I doubt you can put text into the chat window early enough to have an effect. (Although you might try dumping the <link> element to the chat log during an onCampaignLoad macro -- that might be as early as you can get.)

If you save the chat log to a file and look at the HTML that is generated when you paste that I think you'll see what I mean.

Some day we'll have an entry in the Campaign Properties where the GM can provide a URI to a global stylesheet. But don't hold your breath. :roll:

User avatar
Mathemagician
Dragon
Posts: 666
Joined: Tue May 22, 2007 2:27 pm

Re: [1.3.b69] CSS and Chat

Post by Mathemagician »

That makes sense. For the use I had in mind, I can just pop up a frame on all players' windows with the desired formatting, that's not a big deal. (Probably better for me anyway!)

I think the campaign property thing would be a sticky fix...I think the chat pane is loaded prior to, and preserved across opening a campaign file. So there would need to be a way to instantiate a new chat pane with the desired properties.

prestidigitator
Dragon
Posts: 317
Joined: Fri Apr 23, 2010 8:17 pm

Re: [1.3.b69] CSS and Chat

Post by prestidigitator »

Hmm. Yeah. And what about a "/clear" command?
"He knows not how to know who knows not also how to un-know." --Sir Richard Burton

prestidigitator
Dragon
Posts: 317
Joined: Fri Apr 23, 2010 8:17 pm

Re: [1.3.b69] CSS and Chat

Post by prestidigitator »

Now you COULD separate out style stuff into another macro or set of macros.... Maybe pass the value you're using for the 'class' attribute now as an argument to the macro, and have it return the sequence of style attributes:

Code: Select all

<tr><td style="[r, macro("getStyle@this"): "itemname"]">Blurred Strike Ki Focus</td></tr>
<tr><td style="[r, macro(getStyle@this): "info"]">You can master the secret of speed by catching this small mechanical fly in your hands.</td></tr>
Or simply have a different macro for each style "class":

Code: Select all

<tr style="[r, macro("css.itemname@this"): ""]>Blurred Strike Ki Focus</tr>
<tr><td style="[r, macro(css.info@this): ""]">You can master the secret of speed by catching this small mechanical fly in your hands.</td></tr>
It's not quite full stylesheet functionality, but it's at least a little separation and reuse....
"He knows not how to know who knows not also how to un-know." --Sir Richard Burton

User avatar
jfrazierjr
Deity
Posts: 5176
Joined: Tue Sep 11, 2007 7:31 pm

Re: [1.3.b69] CSS and Chat

Post by jfrazierjr »

prestidigitator wrote:Hmm. Yeah. And what about a "/clear" command?
What do you mean by that? there is a /cls that clears the entire chat panel... are you thinking of something else?
I save all my Campaign Files to DropBox. Not only can I access a campaign file from pretty much any OS that will run Maptool(Win,OSX, linux), but each file is versioned, so if something goes crazy wild, I can always roll back to a previous version of the same file.

Get your Dropbox 2GB via my referral link, and as a bonus, I get an extra 250 MB of space. Even if you don't don't use my link, I still enthusiastically recommend Dropbox..

prestidigitator
Dragon
Posts: 317
Joined: Fri Apr 23, 2010 8:17 pm

Re: [1.3.b69] CSS and Chat

Post by prestidigitator »

jfrazierjr wrote:
prestidigitator wrote:Hmm. Yeah. And what about a "/clear" command?
What do you mean by that? there is a /cls that clears the entire chat panel... are you thinking of something else?
It's an alias for the same command. Try it. :)

But yeah, that's what I meant. Not only does chat persist between the loading of campaign files, but it can be cleared at any time. That PROBABLY causes the entire document to be recreated, so I wouldn't assume things you did on "onCampaignLoad" could persist after that. I COULD be wrong; maybe it simply removes any children of the 'body' element. But it's the kind of thing that doesn't seem well specified, so it could easily be expected to change in the future....
"He knows not how to know who knows not also how to un-know." --Sir Richard Burton

User avatar
jfrazierjr
Deity
Posts: 5176
Joined: Tue Sep 11, 2007 7:31 pm

Re: [1.3.b69] CSS and Chat

Post by jfrazierjr »

prestidigitator wrote:
jfrazierjr wrote:
prestidigitator wrote:Hmm. Yeah. And what about a "/clear" command?
What do you mean by that? there is a /cls that clears the entire chat panel... are you thinking of something else?
It's an alias for the same command. Try it. :)

But yeah, that's what I meant. Not only does chat persist between the loading of campaign files, but it can be cleared at any time. That PROBABLY causes the entire document to be recreated, so I wouldn't assume things you did on "onCampaignLoad" could persist after that. I COULD be wrong; maybe it simply removes any children of the 'body' element. But it's the kind of thing that doesn't seem well specified, so it could easily be expected to change in the future....
Ah.. so your talking about clear in reference to how the html link element would work in chat.... sometime I am so dense...lol :roll:
I save all my Campaign Files to DropBox. Not only can I access a campaign file from pretty much any OS that will run Maptool(Win,OSX, linux), but each file is versioned, so if something goes crazy wild, I can always roll back to a previous version of the same file.

Get your Dropbox 2GB via my referral link, and as a bonus, I get an extra 250 MB of space. Even if you don't don't use my link, I still enthusiastically recommend Dropbox..

prestidigitator
Dragon
Posts: 317
Joined: Fri Apr 23, 2010 8:17 pm

Re: [1.3.b69] CSS and Chat

Post by prestidigitator »

jfrazierjr wrote:Ah.. so your talking about clear in reference to how the html link element would work in chat.... sometime I am so dense...lol :roll:
No worries, mate. You gotta be dense sometimes. Too much work otherwise. Bad for the digestion. :wink:
"He knows not how to know who knows not also how to un-know." --Sir Richard Burton

User avatar
Azhrei
Site Admin
Posts: 12086
Joined: Mon Jun 12, 2006 1:20 pm
Location: Tampa, FL

Re: [1.3.b69] CSS and Chat

Post by Azhrei »

Mathemagician wrote:I think the chat pane is loaded prior to, and preserved across opening a campaign file. So there would need to be a way to instantiate a new chat pane with the desired properties.
But creating the chat panel isn't the problem -- if the first text written to the chat panel is a <head> element with a nested <link> element, it should work fine.

The first element that appears in the chat panel which is NOT valid inside the <head> is probably what triggers the Java code to switch from the head to the body. And once switched, you can't get back. :(

Post Reply

Return to “Feature Requests”