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:
3 Likes
Nicely done! I like the filter tabs at the top for yearly options.
1 Like
That’s awesome! Thanks for sharing 
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.
2 Likes
Thank you so much
Eric
1 Like