CSS without using Lib:token or Inline Style - My solution

Thoughts, Help, Feature Requests, Bug Reports, Developing code for...

Moderators: dorpond, trevor, Azhrei

Forum rules
PLEASE don't post images of your entire desktop, attach entire campaign files when only a single file is needed, or generally act in some other anti-social behavior. :)
Post Reply
User avatar
bubblobill
Giant
Posts: 150
Joined: Sun Jan 24, 2010 3:07 pm

CSS without using Lib:token or Inline Style - My solution

Post by bubblobill »

I have just spent half a day bashing my head against CSS. All the examples I could find for formatting tables with CSS use a line like this in the code linking to the style sheet:


My problem is that as a player I do not have the ability to create a library token. So I created the css macro on my pc token and tried a zillion variations of this that did not work:


So I turned to Inline Style. Ugly and cumbersome as my table is pretty huge. Off to w3schools.com for a CSS refresher and learning about the Internal Style Sheet.

Internal Style Sheets pose a problem in that they contain characters that throw the macro engine into conniptions. So this is what I did that works. I expect I will be using this over and over again.

Here is my simple example.
First I open a Dialog
[spoiler=]

Code: Select all

[r,dialog("Condition","width=200; height=200; temporary=1; input=0; noframe=0"):
{
[macro("[email protected]"): ""]
}]
[/spoiler]

This then calls simpleTbl, which contains my HTML table and gets CSS from [email protected] Notice I have used [r,macro("[email protected]"):""] rather than the <link> line above.

simpleTbl
[spoiler=]

Code: Select all

<html>
<head>
<title>My Title</title>
[r,macro("[email protected]"):""]
</head>

<body>

<table id="myTable">
<tr>         <th>Formatted Header</th>
<tr>          <td>Unformatted Row</td>
<tr class="odd">    <td>Odd Row</td>
<tr class="even">   <td>Even Row</td>
<tr>         <td>Unformatted Row</td>
</table>

</body>
</html>
[/spoiler]

My CSS macro is simple. Instead of just containing the style definitions, I have defined them within a string and then post the roll result of the string. This seems to bypass whatever problems the macro engine has with special characters. I have even included the <Style> tags for future laziness.

css
[spoiler=]

Code: Select all

