RPTools.net

Posted: **Sun Jun 15, 2014 4:01 am**

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:

<link rel="stylesheet" type="text/css" href="css@Lib:token"></link>

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:

<link rel="stylesheet" type="text/css" href="css@token"></link>

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("simpleTbl@token"): ""]
}]

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

simpleTbl

Spoiler

Code: Select all

<html>
<head>
<title>My Title</title>
[r,macro("css@token"):""]
</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>

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]

And here is the result

: Simple Example; New Bitmap Image.png (5.17 KiB) Viewed 1514 times

I hope others find this useful. Cheers.

Posted: **Sun Jun 15, 2014 4:15 am**

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

Posted: **Sun Jun 15, 2014 12:59 pm**

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.

Posted: **Thu Oct 23, 2014 5:40 pm**

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.

Posted: **Thu Oct 23, 2014 6:09 pm**

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.

Posted: **Thu Oct 23, 2014 10:44 pm**

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.

Posted: **Fri Oct 24, 2014 12:40 am**

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.

Posted: **Fri Oct 24, 2014 5:36 pm**

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

Posted: **Fri Oct 24, 2014 7:30 pm**

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.

RPTools.net

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

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

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

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

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

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

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

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

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

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