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

Next challenges

Recent achievements

  • Global
  • Personal


  • Give kudos
  • Received
  • Given


  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

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 Edited

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
Published in Trello

📹 What is Trello?

Hello Community!  My name is Brittany Joiner and I am a Trello enthusiast and Atlassian Community Leader. I'll be sharing with you a series of videos with my top tips on how to best use Trello...

814 views 13 30
Read article

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