Custom CSS blocks or stylesheets in templates

Answered

Using the Python BDK, I am looking to add custom formatting to my MessageML/Jinja2 templates with CSS.

After doing some testing, I see that I can add inline styles, which is good, but not robust enough for our design.

<messageML>
	<div style="background-color:red;">...</div>
</messageML>

I don't seem to be able to add style blocks without the app throwing an exception.

<messageML>
	<style>
		.bg-red {
			background-color: red;
		}
	</style>
	<div class="bg-red">...</div>
</messageML>

Ideally, I would like to be able to add a custom stylesheet.

<link rel="stylesheet" type ="text/css" href="./static/css/custom.css">

Is there a way to acheive the number 3 method? If not, is there a way to achieve the number 2 method?

  				
				1

				1
Posted 
	2 years ago

								Edited 
	2 years ago

					More
				  		
  Report
		
					Jamie Campbell
				
					18
					 × 2

Revisions

Votes Newest

Answers

Unfortunately, only inline styles like in your point #1 are currently allowed within the MessageML specification.

One way to mitigate this is to use a templating engine so that style definitions can be reused.

<!-- resources/hello.jinja2 -->
<div style="{{ styles.abc }}">hello</div>
<div style="{{ styles.def }}">goodbye</div>
<div style="{{ styles.abc }}">hello again</div>

from jinja2 import Template

...

@activities.slash("/hello")
async def hello(context: CommandContext):
    styles = {
        "abc": "background:blue",
        "def": "background:red"
    }
    template = Template(open('resources/hello.jinja2').read(), autoescape=True)
    message = template.render(styles=styles)
    await bdk.messages().send_message(context.stream_id, message)

Not the most elegant solution but hopefully it might help a little.

 						
Posted 
	2 years ago

								Edited 
	2 years ago

					More
				  		
  Report
		
					Yong Sheng Tan
				
					39
					 × 2
					 Administrator

Revisions

Write your answer

4K Views

1 Answer

2 years ago