Bootstrap 3 (Wise) and Bootstrap 5 (Joomla)

Bootstrap 3 and Bootstrap 5

Because the Wise styling uses Bootstrap 3 and Joomla 4 uses Bootstrap 5, this can create conflicts with both CSS and Javascript. The following solution is optional. This is the solution that I prefer because I can use the Wise bootstrap styling for the Wise pages and my template/Joomla bootstrap for the rest of the Joomla pages. This gives me the best of both worlds so that Wise gets what it needs and I can use the full power of Joomla on the rest of my pages without the need of a pagebuilder or the entire template forcing me to use Bootstrap 3.

You may want to use a different solution. What follows is how I'm setting it up in the US Joomla Wise libraries.

This functionality requires the use of a third-party extension called jQuery Easy Profiles. It is a paid/commercial extension. https://extensions.joomla.org/extension/jquery-easy-profiles/.

jQuery Easy Profiles has excellent documentation and support. Olivier Buisard is the developer. Olivier helped me get this set up for Gantry 5 templates. Your template may be different.

Note: You may need a jQuery Easy Profile module for each language if your site is multilingual.

1. Install jQuery Easy Profiles.
2. Make sure the System plugin is enabled.
3. Go to Site Modules and click 'New'.
4. Select 'jQuery Easy Profile'.
5. Enter a Title that makes sense to you and Hide the Title.
6. Make sure the Position is set to 'jqeprofile'.
   
   **Remember, this is the setup for a Gantry 5 template. Your template may have a different setup.**
7. Click on the 'Menu Assignment' tab.
8. For the Module Assignment, select 'Only' on the pages selected from the drop-down.
9. Select only the Catalog Wrapper and Wise Apps from the Menu Selection.
   
10. Ignore the 'More Assignments' and 'General Options' tabs (unless you choose to use them).
11. Click on the 'jQuery' tab.
12. In Add/Fix jQuery, click on the 'jQuery + UI' button.
13. In jQuery, select 'Joomla! framework' from the drop-down.
    
14. In Migrate, select 'Joomla! framework' from the drop-down.
15. In jQuery UI, select version 1.11.x from the drop-down and enter the Sub-version of 4.
    
16. In Additional Modifications in the Ignore Scripts field, add "media/jui/js/chosen.jquery".
17. Toggle Strip NoConflict Code to 'Yes'.
    
18. Click on the 'Bootstrap' tab.
19. In Add/Fix Bootstrap, click on the 'Bootstrap' button.
20. In Bootstrap, select the Version 3.3.x from the drop-down and enter Sub-Version "7".
21. In the File Types drop-down, select '.js'.
    
