Okay! Hello! I am here with a theme after days of work! This has taken me so long but I think it is worth it.
I managed to get Bootstrap 5 working with the Mys script. At first I couldn't get the menu to work so I made myself a custom one, but for the purposes of giving the theme to the community I wanted to have the menu work automatically and not require a custom one... and I finally cracked it! Thanks to Kyttias for their Bootstrap 3 theme, I was able to take a lot of inspiration from it to get things working!
What does this theme include?
Here is what the basic template looks like:
I tried to keep it as simple and basic as possible, so you can customise it to your liking!
As an example of a customised version, here is mine (still a wip though):
You can find a lot of information for how to style Bootstrap here: W3Schools
Now I'll go into a little more detail on the files!
First, the general CSS file, the one in your root folder.
In here we have 2 files.
mycss.css and reboot.css.
For the most part you can ignore reboot.css, it just contains some code that helps to make webpages more consistent across different browsers, etc.
But in mycss.css is where all the classes and stuff are!
I won't post it here because it's too long lol, but here is the table of contents in the file so you can see what it includes!
But it basically sets everything into place across your whole site as well as any other themes you create!
Next is myjquery.js in the js folder. This file uses JQuery to help style core mysidia things! For the most part you can leave this alone unless you want to change stuff and know how to.
Next is the custom pagination.php! This redoes all the default mysidia pagination classes to use the Bootstrap ones. This is a complete override so make sure to replace the file!
Next we have the ACP pagination. Replacing the pagination.php file will break all the page links in the acp, so add this on to the bottom of the admin cp style.css to fix it! I don't have plans for an ACP theme just yet as this took me a long time to finish lol.
You can also just download and replace using the file I have provided!
Next is where all the magic happens... in your themes folder there is a file called bootstrap5.css. Open it and you will see a TON of variables... for the most part you won't need to touch them, unless you want to style things in more detail...
These are the colours you will need to change to style most things:
That's just a taste though, as every class, every element, EVERYTHING, has a variable if you scroll down enough. Use CTRL+F to find what you need while editing the file. Most things use the above variables though so I recommend changing those before going into more detail lol.
Anyway! Let's get started putting it in place. I have included a .zip file with everything in it below! Download it, unzip it, and navigate to your www or public_html folder. Then you can just drag the contents in if you want because I have put everything into folders for you.
Replace anything that it asks you to replace (should be the acp style.css, and the pagination.php). And that should be it for installing! Hopefully you got it working without a hitch but do comment and let me know if I made a mistake somewhere or if you need help!
Hopefully this is good for someone!
This post is long enough so I haven't done a tutorial on installing the theme on your site, but if you need help with that just ask!
I managed to get Bootstrap 5 working with the Mys script. At first I couldn't get the menu to work so I made myself a custom one, but for the purposes of giving the theme to the community I wanted to have the menu work automatically and not require a custom one... and I finally cracked it! Thanks to Kyttias for their Bootstrap 3 theme, I was able to take a lot of inspiration from it to get things working!
What does this theme include?
- Bootstrap 5
- JQuery to help style Mysidia things
- Custom pagination.php to use Bootstraps classes (this does break the admin cp pagination, however I will also provide a quick fix in this post! I haven't made an adminCP theme yet, not sure if I will... but for now this does the trick!)
- Commented CSS
- Two CSS files
- One to go in the general css file, this contains all of Bootstraps colours and uses variables that I set in place.... these variables are in the second file.
- The second file is in your themes folder and contains all the colour variables! Easily change the colours without needing to manually edit everything!
Here is what the basic template looks like:
I tried to keep it as simple and basic as possible, so you can customise it to your liking!
As an example of a customised version, here is mine (still a wip though):
You can find a lot of information for how to style Bootstrap here: W3Schools
Now I'll go into a little more detail on the files!
First, the general CSS file, the one in your root folder.
In here we have 2 files.
mycss.css and reboot.css.
For the most part you can ignore reboot.css, it just contains some code that helps to make webpages more consistent across different browsers, etc.
But in mycss.css is where all the classes and stuff are!
I won't post it here because it's too long lol, but here is the table of contents in the file so you can see what it includes!
CSS:
/* TABLE OF CONTENTS - CTRL+F to find
~ 00 - CUSTOM (put your custom css here!)
~ 01 - General/Typography
~ 1.1 - Body
~ 1.2 - Mark
~ 1.3 - Code
~ 1.4 - Keyboard
~ 1.5 - Captions
~ 1.6 - Blockquotes
~ 02 - Links
~ 2.1 - General links
~ 2.2 - Breadcrumbs
~ 2.3 - Pagination
~ 2.4 - Contextual links
(uses primary, warning, etc, to colour them)
~ 03 - Images
~ 3.1 - Image thumbnail
~ 3.2 - Carousels
~ 04 - Tables
~ 4.1 - General tables
~ 4.2 - Contextual tables
(uses primary, warning, etc, to colour them)
~ 05 - Forms
~ 5.1 - General forms
~ 5.2 - Select forms
~ 5.3 - Check forms
~ 5.4 - Range forms
~ 5.5 - Input forms + form validation
~ 06 - Buttons
~ 6.1 - General buttons
~ 6.2 - Contextual buttons
(uses primary, warning, etc, to colour them)
~ 6.3 - Outline buttons
~ 6.4 - Accordion buttons
~ 07 - Menus
~ 7.1 - Dropdowns
~ 7.2 - Navbars & Navlinks
~ 7.3 - Offcanvas sidebar
~ 08 - Popups/Alerts
~ 8.1 - Alerts
~ 8.2 - Close buttons
~ 8.3 - Toasts
~ 8.4 - Modals
~ 8.5 - Tooltips
~ 8.6 - Popovers
~ 09 - Lists
~ 9.1 - List groups
~ 10 - Other/Misc
~ 10.1 - Cards
~ 10.2 - Badges
~ 10.3 - Progress bars
*/
But it basically sets everything into place across your whole site as well as any other themes you create!
Next is myjquery.js in the js folder. This file uses JQuery to help style core mysidia things! For the most part you can leave this alone unless you want to change stuff and know how to.
JavaScript:
/* Buttons */
$("button, input:button").addClass("btn btn-default");
$("#submit, input:button").addClass("btn btn-primary");
/* End Buttons */
/* Form Inputs */
$("form").attr("role","form");
$("input").addClass("form-control");
$(":checkbox").removeClass("form-control").css("width","");
$(":radio").removeClass("form-control").css("width","");
$("select").addClass("form-control");
$("textarea").addClass("form-control");
/* End Form Inputs */
/* Tables */
$("table").addClass("table table-hover table-condensed");
$("table td").css("vertical-align","middle");
/* End Tables */
/* Sidebar */
$(".sidebar").addClass("text-center");
$(".sidebar ul li").addClass("btn-group btn-primary");
$(".sidebar ul li a").addClass("btn btn-primary").css('border','0px');
$(".sidebar ul").addClass("btn-group-vertical");
$(".sidebar ul").removeClass("btn-group");
$("#theme-dropdown").show();
/* End Sidebar */
/* Menu */
$(".ddmenu ul:first").wrap("<div class='navbar navbar-expand-md bg-dark navbar-dark rounded-top py-3'></div>");
$(".ddmenu ul:first").wrap("<div class='container-fluid'></div>");
$(".ddmenu ul:first" ).before("<button class='navbar-toggler' type='button' data-bs-toggle='collapse' data-bs-target='#collapsibleNavbar'><span class='navbar-toggler-icon'></span></button>");
$(".ddmenu ul:first").wrap("<div class='collapse navbar-collapse justify-content-center' id='collapsibleNavbar'></div>");
$(".ddmenu ul:first").addClass("navbar-nav text-end");
$(".ddmenu ul:first-child li").addClass("nav-item dropdown");
$(".ddmenu ul li a").addClass("nav-link dropdown-toggle");
$(".ddmenu ul:first-child li a").attr("role", "button").attr("data-bs-toggle", "dropdown");
$(".ddmenu ul li .hides a").removeClass("nav-link dropdown-toggle");
$(".ddmenu ul li").removeClass("hides");
$(".ddmenu ul li ul").addClass("dropdown-menu");
$(".ddmenu ul li ul li a").addClass("dropdown-item");
$(".ddmenu ul li ul li a").removeAttr("role", "button").removeAttr("data-bs-toggle", "dropdown");
$(".ddmenu ul li ul li a").removeClass("nav-link dropdown-toggle");
/* End Menu */
Next is the custom pagination.php! This redoes all the default mysidia pagination classes to use the Bootstrap ones. This is a complete override so make sure to replace the file!
Next we have the ACP pagination. Replacing the pagination.php file will break all the page links in the acp, so add this on to the bottom of the admin cp style.css to fix it! I don't have plans for an ACP theme just yet as this took me a long time to finish lol.
CSS:
.pagination {
display: flex;
padding-right: 0;
list-style: none;
justify-content: center;
}
.page-link {
position: relative;
display: block;
color: #0d6efd;
text-decoration: none;
background-color: #fff;
border: 1px solid #dee2e6;
transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out
}
@media (prefers-reduced-motion:reduce) {
.page-link {
transition: none
}
}
.page-link:hover {
z-index: 2;
color: #0a58ca;
background-color: #e9ecef;
border-color: #dee2e6
}
.page-link:focus {
z-index: 3;
color: #0a58ca;
background-color: #e9ecef;
outline: 0;
box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25)
}
.page-item:not(:first-child) .page-link {
margin-right: -1px
}
.page-item.active .page-link {
z-index: 3;
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd
}
.page-item.disabled .page-link {
color: #6c757d;
pointer-events: none;
background-color: #fff;
border-color: #dee2e6
}
.page-link {
padding: .375rem .75rem
}
.page-item:first-child .page-link {
border-top-right-radius: .25rem;
border-bottom-right-radius: .25rem
}
.page-item:last-child .page-link {
border-top-left-radius: .25rem;
border-bottom-left-radius: .25rem
}
You can also just download and replace using the file I have provided!
Next is where all the magic happens... in your themes folder there is a file called bootstrap5.css. Open it and you will see a TON of variables... for the most part you won't need to touch them, unless you want to style things in more detail...
These are the colours you will need to change to style most things:
CSS:
--kitt-primary-light-one: #bacbe6;
--kitt-primary-light-two: #cfe2ff;
--kitt-primary-light-three: #c5d7f2;
--kitt-primary-light-four: #bfd1ec;
--kitt-primary: #0d6efd;
--kitt-primary-hover: #0a58ca;
--kitt-primary-alert-text: #084298;
--kitt-secondary-light-one: #cbccce;
--kitt-secondary-light-two: #e2e3e5;
--kitt-secondary-light-three: #d7d8da;
--kitt-secondary-light-four: #d1d2d4;
--kitt-secondary: #6c757d;
--kitt-secondary-hover: #565e64;
--kitt-secondary-alert-text: #41464b;
--kitt-success-light-one: #bcd0c7;
--kitt-success-light-two: #d1e7dd;
--kitt-success-light-three: #c7dbd2;
--kitt-success-light-four: #c1d6cc;
--kitt-success: #198754;
--kitt-success-hover: #146c43;
--kitt-success-alert-text: #0f5132;
--kitt-info-light-one: #badce3;
--kitt-info-light-two: #cff4fc;
--kitt-info-light-three: #c5e8ef;
--kitt-info-light-four: #bfe2e9;
--kitt-info: #0dcaf0;
--kitt-info-hover: #3dd5f3;
--kitt-info-alert-text: #055160;
--kitt-warning-light-one: #e6dbb9;
--kitt-warning-light-two: #fff3cd;
--kitt-warning-light-three: #f2e7c3;
--kitt-warning-light-four: #ece1be;
--kitt-warning: #ffc107;
--kitt-warning-hover: #ffcd39;
--kitt-warning-alert-text: #664d03;
--kitt-danger-light-one: #dfc2c4;
--kitt-danger-light-two: #f8d7da;
--kitt-danger-light-three: #eccccf;
--kitt-danger-light-four: #e5c7ca;
--kitt-danger: #dc3545;
--kitt-danger-hover: #b02a37;
--kitt-danger-alert-text: #842029;
--kitt-light-light-one: #dfe0e1;
--kitt-light-light-two: #f8f9fa;
--kitt-light-light-three: #ecedee;
--kitt-light-light-four: #e5e6e7;
--kitt-light: #f8f9fa;
--kitt-light-hover: #f9fafb;
--kitt-light-alert-text: #636464;
--kitt-dark-light-one: #373b3e;
--kitt-dark-light-two: #2c3034;
--kitt-dark-light-three: #323539;
--kitt-dark: #212529;
--kitt-dark-hover: #1a1e21;
--kitt-dark-alert-text: #141619;
--kitt-body-color: var(--kitt-dark);
--kitt-body-bg: var(--kitt-white);
--kitt-primary-rgb: 13, 110, 253;
--kitt-primary-rgb-hover: 49, 132, 253;
--kitt-secondary-rgb: 108, 117, 125;
--kitt-secondary-rgb-hover: 130, 138, 145;
--kitt-success-rgb: 25, 135, 84;
--kitt-success-rbg-hover: 60, 153, 110;
--kitt-info-rgb: 13, 202, 240;
--kitt-info-rbg-hover: 11, 172, 204;
--kitt-warning-rgb: 255, 193, 7;
--kitt-warning-rbg-hover: 217, 164, 6;
--kitt-danger-rgb: 220, 53, 69;
--kitt-danger-rbg-hover: 225, 83, 97;
--kitt-light-rgb: 248, 249, 250;
--kitt-light-rbg-hover: 211, 212, 213;
--kitt-dark-rgb: 33, 37, 41;
--kitt-dark-rbg-hover: 66, 70, 73;
--kitt-white-rgb: 255, 255, 255;
--kitt-black-rgb: 0, 0, 0;
--kitt-body-color-rgb: 33, 37, 41;
--kitt-body-bg-rgb: 255, 255, 255;
That's just a taste though, as every class, every element, EVERYTHING, has a variable if you scroll down enough. Use CTRL+F to find what you need while editing the file. Most things use the above variables though so I recommend changing those before going into more detail lol.
Anyway! Let's get started putting it in place. I have included a .zip file with everything in it below! Download it, unzip it, and navigate to your www or public_html folder. Then you can just drag the contents in if you want because I have put everything into folders for you.
Replace anything that it asks you to replace (should be the acp style.css, and the pagination.php). And that should be it for installing! Hopefully you got it working without a hitch but do comment and let me know if I made a mistake somewhere or if you need help!
Hopefully this is good for someone!
This post is long enough so I haven't done a tutorial on installing the theme on your site, but if you need help with that just ask!
Attachments
Last edited: