To apply the new styles to your search container and button in Joomla 5 with JBusinessDirectory,you need to override the default CSS. Here’s how you can do it: ### **Steps to Apply the New Styles:** #### **1. Locate Your Custom CSS File**
- If using Helix Ultimate,go to **Extensions** → **Templates** → **Styles**.
- Select your active **Helix-based template** and navigate to **Custom Code** → **Custom CSS**.
- Alternatively,you can add the styles directly in `custom.css` (usually found in `templates/your-template/css/custom.css`). #### **2. Apply the Custom CSS**
Add the following CSS to your `custom.css` file: ```css .jbd-container.business-directory.horizontal.search-style-2{background-color:#oooooo !important;border:2px solid #a3d9ff !important;border-radius:12px !important;padding:10px !important;display:flex !important;align-items:center !important;justify-content:space-between !important;margin:20px auto !important;width:80% !important;max-width:800px !important;box-shadow:0px 4px 6px rgba(0,0,0,0.1) !important}.jbd-search-bar input[type="text"]{flex-grow:1 !important;padding:8px !important;border-radius:5px !important;border:1px solid #ccc !important;margin-right:10px !important;font-size:16px !important}.search-dir-button{background-color:#007BFF !important;color:white !important;border:none !important;padding:8px 15px !important;border-radius:5px !important;cursor:pointer !important;font-size:16px !important}.microphone-button{background-color:#007BFF !important;color:white !important;border:none !important;padding:1px 3px !important;border-radius:5px !important;cursor:pointer !important;font-size:16px !important}.search-results{margin:20px auto !important;padding:15px !important;width:80% !important;max-width:800px !important;background:#fff !important;border:1px solid #ddd !important;border-radius:12px !important}.result-item{padding:10px !important;background:white !important;border-radius:5px !important;margin-bottom:10px !important;display:flex !important;align-items:center !important}.result-item img{width:80px !important;height:80px !important;margin-right:10px !important;border-radius:5px !important;object-fit:cover !important}``` #### **3. Save & Clear Cache**
- Save your changes.
- Clear Joomla and browser cache to see the updated styles. Let me know if you need further adjustments! 🚀