Affiliate Toolbox not displaying correctly with older themes

The latest version of LFMTE is optimized for themes built on Bootstrap 4 or higher. You can find some example themes in the "LFMTE Theme Pack v3" available on the Free Add-Ons page inside the LFMTE members area.

If you are using an older theme, you can fix the appearance of the Affiliate Toolbox by copying the code below into a HTML Header. To do this, go to the "Affiliate Toolbox" page in your Admin Panel, click "Add An HTML Header" and paste the code below into the textbox. If you already have a header, you can add this code to your existing header HTML.

<style>
/* Provides styling for the LFM Affiliate Toolbox on older sites that do not have Bootstrap 4 or 5 themes */

/* Card container styling */
.card {
  background-color: #fff !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
  margin-bottom: 20px !important;
  overflow: hidden !important;
}

/* Card header styling */
.card-header {
  background-color: #007bff !important; /* Primary blue */
  color: #fff !important;
  padding: 10px 15px !important;
  font-size: 16px !important;
  font-weight: bold !important;
  border-bottom: 1px solid #ddd !important;
}

/* Card body styling */
.card-body {
  padding: 15px !important;
}

/* Form control styling (inputs, textareas, etc.) */
.form-control {
  display: block !important;
  width: 100% !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  line-height: 1.42857143 !important;
  color: #555 !important;
  background-color: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.075) !important;
}

/* Ensure textareas have a minimum height and width */
textarea.form-control {
  min-height: 200px !important;
  min-width: 450px !important;
}

/* Button styling override */
.btn {
  display: block !important;
  padding: 6px 12px !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1.42857143 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  background-color: #007bff !important;
  border: 1px solid #007bff !important;
  border-radius: 4px !important;
  color: #fff !important;
  text-decoration: none !important;
}

/* Force all Bootstrap 3 button variants to the desired blue/white scheme */
.btn,
.btn-default,
.btn-primary,
.btn-info,
.btn-success,
.btn-warning,
.btn-danger,
.btn-link,
.open > .dropdown-toggle.btn,
[class*="btn-"] {
  background-color: #007bff !important;
  border-color: #007bff !important;
  color: #fff !important;
  background-image: none !important; /* Disable any gradient background */
}

/* Hover and focus states */
.btn:hover,
.btn:focus,
.btn-default:hover,
.btn-default:focus,
.btn-primary:hover,
.btn-primary:focus,
.btn-info:hover,
.btn-info:focus,
.btn-success:hover,
.btn-success:focus,
.btn-warning:hover,
.btn-warning:focus,
.btn-danger:hover,
.btn-danger:focus,
.btn-link:hover,
.btn-link:focus,
.open > .dropdown-toggle.btn:hover,
.open > .dropdown-toggle.btn:focus,
[class*="btn-"]:hover,
[class*="btn-"]:focus {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: #fff !important;
  background-image: none !important; 
}

/* Active & "open" states (dropdowns, pressed buttons, etc.) */
.btn:active,
.btn.active,
.btn-default:active,
.btn-default.active,
.btn-primary:active,
.btn-primary.active,
.btn-info:active,
.btn-info.active,
.btn-success:active,
.btn-success.active,
.btn-warning:active,
.btn-warning.active,
.btn-danger:active,
.btn-danger.active,
.btn-link:active,
.btn-link.active,
.open > .dropdown-toggle.btn.active,
[class*="btn-"]:active,
[class*="btn-"].active {
  background-color: #0056b3 !important;
  border-color: #0056b3 !important;
  color: #fff !important;
  background-image: none !important;
}

/* Optional: Ensure the container is not overly wide on older themes */
.container {
  max-width: 960px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 15px !important;
  padding-right: 15px !important;
}

/* Consistent box-sizing across elements */
.card, .card-header, .card-body, .form-control {
  -webkit-box-sizing: border-box !important;
     -moz-box-sizing: border-box !important;
          box-sizing: border-box !important;
}

/* Optional: Styling for form text (helper text) */
.form-text {
  font-size: 80% !important;
  color: #6c757d !important;
  margin-top: 5px !important;
}
</style>

<style>
/* Replicate the basic functionality of Bootstrap 4 tabs on older sites */

/* Fallback CSS for showing/hiding tabs */
.tab-pane {
  display: none !important;
}
.tab-pane.active {
  display: block !important;
}

/* If you use the "fade" class in your tab markup, override that too */
.fade {
  opacity: 0;
  transition: opacity 0.15s linear;
}
.fade.show {
  opacity: 1;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", function() {
  // Find all elements that might be used as nav-link (tabs)
  // This checks for data-toggle="tab", data-bs-toggle="tab", or the .nav-link class
  // Adjust the selector as needed if your markup differs.
  var tabLinks = document.querySelectorAll('[data-toggle="tab"], [data-bs-toggle="tab"], .nav-link');

  tabLinks.forEach(function(link) {
    link.addEventListener("click", function(e) {
      // Prevent default link behavior
      e.preventDefault();

      // If the link points to a pane via href or aria-controls, get that ID
      var targetId = link.getAttribute("href") || link.getAttribute("data-target");
      if (!targetId || !targetId.startsWith("#")) return;

      // 1) Deactivate all tabs in this <ul> (or .nav-tabs)
      //    and hide all tab panes within the same tab container
      var ul = link.closest(".nav-tabs, .nav");
      if (!ul) return;

      // Deactivate siblings
      var siblingLinks = ul.querySelectorAll('[data-toggle="tab"], [data-bs-toggle="tab"], .nav-link');
      siblingLinks.forEach(function(sib) {
        sib.classList.remove("active");
        sib.setAttribute("aria-selected", "false");

        var sibTargetId = sib.getAttribute("href") || sib.getAttribute("data-target");
        if (sibTargetId && sibTargetId.startsWith("#")) {
          var sibPane = document.querySelector(sibTargetId);
          if (sibPane) {
            sibPane.classList.remove("active", "show");
          }
        }
      });

      // 2) Activate the clicked tab
      link.classList.add("active");
      link.setAttribute("aria-selected", "true");

      // 3) Show the corresponding tab pane
      var targetPane = document.querySelector(targetId);
      if (targetPane) {
        targetPane.classList.add("active", "show");
      }
    });
  });
});
</script>