22. Ignore the 'Scripts' tab.
23. Click the 'Styles' tab.
24. In 'Strip Remaining CSS', we're going to strip the Bootstrap 5 CSS file from the template for the /wise-apps and /catalog pages by adding /media/gantry5/engines/nucleus/css-compiled/bootstrap5.css to the 'Strip Remaining CSS' field.
25. In 'Head Tag', we're going to add the Wise Bootstrap file into the /wise-apps and /catalog pages by adding "https://[YOURWISEINSTANCEDOMAINgoeshere]/wise-modules/web_bootstrap/4/css/wise-bootstrap-namespaced.css" into the 'Add Styles' field.
    
     
26. Click 'Save' and test out the frontend. You should find that your catalog magically looks like it should...or close to it.
    
    Also in the 'Head tag' area is an 'Add Style Declarations' field. I use this when I want to style something on the /wise-apps or /catalog pages that would conflict with styling elsewhere in the template if I added it to my custom CSS file. This field acts like a custom CSS file only for /wise-apps and /catalog. Here are some things I've added to mine which may help you:

    /* Date picker for the register page */
    .dropdown-menu {
      position: absolute;
      top: 100%;
      left: 0;
      z-index: 1000;
      display:  none;
      float: left;
      min-width: 160px;
      padding: 5px 0;
      margin: 2px 0 0;
      font-size: 16px;
      text-align: left;
      list-style: none;
      background-color: #fff;
      background-clip: padding-box;
      border: 1px solid #ccc;
      border: 1px solid rgba(0,0,0,0.15);
      border-radius: 4px;
      -webkit-box-shadow: 0 6px 12px rgba(0,0,0,0.175);
      box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    }

    
    .glyphicon {
      position: relative;
      top: 1px;
      display: inline-block;
      font-family: "Glyphicons Halflings";
      font-style: normal;
      font-weight: 400;
      line-height: 1;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    .uib-left, uib-right {
      height: 41px;
    }

    .uib-left::after {
      position: absolute;
      margin: -11px 0 0 -13px;
      content: "←";
      font-size: 30px;
    }

    .uib-right::after {
      position: absolute;
      margin: -11px 0 0 -13px;
      content: "→";
      font-size: 30px;
    }

    wise-pause-hold-dates-picker .uib-left::after {
      content: "" !important;
    }

    wise-pause-hold-dates-picker .uib-right::after {
      content: "" !important;
    }

    .dropdown-menu button[disabled], html input[disabled] {
      opacity: 0.5;
      pointer-events: none;
    }

    .dropdown-menu .text-muted {
      opacity: 0.5;
    }

    /* My requests */

    .ng-isolate-scope .wise-bootstrap table, .wise-bootstrap th, .wise-bootstrap td, .wise-bootstrap tr {
      border: 1px solid #ddd;
      padding: 10px;
    }

    delete-item-request-button .btn-secondary {
      background: #e9e9ed;
    }

    /* Place a hold button */
    ul {
      margin-left: 0px;
    }

    /* Pause Holds Date Picker */
    .uib-datepicker-popup.dropdown-menu {
      display: block;
    }

    /* Pause Holds Labels */
    .wise-bootstrap .label {
      color: #000000 !important;
    }

    /* Resume Button Margin */
    .wise-bootstrap fieldset {
      margin-bottom: 15px;
    }

    /* Calendar */
    .uib-daypicker ng-scope .wise-bootstrap table, .wise-bootstrap th, .wise-bootstrap td, .wise-bootstrap tr {
      padding: 0px;
    }

    
    wise-search-searchbar input.form-control {
      height: 50px !important;
    }

    view-item-requests td {
      padding: 10px !important;
    }

    
    You may not need any of this or only some of it. It is what I needed to do on the Gantry 5 template.

Styling the Wise Searchbar in Bootstrap 5 (BS5)

Optional: You can do this a different way if you'd like.

You may find that your Wise Searchbar looks great on the /wise-apps and /catalog pages but not on the rest of the pages. That is because of the Wise Bootstrap 3 CSS/styling not loading on any other pages except /wise-apps and /catalog.

One of our developers created a Module Suffix for me to use with the Wise Searchbar module. This suffix creates the same styling on the BS5 pages as the BS3 pages. I'm not positive if it will work for your template. You may have to write a suffix that works for your template. Still, here is what I added to one of my template custom CSS files (in the Template CSS files, not in the Styles tab of jqeprofiles) for the suffix:

Once the above is in your custom CSS file for your template:

1. Go to Site Modules.
2. Search for the Wise Searchbar you created previously.
3. Click the Menu Assignment tab.
4. Select Only on the pages selected from the drop-down and select only on the Wise Apps and Catalog Wrapper pages.
5. Click Save & Close
6. Duplicate the module.
7. Open the copy of the module.
8. Set it to Published.
9. Change the title so you know what the module is (or use the Notes field).
10. Add the module suffix bs5-wisesearchbar to the Suffix field.
11. Click the Menu Assignments tab and change the Module Assignment drop-down to All pages EXCEPT those selected. Leave the /wise-apps and /catalog pages selected.
    
12. Click Save & Close.
13. Refresh the frontend and check your searchbar styling on both the normal Joomla pages and the Wise pages.

You now have two Wise Searchbar modules. One with BS3. The other with BS5.