Building a Wrapper from Scratch: CTA buttons

Aaron Rothberg · April 2018

Hi Everyone-

Now that we've lauched our first Team Raiser using the basic configuration that Blackbaud helped us setup, I'm attempting to build a second Team Raiser from scratch (with little training) and I've started by creating a new wrapper. One problem I'm having is with our Call To Action (CTA) buttons.

If you take a look at our CTA buttons on our live site (http://necc.convio.net/site/TR?fr_id=1040&pg=entry) you'll see we have four buttons; Form a Team, Join a Team, Register, and Donate.

In our new wrapper we only have need for one of those buttons. I've deleted three of the buttons, but I can't get the one remaining link to look like an existing CTA button. It just looks like a link. See screenshot at the bottom of this post.

To start this process, I copied all of our wrapper components under Page Builder to a new Page Builder folder (not sure on the terminology?). I then edited the CTA component of the wrapper to include only one button.

Here's that code.

********************
<div class="row">

<div class="col-sm-4"><a href="TR?sid=1031&pg=informational&fr_id=[[S80:trID]] class="button btn-primary btn-block btn-lg">Donate to a runner<small>and make a difference</small></a></div>

</div>

********************

I also dug into the CTA portion of the style sheet hoping I'd find something there, but the only thing I found for the CTA portion were color controls for hover, focus, etc...

Here's that part of the style sheet.

********************
/*These styles are also applied to 4 CTA buttons*/

a.btn-primary,

a.btn-primary:hover,

div.thermometer-container div.donation-link-container a {

background-image:url('../turbo-themes/necc/static/images/bg-pattern-diagonal.png');

border-color: #fcaa30;

border-color: #8ABADC;

}

button.btn-success,

a.btn-success {

color: #FFFFFF;

background: #0082B7;

border-color: #0082B7;

border-radius:0;

}

.btn-success:focus,

.btn-success:active {

color: #ffffff;

background-color: #0082B7;

border-color: #0082B7;;

}

********************

Does anyone have any ideas on how to get my link to look like a button?

00f82dc8bb6d2cf2a7a110d48c934803-huge-ct

Any and all help is much appreciated. I doubt this will be my last question.

Jeremy Reynolds · April 2018

It'll help if you give us some more of the overall code.

Based on the page you've linked, make sure you've got the code you posted in the parent #call-to-action container. For what it's worth, the linked page should also be alongside of the other 3 buttons in that same container...

<div id="call-to-action">

<div class="row">

<div class="col-sm-3">

<a href="TR?sid=1031&pg=informational&fr_id=[[S80:trID]] class="button btn-primary btn-block btn-lg">

Donate to a runner

<small>

and make a difference

</small>

</a>

</div>

<div class="col-sm-3">

<a href="TRR?pg=tfind&fr_id=[[S80:trID]] " class="button btn-primary btn-block btn-lg">

Join a Team

<small>

to begin fundraising

</small>

</a>

</div>

<div class="col-sm-3">

<a href="TRR?pg=tfind&fr_id=[[S80:trID]]&fr_tm_opt=none" class="button btn-primary btn-block btn-lg">

Register

<small>

as an individual

</small>

</a>

</div>

<div class="col-sm-3">

<a href="TR?sid=1031&pg=informational&fr_id=[[S80:trID]]" class="button btn-primary btn-block btn-lg">

Donate

<small>

and make a difference

</small>

</a>

</div>

</div>
</div>

Aaron Rothberg · April 2018

Thanks Jeremy.

I'm not sure what more code to post. Everything I'm working on is a copy of the original built for us. If you look at the Call To Action part of the wrapper below, the code I pasted includes the entire CTA portion of the wrapper.

c5778ce96c568c53fff6785ca6cf0399-huge-ct

Here's a copy of all of the code in the CTA portion of the wrapper from the original/working wrapper.

3ccca40f27743050f28f1ca8bcc25269-huge-wo

Copy-paste of code from original/working wrapper with four buttons

<div class="row">

<div class="col-sm-3"><a href="TRR?pg=tfind&fr_id=[[S80:trID]]&fr_tm_opt=new" class="button btn-primary btn-block btn-lg">Form a Team<small>become a team captain</small></a></div>

<div class="col-sm-3"><a href="TRR?pg=tfind&fr_id=[[S80:trID]]" class="button btn-primary btn-block btn-lg">Join a Team<small>to begin fundraising</small></a></div>

<div class="col-sm-3"><a href="TRR?pg=tfind&fr_id=[[S80:trID]]&fr_tm_opt=none" class="button btn-primary btn-block btn-lg">Register<small>as an individual</small></a></div>

<div class="col-sm-3"><a href="TR?sid=1031&pg=informational&fr_id=[[S80:trID]]" class="button btn-primary btn-block btn-lg">Donate<small>and make a difference</small></a></div>

</div>

Tanna Lewis · April 2018

I recently created a small event's TR for which I had to do the same thing - show only the "Donate" call-to-action. Rather than creating a completely new wrapper, I just hid the other buttons with a bit of js on the greeting page:

#call-to-action .container .row .col-sm-3:nth-child(1),

#call-to-action .container .row .col-sm-3:nth-child(2),

#call-to-action .container .row .col-sm-3:nth-child(3) {

display: none;

}

So whether you make the existing wrapper more dynamic and use it for multiple TRs, or if you still use a completely new wrapper, simply hiding the buttons might be an option? So that you are leaving the existing scripts in place and making it more easily adaptable to other events, plus having less risk of breaking the code by accidentally deleting something you needed?

Tanna Lewis · April 2018

PS: I blame it on the fact that it was Monday that I said this is a js solution - I meant css y'all!! Hope I didn't confuse anyone!

Building a Wrapper from Scratch: CTA buttons

Comments

Categories