You can change the look of your widget by adding custom CSS in your widget settings page. Here are some examples of some commonly used CSS code that can be used to achieve different effects.

Click here to change the pricing of the widget text.

Make your widget 3 columns wide:

Paste this code into the Custom CSS field in Widget Settings:

@media(min-width:500px){
.col-sm-4{
width:33%;
float:left;
}
}

You can change the value of 'min-width' to work correctly within your layout. It may take some experimenting to get it just right. Also, changing 33% to another number you can get a wide variety of column numbers. For instance, if you use the code below, your widget will only have one column of plans.

@media(min-width:500px){
.col-sm-4{
width:100%;
float:left;
}
}

You can also change the text of the price of a plan inside a widget. Instead of the default "XX.xx/month" you can make it say almost anything. Perfect for one time purchases. First you need to find the plan number. This can be found by editing the plan in Dashboard>Plans>Edit. At the top of the page it will have the plan ID number. Then you can replace the XXXXX in the code below with the plan number:

.plan_id_XXXXX h2 span {
  display: none;
}
.plan_id_XXXXX h2:before {
content: 'YOUR TEXT HERE' !important;
font-size: 200%;
}

This code should make the widget seamless so it blends in to your site. Its ready to be copied and pasted into Dashboard>Settings>CSS Box:

.panel-heading, .panel-title{
background:none !important;
box-shadow:none !important;
border:0px !important;
color:#fff !important;
}
.panel-heading{
display:none;
}
.panel-body,.panel{
border:0px !important;
box-shadow:none !important;
}
.panel{
border:0px;
}