I do owe you all this .. LOL ...
the file we will be modifying will be:
apps/customer/views/price-plans/list.php
We will be replacing the block of code Line 40 to Line Line 60 ...
PHP:
<div class="row">
<?php foreach ($pricePlans as $index => $plan) { ?>
<div class="col-lg-4 price-plan-box-wrapper">
<div class="box box-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> price-plan-box borderless">
<div class="box-heading">
<h3 class="box-title"><?php echo $plan->name;?></h3>
<div class="box-tools pull-right">
<?php if ($plan->isRecommended) { ?>
<span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo Yii::t('app', 'Recommended');?></span>
<?php } ?>
<span class="badge bg-<?php echo $plan->group_id == $customer->group_id ? 'blue' : 'red';?>"><?php echo $plan->formattedPrice;?></span>
</div>
</div>
<div class="box-body">
<p> <?php echo $plan->description;?> </p>
</div>
<div class="box-footer">
<div class="pull-right">
<a class="btn btn-<?php echo $plan->group_id == $customer->group_id ? 'primary' : 'success';?> btn-flat btn-do-order" href="#payment-options-modal" data-toggle="modal" data-plan-uid="<?php echo $plan->uid;?>">
<?php echo $plan->group_id == $customer->group_id ? Yii::t('app', 'Your current plan, renew it') : Yii::t('app', 'Purchase');?>
</a>
</div>
<div class="clearfix"><!-- --></div>
</div>
</div>
</div>
<?php if (($index+1) % 3 === 0) { ?><div class="clearfix"><!-- --></div><?php } ?>
<?php } ?>
<div class="clearfix"><!-- --></div>
</div>
We are changing from 3 columns by default to 4, and just adding abit of theme styling to it all.
There are some custom css classes that I grabbed from
https://forum.mailwizz.com/threads/how-to-add-a-custom-payment-page-options.70/
To use custom css, go to MailWizz/customer/assets/css/ and create a new css file called "style-custom.css" You can add all your custom css code there. MailWizz will load it automatically.
PHP:
* {
box-sizing: border-box;
}
.hider1 {display: none;}
.hider2 {display: none;}
.hider3 {display: none;}
.columns {
float: left;
width: 33.3%;
padding: 8px;
}
.price {
list-style-type: none;
border: 1px solid #eee;
margin: 0;
padding: 0;
-webkit-transition: 0.3s;
transition: 0.3s;
}
.price:hover {
box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .header {
color: white;
font-size: 25px;
}
select { width: 75%; text-align-last:center; }
.price li {
border-bottom: 1px solid #eee;
padding: 5px;
text-align: center;
}
.price .grey {
background-color: #eee;
font-size: 20px;
}
.button {
background-color: #00A8D1;
border: none;
color: white;
padding: 10px 25px;
text-align: center;
text-decoration: none;
font-size: 18px;
}
@media only screen and (max-width: 600px) {
.columns {
width: 100%;
}
}
The above CSS is from vladmedv.27's tutorial linked above. Not all the CSS is needed, but I didnt feel like cutting down the unneeded css for this. There isnt much anyways.
That should do it. Good luck to all!
