Charms Code | Daisychain Help Center

CSS (Click to Expand)

You can swap up the sample logo, background color, etc.

/* ----- CUSTOM BRAND CSS ----- */
.wrapper.branded{
  background-color:#af24d7;
  color:#ffffff;
  font-family:Work Sans;
}
.bg-pattern{
  background-image:url(https://s3.amazonaws.com/wehtt.am/daisychain/charm-bg-abstract_blobs.png?v=2);
  opacity:0.18;
}
.logo{
  background-image:url(https://s3.amazonaws.com/wehtt.am/daisychain/logo-mockup.png);
  height:37px;
  width:127px;
}
.accent-color{
  border-color:#000000;
  color:#000000;
}

/* ----- STANDARD CSS ----- */
.wrapper{
  align-items:stretch;
  color:#000000;
  display:flex;
  flex-direction:column;
  font-size:36px;
  font-weight:bold;
  justify-content:center;
  letter-spacing:-0.01em;
  height:100%;
  line-height:42px;
  padding-bottom:40px;
  text-align:center;
  width:100%;
}
.inline-container{
  align-items:center;
  align-content:center;
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
}
.inline-space,
.inline-container span{
  margin-left:6px;
}
.strong{
  font-weight:700;
}
.bg-pattern{
  background-size:500px 500px;
  height:500px;
  left:0;
  position:absolute;
  top:0;
  width:500px;
}
.logo{
  align-self:center;
  background-repeat:no-repeat;
  background-size:100% 100%;
  display:flex;
  justify-content:center;
  position:absolute;
  bottom:20px;
}

/* SLIDE 1 */
.slide1{
  font-size:48px;
  line-height:56px;
}
.emoji-wave{
  background-image:url(https://s3.amazonaws.com/wehtt.am/daisychain/emoji-wave.png);
  background-repeat:no-repeat;
  background-size:44px 48px;
  height:48px;
  width:44px;
  left:-10px;
}

/* SLIDE 2 */
.slide2{
  font-size:40px;
  line-height:47px;
}
.slide2-text{
  padding:0px 25px;
}
.slide2-img{
  align-self:center;
  border-style:solid;
  border-width:4px;
  border-radius:150px;
  margin-top:13px;
}

/* SLIDE 3 */
.slide3{
  font-size:55px;
  line-height:60px;
  padding:0px 80px;
}

/* SLIDE 4 */
.slide4{
  font-size:44px;
  font-weight:400;
  line-height:52px;
  padding:0px 30px;
}

/* SLIDE 5 */
.slide5{
  font-size:52px;
  line-height:60px;
  padding:0px 30px;
}
.slide5 .inline-container{
  align-self:stretch;
  justify-content:flex-start;
  text-align:left;
}
.slide5 .text-caps{
  font-size:25px;
  font-weight:400;
  letter-spacing:1px;
  line-height:34px;
  margin-bottom:10px;
  text-transform:uppercase;
}
.slide5 .bullet{
  margin-left:0px;
  margin-right:13px;
}

/* SLIDE 6 */
.slide6{
  font-weight:400;
  padding:0px 30px;
}
.slide6 .inline-container{
  margin-bottom:18px;
}

/* OVERRIDES */
.wrapper .text-hide,
.wrapper .text-hide span,
.wrapper .text-hide div{
  color:rgba(0,0,0,0);
}
.wrapper .hide{
  display:flex;
  opacity:0;
  position:relative;
  left:1000px;
}

HTML (Click to Expand)

All frames included in a single code block below, though you'd want to separate these into separate frames in the Media Studio. You'll also want to host the images yourself (using something like Dropbox or Imgur) and use direct image links in your HTML.

<div class="wrapper branded slide1">
  <div class="bg-pattern"> </div>
  <div class="inline-container"><span class="emoji-wave"></span> <span>Hi</span> <span class="first_name">{{ person.first_name }}!</span></div>
  <div class="logo"> </div>
</div>

<div class="wrapper branded slide2">
  <div class="bg-pattern"> </div>
  <div class="inline-container slide2-text">It's Jon with Daisychain.</div>
  <div class="inline-container slide2-img"><img class="jon" src="https://s3.amazonaws.com/wehtt.am/daisychain/jon-avatar.png" height="240" width="240"/></div>
  <div class="logo"> </div>
</div>

<div class="wrapper branded slide3">
  <div class="bg-pattern"> </div>
  <div class="inline-container">This is a charm!</div>
  <div class="logo"> </div>
</div>     

<div class="wrapper branded slide4">
  <div class="bg-pattern"> </div>
  <div class="inline-container"><span>Charms</span> <span>are</span> <span class="strong">completely</span> <span class="strong">customizable</span> <span>for</span></div>
  <div class="inline-container strong">{Organization Name}.</div>
  <div class="logo"> </div>
</div>

<div class="wrapper branded slide5">
  <div class="bg-pattern"> </div>
  <div class="inline-container text-caps">Charms can help {Organization Name} with:</div>
  <div class="inline-container"><span class="accent-color bullet">•</span> Advocacy</div>
  <div class="inline-container"><span class="accent-color bullet">•</span> Mobilization</div>
  <div class="inline-container"><span class="accent-color bullet">•</span> Fundraising</div>
  <div class="logo"> </div>
</div> 

<div class="wrapper branded slide6">
  <div class="bg-pattern"> </div>
  <div class="inline-container">Questions?</div>
  <div class="inline-container">Want to chat about using Charms for {Organization Name}?</div>
  <div class="inline-container strong">Reply below!</div>
  <div class="logo"> </div>
</div>

Sending Out Charms (Personalized GIFs)