General
CSS overrides included.
Blesta has long been my preferred software for managing client accounts, billing, and service management across my various brands. Over the years, it has established itself as a robust platform; however, one area where it still falls short is its front-end framework.
Currently, Blesta is built on Bootstrap 4.6.2, while the latest version, Bootstrap 5.3, offers exciting new features and improvements, including better grid layouts, enhanced utility classes, and updated components designed for modern web standards. Given that I typically only use the latest releases in my front-end projects, this discrepancy often leads to inconsistencies in the integration between my main website and the Blesta client portal. As someone who values a seamless user experience, any noticeable differences between these two platforms are simply unacceptable to me.
To address this issue, I made the decision to migrate from Bootstrap 4.6.2 to the most recent version on my Blesta portal at my.michaelcee.com. The goal was not only to enhance the visual appeal of my client area but also to improve overall functionality and responsiveness. This migration would ensure that my clients enjoy a consistent experience, regardless of which part of my site they are navigating.
In this post, I'll guide you through the entire process of this conversion, detailing the steps I took, the challenges I faced, and the custom CSS overrides I implemented to bridge the gap between Bootstrap 4 and 5. Whether you're considering a similar migration or simply curious about the process, I hope to provide valuable insights and practical advice to help streamline your own front-end development efforts.
When comparing Bootstrap 4 and Bootstrap 5, several key enhancements stand out. Bootstrap 5 introduces a host of new features aimed at streamlining front-end development and improving user experience. For instance, the updated grid system now includes additional breakpoints, providing developers with greater flexibility when designing responsive layouts. Enhanced utility classes allow for quicker styling adjustments without deep dives into custom CSS, expediting the development process significantly. Furthermore, Bootstrap 5 has removed the jQuery dependency, which simplifies JavaScript interactions and improves performance. While both versions are powerful, Bootstrap 5 is engineered to meet the demands of modern web applications, making it the logical choice for any new project.
Before diving into the actual migration process, it's crucial to take preparatory steps to safeguard your Blesta installation. First and foremost, ensure you backup your entire application, including the database and all customisation. You should review any existing customisation and classes to identify which ones are tied to Bootstrap 4. Understanding what needs to be adjusted will make the next steps significantly easier.
One of my main goals with these CSS overrides was to create a dark mode experience that complements Bootstrap 5's aesthetic enhancements. To achieve this, I used custom CSS properties to manage colour schemes dynamically, allowing for a consistent dark mode that adapts based on user preferences.
In my opinion, some of these overrides are quite shoddy and I'm sure there's many better or more efficient ways of doing things. This is just the method I chose at the time.
.footer-logo {
background: #202020 !important;
max-width: 250px;
margin-top: -125px;
border-radius: 150px;
padding: 20px;
transition: transform 0.3s ease;
}
.footer-logo:hover {
transform: scale(1.05) !important;
}
.footer-link {
color: white;
text-decoration: none;
font-size: 14px;
font-weight: 500;
transition: color 0.3s ease, text-decoration 0.3s ease;
}
.footer-link:hover {
color: #f39c12 !important;
text-decoration: underline !important;
}
.footer-copyright p {
font-size: 14px !important;
margin: 5px 0 !important;
}
@media (min-width: 1400px) {
.container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
max-width: 1320px !important;
}
}
.navbar-brand img:hover {
transform: scale(1.1) !important;
}
.nav-link:hover, .dropdown-item:hover {
color: #f39c12 !important;
background-color: transparent !important;
}
.navbar-nav .nav-item {
margin-left: 20px !important;
}
.navbar-collapse {
transition: all 0.3s ease !important;
}
.navbar-text button:hover {
background-color: #e67e22 !important;
transform: scale(1.05) !important;
}
.well, .card {
padding: 25px !important;
margin-top: 25px !important;
background: #2c2c2c !important;
color: white !important;
}
p, td, th, li, h4, small {
color: white !important;
}
.bg-light, .rate, .list-group a, .list-group a:hover, .list-group-item.credits,
.alert-info, .breadcrumb, .row .ticket-reply div.top-bar {
background: #2c2c2c !important;
color: white !important;
}
.alert-info p {
margin-bottom: 0px !important;
}
.categories a {
font-size: 14px !important;
font-weight: bold !important;
color: white !important;
text-decoration: none !important;
}
.card-kb {
background-color: var(--light) !important;
border-color: #2c2c2c !important;
font-size: 12px !important;
text-align: center !important;
padding: 40px !important;
margin-bottom: 20px !important;
}
.breadcrumb a {
color: white !important;
}
.cards .card .card-content {
width: 100% !important;
}
.cards .card .card-content .card-value {
font-size: 45px !important;
font-weight: 600 !important;
line-height: 45px !important;
margin-bottom: 5px !important;
}
.card-links, .panel-links {
padding: 6px 10px !important;
list-style: none !important;
font-size: 12px !important;
margin: 0 !important;
}
.card-links>li, .panel-links>li {
display: inline-block !important;
color: #5a6268 !important;
}
.card-links>li+li:before, .panel-links>li+li:before {
padding: 0 5px !important;
color: #ccc !important;
content: "|\00a0" !important;
}
.card-links .badge, .card-links .label, .panel-links .badge, .panel-links .label {
min-width: 10px !important;
padding: 1px 4px !important;
font-size: 10px !important;
border-radius: 6px !important;
background-color: #9d9d9d !important;
color: #fff !important;
}
.card-body, .panel .panel-body {
padding: 10px !important;
}
a, a:hover {
color: #fff !important;
}
.btn-block {
display: block !important;
width: 100% !important;
}
.float-right {
float: right !important;
}
.float-left {
float: left !important;
}
.section-title {
margin-top: 10px !important;
}
.section-title h3 {
color: white !important;
}
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
background-color: #2b2e2f !important;
}
.table-curved {
border-collapse: separate;
border-radius: 4px;
border-left: 0;
margin-bottom: 2px;
}
.form-control {
background: #212529 !important;
color: white !important;
border: 1px solid #2c2c2c !important;
}
label {
font-size: 12px !important;
color: white !important;
display: inline-block;
margin-bottom: .5rem;
}
.form-group {
margin-bottom: 1rem;
}
.md-editor .md-footer, .md-editor>.md-header {
display: block;
padding: 6px 4px;
background: #202020 !important;
}
.md-editor .md-controls {
float: right;
padding: 3px;
}
.md-editor .md-controls .md-control {
right: 5px;
color: #bebebe;
padding: 3px 3px 3px 10px;
}
.md-editor .md-fullscreen-controls {
display: none;
}
.btn, .btn.btn-xs {
font-size: .95rem !important;
}
.btn-group-sm>.btn, .btn-sm, .btn.btn-xs {
padding: .25rem .5rem !important;
font-size: .875rem !important;
line-height: 1.5 !important;
border-radius: .2rem !important;
}
.btn-group-vertical>.btn, .btn-group>.btn {
position: relative !important;
flex: 1 1 auto !important;
}
.ck-content .text-tiny, .text-tiny {
font-size: .7em !important;
}
.ck-content .text-small, .text-small {
font-size: .85em !important;
}
.ck-content .text-big, .text-big {
font-size: 1.4em !important;
}
.ck-content .text-huge, .text-huge {
font-size: 1.8em !important;
}
.card-nav, .panel-nav {
margin: 0 0 10px !important;
}
.cards .card, .text-center {
text-align: center !important;
}
.dropdown-menu {
background: #2c2c2c !important;
}
.tickets, .form-control {
background: #212529 !important;
color: white !important;
}
.ticket-reply .form-group textarea {
background: #212529 !important;
color: white !important;
}
.panel .panel-heading {
background: #2c2c2c !important;
color: white !important;
font-weight: bold !important;
}
.list-group-item {
background: #2c2c2c !important;
color: white !important;
}
.card-body, .panel .panel-body {
padding: 10px;
}
.breadcrumb {
margin-top: -23px;
border: 1px solid #2c2c2c !important;
border-radius: 0px 0px 4px 4px;
padding: 10px;
margin-bottom: 20px;
}
.page-footer {
background: linear-gradient(135deg, #1a1a1a, #333333);
color: white;
padding-top: 6rem;
padding-bottom: 6rem;
border-top: 4px solid #f39c12;
}
.whois div.tlds {
margin-bottom: 0;
}
.whois div.tlds, div.search {
margin: 0 auto;
text-align: center;
display: block;
}
.service-card {
background: #2c2c2c;
border: 2px solid #333;
transition: all 0.3s ease-in-out;
}
.service-card:hover {
transform: translateY(-10px);
box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}
body {
background: #1a1a1a;
}
.btn-light {
color: #fff;
background-color: #212529 !important;
border-color: #212529 !important;
}
.page-link {
color: #fff;
background-color: #212529 !important;
border-color: #212529 !important;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
color: #fff;
background-color: #212529 !important;
}
h4 {
padding-top: 10px;
}In conclusion, migrating Blesta from Bootstrap 4 to 5 has significantly improved not only the look and feel of my client area but also streamlined my development process. The advantages of enhanced responsiveness, utility classes, and improved performance cannot be overstated. Looking ahead, I plan to explore more advanced features of Bootstrap 5 for other projects that might need a facelift. I encourage others considering a similar migration to take the plunge; the rewards are well worth the effort!
Until next time,
MichaelCee