[1.3.6] Bootstrap 5 Theme

Forum
Last Post
Threads / Messages

KittHaven

Member
Member
Joined
May 21, 2013
Messages
379
Points
18
Age
23
Location
Devon, UK
Mysidian Dollar
7,231
Okay! Hello! I am here with a theme after days of work! o_O This has taken me so long but I think it is worth it. :ROFLMAO:

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!
With the fact I have included 2 files you can create new Bootstrap themes that use different colours without needing to copy everything over each time. The colour variables make it much easier to change things around!

Here is what the basic template looks like:

  Spoiler: Images 


2022-01-01 06_05_55-Greenshot.png

Mobile view:

2022-01-01 06_17_45-Bean Pets and 14 more pages - Personal - Microsoft Edge.png

Pagination:

2022-01-01 06_17_20-Bean Pets and 14 more pages - Personal - Microsoft Edge.png



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):

Bootstrap 5 Screenshots.png

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.

2022-01-01 06_15_13-Bootstrap 5 Mys Theme.png

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! (y)
 

Attachments

  • Bootstrap 5 Mys Theme.zip
    24.6 KB · Views: 3
  • Test Pages.zip
    4.2 KB · Views: 4
Last edited:

Hall of Famer

Administrator
Staff member
Administrator
Joined
Dec 15, 2008
Messages
4,533
Points
48
Location
United States
Mysidian Dollar
213,979
This looks nice, congrats on making the theme. I actually planned to use Bootstrap 4 for the next major release, but maybe Bootstrap 5 is the better option now. I am still undecided on this.
 

KittHaven

Member
Member
Joined
May 21, 2013
Messages
379
Points
18
Age
23
Location
Devon, UK
Mysidian Dollar
7,231
This looks nice, congrats on making the theme. I actually planned to use Bootstrap 4 for the next major release, but maybe Bootstrap 5 is the better option now. I am still undecided on this.
Thank you! :giggle: I think it would be really cool if there was a default theme for Bootstrap with the next version, in my opinion Bootstrap 5 would be the best one to go for just because it's the most recent and some classes have changed since 4, but Bootstrap 4 is good too! I'm sure people will appreciate it either way, having a responsive theme has been quite fun! :LOL:
 

KittHaven

Member
Member
Joined
May 21, 2013
Messages
379
Points
18
Age
23
Location
Devon, UK
Mysidian Dollar
7,231
Bonus!

Here is a test page you can use with this theme! It contains most of the things you can change the colours of (at least, the ones I found important). You can use this to see what changing the colours looks like all together.

2022-01-07 12_43_23-Greenshot.png

2022-01-07 12_43_30-Greenshot.png

Also added to the main post. :) You can drag and drop into your files as they are sorted into the right folders inside and unless you have files called testcontroller.php and testview.php nothing should overwrite. You can reach the page by going to yoursite.com/test. I recommend making a link on your index that takes you to it for ease lol.
 

Attachments

  • Test Pages.zip
    4.2 KB · Views: 1

Kyttias

Super Moderator
Super Mod
Joined
Jan 26, 2014
Messages
850
Points
18
Mysidian Dollar
58,199
Great job! I'm glad to see this theme updated to a newer version of Bootstrap by someone else. I hope in the future it is easier to add classes to the html rather than hacking it in in post with jquery. Right now the html is far too entangled in the php to comfortably work with.
 

Similar threads

Users who are viewing this thread

  • Forum Contains New Posts
  • Forum Contains No New Posts

Forum statistics

Threads
4,184
Messages
32,466
Members
1,546
Latest member
Sly-Asteri
BETA

Latest Threads

Latest Posts

Top