Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
×
Create a free account

CSS in HTML inside of an API

July 09 (6 years ago)

Edited July 09 (6 years ago)

I'm trying to make a very simple calendar generated inside of an API and have it output to the chat using HTML.Unfortunately I know next to nothing about HTML and less about CSS so me stumbling around isn't accomplishing anything because I am following steps I think should work, but aren't and I don't know enough to know why.

Yes, the month is supposed to be five six day weeks long.

/**
* Day(integer) = Day of the month. Ex 22
* DOY(integer) = Day of the year. Ex 125
* Month(integer) = Month of the year. Ex 5
*/
function Show_Calendar(Day, DOY, Month){
var dom = 1;
var listhtml =
'<html lang="en" dir="ltr">'
+'<head>'
+'<meta charset="utf-8">'
+'<title></title>'
+'<style>'
+'#calendar-table {'
+'border: 1px solid black;'
+'}'
+'</style>'
+'</head>'
+'<body>'
+'<table width="90%" id="calendar-table">'
+'<thead>'
+ '<tr>'
+ '<td colspan="6" align="center">'+MasterTable.Months[Month]+'</td>'
+ '</tr>'
+ '<tr>'
+ '<th>Free</th><th>Firs</th><th>Sec</th><th>Mid</th><th>Four</th><th>Las</th>'
+ '</tr>'
+'</thead>'
+'<tbody align="center"'
for(var i=1; i<=5; i++){
listhtml += '<tr>';
for(var d=1; d<=6; d++){
listhtml += '<td>'+dom+'</td>';
dom++;
};
listhtml += '</tr>'
};
listhtml += '</tbody>'
+'<tfoot>'
+'</tfoot>'
+'</table>'
+'</body>'
+'</html>'
//log(listhtml);
sendChat("System", "/w gm " + listhtml);
};

This will generate and output a table like such.

Now I'm trying to use CSS to dress it up; add borders, highlight the current day in red, highlight monthly events in blue, etc. That should all be relatively simple via a few if handlers. But the catch is I can't even figure out how to use the CSS in roll20's API and get it to put a border on this thing. When I try it outside using Atom I can at least get a slightly different version of this code to produce this:

What am I doing wrong inside roll20 that is making this not work? Does CSS just outright not work, or does something need to be formatted differently? Also, any general HTML or CSS advice would be appreciated.


July 09 (6 years ago)

Edited July 09 (6 years ago)
The Aaron
Roll20 Production Team
API Scripter

The output from the API is already inside an HTML body. Ditch all the tags outside and including <body>. 

Additionally, the API does not have access to Style Sheets or <style> tags, so all CSS must be supplied inline for each element via a style="" attribute. 

A good way to handle html and styles is with wrapping functions for formatting and an object to act like a pseudo style sheet. Here's a small script that has those elements: https://app.roll20.net/forum/permalink/7583532/ (look at the "s" object for styles, and the "f" object for formatters) 

Note that not all properties are available for CSS, there's some degree of trial and error involved. 

Perfect! That was exactly the advice I needed. Some playing around and I got it to work exactly the way I wanted.I still have some figuring out to do, but this is a solid foundation to work from.

July 10 (6 years ago)
The Aaron
Roll20 Production Team
API Scripter

Great!