Custom pricing table using the newest updates to Tadabase

Just finished styling my pricing table using the newest CSS Classes in Cards, thanks @moe! This is exactly what I was looking for.

Here’s how it turned out:

2 Likes

Nicely done! I like the filter tabs at the top for yearly options.

1 Like

That’s awesome! Thanks for sharing :heart_eyes:

Awesome!

Is it possible to share the css code, I’m looking for customizing my subscription designs as well?

Thanks in advance,

Eric

Hey Eric,

Happy New Year! I’ll definitely share it, just give me a couple of days to put it together.

Cam

Hi @optimizsql,

Here is what I did for the pricing boxes:

First I added a custom class name for each price box (Eg: boxOne, boxTwo, boxThree):

Added the background color to each box on the css tab:

.boxOne .subscription-plan-item-box {
background: green;
}
.boxTwo .subscription-plan-item-box {
background: orange;
}
.boxThree .subscription-plan-item-box {
background: blue;
}

Then I added a bunch of plan lines and added class names to each one:

Added this to the css tab:

.subscription-plan-item-box {
margin-top: 30px;
}
.subscription-plan-line-item {
text-align: center;
}
.lineTitle.subscription-plan-line-item {
background: white;
color: black;
padding: 15px 0px 15px 0px;
margin-left: -21px;
margin-right: -21px;
}
.linePrice.subscription-plan-line-item {
color: white;
padding: 35px 0 0px 0;
}
.lineMonthly.subscription-plan-line-item {
color: white;
padding-bottom: 35px;
}
.lineOdd.subscription-plan-line-item {
background: #f7f7f7;
margin: 0 -20px;
padding: 10px;
}
.lineEven.subscription-plan-line-item {
background: #fff;
margin: 0 -20px;
padding: 10px;
}

I also change the stripe button:

.stripe-button-el {
background: rgb(0 0 0 / 0) !important;
border-radius: 0px;
border-bottom: 0px;
overflow: hidden;
display: inline-block;
visibility: visible !important;
background-image: -webkit-linear-gradient(#28a0e5,#015e94);
background-image: -moz-linear-gradient(#28a0e5,#015e94);
background-image: -ms-linear-gradient(#28a0e5,#015e94);
background-image: -o-linear-gradient(#28a0e5,#015e94);
background-image: -webkit-linear-gradient(#28a0e5,#015e94);
background-image: -moz-linear-gradient(#28a0e5,#015e94);
background-image: -ms-linear-gradient(#28a0e5,#015e94);
background-image: -o-linear-gradient(#28a0e5,#015e94);
background-image: linear-gradient(#28a0e5,#015e94);
-webkit-font-smoothing: antialiased;
border: 0px;
padding: 0px;
text-decoration: none;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;
-webkit-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-moz-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-ms-box-shadow: 0 0 0 rgba(0,0,0,0.0);
-o-box-shadow: 0 0 0 rgba(0,0,0,0.0);
box-shadow: 0 0px 0 rgba(0,0,0,0.0);
-webkit-touch-callout: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
cursor: pointer;
}

.stripe-button-el span {
display: block;
position: relative;
padding: 0 12px;
height: 30px;
line-height: 30px;
background: rgb(0 0 0 / 0) !important;
background-image: -webkit-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: -moz-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: -ms-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: -o-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: -webkit-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: -moz-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: -ms-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: -o-linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
background-image: linear-gradient(#7dc5ee,#008cdd 0%,#30a2e4);
font-size: 14px;
color: #fff;
font-weight: bold;
font-family: “Helvetica Neue”,Helvetica,Arial,sans-serif;
text-shadow: 0 0px 0 rgba(0,0,0,0.0);
-webkit-box-shadow: inset 0 0px 0 rgba(0,255,255,0.0);
-moz-box-shadow: inset 0 0px 0 rgba(0,255,255,0.0);
-ms-box-shadow: inset 0 0px 0 rgba(0,255,255,0.0);
-o-box-shadow: inset 0 0px 0 rgba(0,255,255,0.0);
box-shadow: inset 0 0px 0 rgba(0,255,255,0.0);
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
-ms-border-radius: 0px;
-o-border-radius: 0px;
border-radius: 0px;

}

button.stripe-button-el {
padding: 3px 50px;
background: #353535 !important;
}

That’s about it, I did some tweaking for mobile display but other than that it should do the trick. I’m not sure if the theme you are using will change any of the formatting but in case it does I’m using Flatly. Let me know if you have any questions.

1 Like

Thank you so much

Eric

1 Like