<!-- Internal Style Sheet
[h:stylesheet="

<style>
.odd { background-color: #FFFFFF; color: blue }
.even { background-color: #EEEEAA; color: black }
#myTable { background-color: #1133FF; color: #FFFFFF }
th { background-color: #113311; color: #FFFFFF }
</style>

"]
[r:stylesheet]
[/spoiler]

And here is the result

Simple Example
Simple Example
New Bitmap Image.png (5.17 KiB) Viewed 1101 times


I hope others find this useful. Cheers.
Bubblobill on the forum.
@Reverend on the MapTool Discord Server

Responsible for less atrocities than most... I do accept responsibility for these though: SmartDoors, Simple d20 Framework - barebones, Drop-in: All 3.5 SRD Monsters, Drop in: Simple Character Editor, Battletech Framework

User avatar
wolph42
Deity
Posts: 9830
Joined: Fri Mar 20, 2009 5:40 am
Location: Netherlands
Contact:

Re: CSS without using Lib:token or Inline Style - My solutio

Post by wolph42 »

Thank you for sharing. You might want to consider adding this to the wiki. E.g. to the forms tutorial page (irc it's linked in the top link my Sig

User avatar
aliasmask
Deity
Posts: 8650
Joined: Tue Nov 10, 2009 6:11 pm
Location: Bay Area

Re: CSS without using Lib:token or Inline Style - My solutio

Post by aliasmask »

Yep, that's how you do it. Put the {} in quotes and print it out essentially. This only works in dialog and frame roll options and not in the chat window.

Code: Select all

[dialog("test"): {
<html>

[r: "

<style>
   .col1 {text-align:right}
   .col2 {font-weight:bold}
   td {width:100px}
</style>

"]
<body>

<table><tr><td class=col1>col 1</td><td class=col2>col 2</td></tr></table>

</body></html>

}]

Oh and another note. When putting {} in quotes (") the parser will ignore the {}, but if you put them in single quotes, the parser will not ignore and will count towards your {} limit and may do weird things. In the example above, it should still work fine with single quotes.

femanon
Cave Troll
Posts: 95
Joined: Sat Jun 16, 2012 10:25 pm

Re: CSS without using Lib:token or Inline Style - My solutio

Post by femanon »

if this only works for objects like frames, is there a way to use it without a lib token for output as well? I'm trying to work on a system of macros that will build themselves and then execute the code, and output the results, mainly skill checks and the like. while I'm used to in line, the idea of cutting these elements out and using css could vastly improve the functionality of the script and it's readability. probably make it faster too.

User avatar
aliasmask
Deity
Posts: 8650
Joined: Tue Nov 10, 2009 6:11 pm
Location: Bay Area

Re: CSS without using Lib:token or Inline Style - My solutio

Post by aliasmask »

Yes, if your intention is to build a frame with links for you to click. But if you want to display to other players you can only use inline css. But it wouldn't take much to write a generic macro on a lib that will display html and send it to other players to popup a frame.

femanon
Cave Troll
Posts: 95
Joined: Sat Jun 16, 2012 10:25 pm

Re: CSS without using Lib:token or Inline Style - My solutio

Post by femanon »

Then you mean "no, you can't", starting off with a "yes, but really no" isn't necessary, you can't use CSS for output into the chat.

User avatar
aliasmask
Deity
Posts: 8650
Joined: Tue Nov 10, 2009 6:11 pm
Location: Bay Area

Re: CSS without using Lib:token or Inline Style - My solutio

Post by aliasmask »

Well, using css style in the chat was already answered, if that was your question. Rewording, doesn't change that fact. So, it was up to me to interpret what you were asking is to create a frame with css and links to make skill checks and that answer is yes. Giving the same fancy output to other clients does require you post to the chat something that can be executed, like a link.

The way MT security works is that as a regular client you're not suppose to update any other clients without their permission. You can create your own personal token and name it lib:test without it actually being a valid trusted lib token. You can create links and have other players click the links and have it execute code, but you will be limited to certain functions that don't require trust (you can check the wiki). Also, autoexecute feature is disabled for that macro. So, I stand by my answer. Yes, you can send a frame to other players to display fancy CSS. They would just need to click a link in the chat to accept permission.

femanon
Cave Troll
Posts: 95
Joined: Sat Jun 16, 2012 10:25 pm

Re: CSS without using Lib:token or Inline Style - My solutio

Post by femanon »

Well, using css style in the chat was already answered, if that was your question. Rewording, doesn't change that fact.

ironically you are completely wrong, rewording things does change what they mean
This only works in dialog and frame roll options and not in the chat window.

this is not a completely unambiguous statement, it can easily taken to mean this method wont work, not that CSS wont work entirely, which is what the topic is now. My question was completely valid. as an addendum, the solution you proposed wont work for me, the idea is to keep things convenient for other players and that is not. no one likes pop ups

User avatar
aliasmask
Deity
Posts: 8650
Joined: Tue Nov 10, 2009 6:11 pm
Location: Bay Area

Re: CSS without using Lib:token or Inline Style - My solutio

Post by aliasmask »

To be clear for you, you can't use <style> in the chat window which includes reference to <link ref="stylesheet"> on a lib token within the <style> tag, but you can use <span style=""> in the chat, which is what I assumed the OP meant by inline style (but looking back, wasn't).

This all sounded a bit familiar. Since you don't want to use a lib token, I'm assuming you're not the GM and GM won't give you permission to drop a lib token to be used by all players or you're not familiar/comfortable enough to create one. If you want to give a specific question with some code or example output, I can try and answer your question. I suggest creating a new topic though.

Post Reply

Return to “MapTool”