Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Style embedded Trello-Cards


Hi Guys and Girls

I've embedding Trello-Cards by reading from the board-json file. So far so good, the cards are loading (pretty slow...) but now i want to style the cards. Or at least give them margin/padding.

The id of a single card-div is embedded-card, so i do like this:

#embedded-card {
      margin: 1rem !important;

Doesn't matter if I try to style it with CSS directly or add inline styles with JS, there is no effect. I've also tried to set a timeout, so the styles getting added when the cards fully loaded.
Here is my pen:

Any suggestions for styling? And how to improve loading speed?

1 answer

Ok I can add margin on the iframe instead of the div.

Question remains on how to speed up things :)

@Marc Thank you for sharing your project.

Not trying to answer your query of speed, I tested out using report variables to construct the href and send it to an endpoint via a http request to construct the <blockquote>. Because you can use report variables in calendar commands you will be able to use it to provide regular updates to the website. Obviously, your approach of reading the entire json of the board avoided the need for this but I was looking at how I can avoid the hard coding of the list id in this JS and to let Trello automate this aspect of things.

Thanks again for sharing your project.

Now i've coded it that way, so it only displays the cards with a specific label. Reading the whole JSON is very convenient way to do it I think. Also, when just reading the JSON I don't have to mess with Node-JS whats not compatible with our website anyway.

Regarding the speed; Its now live on our website and it loads much faster than on my codepen.

@Marc Congratulations. Would you be able to point me to the website. 

I am but ashamed :D It's a freakin mess (not my mess im new). I will make ourself a new one soon.

Here you go:

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Trello

Taco Tuesday: Your favorite Trello blog takeaway

Hello friends! From the community that brought you Welcome Wednesday, Throwback Thursday and Friday Fun, welcome to Taco Tuesday, a weekly discussion about all things Trello. The best part? One Tac...

381 views 14 12
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you