# Customize other popular themes

If you are using one of the following bundelb2b approved theme, please follow this instruction to customize the theme after you finished the quick start steps.

# Camden

  • assets/scss/b3/theme.scss

    add the following code at the end of the file:

    .body {
      display: none;
    }
    
    //action buttons
    .productView {
      .productView-options {
        .form {
          .button {
            margin-bottom: 1rem;
          }
        }
        //pdp page add to quote button
        .rfq-button-container.rfq-cart-button-container {
          .button {
            margin-top: 1rem;
          }
        }
        // add to shopping list button
        .form-action {
          margin-top: 0;
          a[data-dropdown="quick-shoppinglist-dropdown"] {
            margin-bottom: 0;
          }
          a[data-dropdown="shoppinglist-dropdown"] {
            margin-bottom: 0;
          }
        }
      }
    }
    
    // saleRep search input  
    .saleRep {
      .b2b-wrap {
        .search {
          input {
            padding-right: 1rem !important;
          }
        }
      }
    }
    
    // saleRep head container
    .salerep-infobox {
      .container {
        @include breakpoint("large") {
          padding: 0 6rem !important;
        }
      }
    }
    
    // account dropdown 
    #accountOptions {
      z-index: 31;
    }
    
    // cart page add to cart & quote
    .cart__totals {
      .cart-actions {
        display: block;
        width: 100%;
        .rfq-cart-button-container {
          button {
            margin-top: 0;
          }
        }
      }
    }
    
  • assets/js/theme/global.js

    export default class Global extends PageManager {
        onReady() {
         // other code
          
         // add the following code
            window.b3themeConfig.useJavaScript = {
                login: {
                    callback(instance) {
                        $('.body').show();
                        $('main.page').css({
                            width: '100%',
                        });
                        const roleId = sessionStorage.getItem('B3RoleId');
    
                        const hideWishList = () => {
                            $('.navUser-action[href="/wishlist.php"]').parents('.navUser-item').remove();
                            $('[href^="/wishlist.php"]').remove();
                            $('.add-to-list__controls').remove();
                            $('head').append(`<style>
                                [href^="/wishlist.php"] {
                                    display: none!important;
                                }
                            </style>`);
                        };
    
                        const renderMobileNavs = () => {
                            if (!instance.isMobile) return;
                            $('#navPages-account .navPage-subMenu-list .b3-navs').remove();
    
                            instance.renderB3Navs({
                                containerSelector: '#navPages-account .navPage-subMenu-list',
                                navItemClassName: 'navPage-subMenu-item b3-navs',
                            });
    
                            hideWishList();
                        };
    
                        const renderDropDownMenu = () => {
                            $('.b3-dropdown-menu').remove();
                            instance.renderB3Navs({
                                containerSelector: '#accountOptions',
                                navItemClassName: 'dropdown-menu-item b3-dropdown-menu',
                                insertType: 'afterbegin',
                            });
                            
                            // is show invoice in dropdown menu
                            if (instance.canShowB2BNav && instance.haveIPPermission) {
                                const invoiceEl = `<li class="dropdown-menu-item b3-dropdown-menu ">
                                                    <a class="" href="/invoices/">Invoices</a>
                                              </li>`;
                                $('#accountOptions li:first-child').before(invoiceEl);
                                $('.dropdown-menu .navBar-action').removeClass('navBar-action');
                            }
    
                            const isSaleRep = roleId === '3';
                            const companyId = sessionStorage.getItem('B3CompanyId');
                            const addressBookEnabled = sessionStorage.getItem('B3AddressBookIsEnabled');
    
                            // b2b address book
                            if (addressBookEnabled === '1') {
                                $('#accountOptions .dropdown-menu-item [href="/account.php?action=address_book"]').remove();
                            }
    
                            hideWishList();
    
                            // restyle the end masquerade box
                            const timer = isSaleRep && companyId && setInterval(() => {
                                const $innerBox = $('.header__inner .salerep-infobox');
                                if ($innerBox.length) {
                                    clearInterval(timer);
                                    $('.header__inner').after($innerBox);
                                    if (instance.isMobile) {
                                        $('.header__inner').css({
                                            paddingBottom: 40,
                                        });
                                        $('head').append(`<style>
                                            .salerep-infobox {
                                                top: 150px !important;
                                            }
                                            .salerep-infobox.saler-extends:before {
                                                border-top: 10px solid #ebebeb!important;
                                                border-bottom: 10px solid #ebebeb!important;
                                            }
                                        </style>`);
                                    }
                                    $innerBox.show();
                                }
                            });
                        };
    
                        const bindMasqueradAction = () => {
                            ((selectors) => {
                                selectors.forEach(selector => {
                                    $('body').on('click', selector, async () => {
                                        await instance.getIsShowAddressBook();
                                        renderDropDownMenu();
                                        const prevCompanyId = sessionStorage.getItem('B3CompanyId');
                                        const timer = setInterval(() => {
                                            const currCompanyId = sessionStorage.getItem('B3CompanyId');
                                            if (prevCompanyId !== currCompanyId) {
                                                clearInterval(timer);
                                                renderDropDownMenu();
                                                renderMobileNavs();
                                            }
                                        });
                                    });
                                });
                            })(['[action-begin-masquerade]', '[end-masquerade]']);
                        };
    
                        const hideJuniorSaw = () => {
                            const isJunior = roleId === '2';
                            if (isJunior) {
                                // cart add to cart
                                $('.card-section--buttons.card-section--quantity, .card-section--buttons ').remove();
                                // header quick add sku to cart
                                $('.sku-add.sku-add--sku').remove();
                                // side cart
                                $('#side-cart-container').remove();
                                $('.side-cart-enabled').removeClass('side-cart-enabled');
                            }
                        };
    
                        if (roleId) {
                            renderDropDownMenu();
                            bindMasqueradAction();
                            hideJuniorSaw();
                            renderMobileNavs();
                        }
                    },
                },
            };
        }
    }
    
  • templates/components/products/product-view.html

    add the folloing code at the end of the file:

    <a aria-controls="quick-shoppinglist-dropdown" aria-expanded="false" class="button dropdown-menu-button c00436" data-dropdown="quick-shoppinglist-dropdown" style="display: none;">
        <span>Add to Shopping List</span>
        <i aria-hidden="true" class="icon c00437">
            <svg>
                <use xlink:href="#icon-chevron-down"></use>
            </svg>
        </i>
    </a>
    

# Cornerstone

  • assets/js/theme/global.js

    export default class Global extends PageManager {
        onReady() {
            // other code
          
            // add the following code
            window.b3themeConfig.useContainers = {
                'tpa.container': '.page .page-content',
            }
        }
    }
    
  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
      display: none;
    }
    .modal-close:focus::after, .modal-close:focus::before {
      display: none;
    }
    #add-to-cart-wrapper {
        .form-action {
            margin-top: 0;
        }
        .rfq-button-container.rfq-pdp-button-container {
            display: flex !important;
        }
    }
    .tingle-modal-box {
      background-color: stencilColor('container-border-global-color-base') !important;
    }
    .b2b-wrap table tr:hover {
      background-color: stencilColor('optimizedCheckout-orderSummary-borderColor') !important;
    } 
    #invoice-detail-pending .invoice-detail-pending {
      background-color: stencilColor('container-border-global-color-base') !important;
    }
    .dropdown-menu.show-action {
      background-color: stencilColor('optimizedCheckout-orderSummary-borderColor');
      width: unset!important;
    }
    .cart-info {
      color: stencilColor('color-textLink--active');
    }
    .file-upload-drop {
      color: stencilColor('color-textLink--active');
    }
    .card-figcaption-body > button{
      width: 100%;
    }
    .card-figcaption-body input {
      vertical-align:middle;
    }
    button#add_to_cart {
      border-color: stencilColor('button--primary-backgroundColor');
      background-color: stencilColor('button--primary-backgroundColor');
    }
    #navPages-account {
        .navPage-subMenu-list {
            .navPage-subMenu-action.navPages-action {
                padding-left: 0;
            }
        }
    }
    #shopping_list_table .product-options {
        color: inherit !important;
    }
    

# 22 Savile Row

  • templates/layout/base.html

    add the following code inside the head tag:

    {{inject "customer" customer}}
    {{inject "store_hash" settings.store_hash}}
    {{inject "settings" settings}}
    {{inject "page_type" page_type}}
    {{inject "template" template}}
    
  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
      display: none;
    }
    [data-shoppinglist-add] {
      position: relative;
    }
    .shopping-list-status {
      #shopping-list-status {
        width: 180px;
      }
    }
    
    #modal-user-management-edit-form,
    #modal-user-management-new-form {
      margin: 0!important;
    }
    .tingle-modal-box,
    .swal2-popup {
      background: stencilColor("body-bg")!important;
    }
    .c001 table>tbody>tr .dropdown-menu {
      background: stencilColor("navPages-subMenu-backgroundColor")!important;
    }
    

# Supermarket

  • assets/js/theme/global.js

    export default class Global extends PageManager {
        onReady() {
         // other code
          
         // add the following code
          const inPages = () => {
            const urlArray = [
              '/buy-again/',
              '/address-book/',
              '/quote/',
              '/quotes-list/',
              '/dashboard/',
              '/order-detail/',
              '/quick-order-pad/',
              '/shopping-list/',
              '/shopping-lists/',
              '/user-management/',
              '/account.php',
              '/invoices/',
              '/invoice-payment/',
              '/invoice-details/',
              '/invoice-payment-receipt/',
            ];
            const current = window.location.pathname;
            return urlArray.includes(current);
          };
          if (inPages()) {
            const style = document.createElement('style');
            style.innerHTML = `
                .navBar.navBar--sub.navBar--account {
                    display: block !important;
                }
            `;
            document.querySelector('head').append(style);
            const sideBar = document.querySelector('.page .page-sidebar');
            sideBar.remove();
          }
          window.b3themeConfig.useContainers = {
              'dashboard.endMasquerade.container': '.emthemesModez-header-userSection.emthemesModez-header-userSection--logo-left',
          };
    				
        }
    }
    
  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
      display: none;
    }
    #shopping_list_table,.b2b-column-left{
      .input-text {
        padding: 0;
      }
      .product-qty-col{
        input{
          padding: 0;
          text-align: center;
        }
      }
    }
      
    .productView-options [data-shoppinglist-add]{
      width: 100%!important;
      margin-top: 0;
    }
    .rfq-form-wrapper .form-container .products-container .product-list-item-container .form-input {
      min-width: 100px !important;
    }
    

# Vault

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
      display: none;
    }
    .button:hover,
    .button:focus,
    .button.is-active,
    .button.active {
        color: inherit!important;
    }
    .button {
      color: inherit;
      border-color: #2f2f2b;
    }
    .button:hover {
      color: inherit;
      border-color: #2f2f2b;
    }
    .button--primary {
      color: white;
      border-color: #e74c3c;
    }
    .button--primary:hover {
      color: white;
      border-color: #ff762b;
    }
    .pagination {
      width: auto!important;
    }
    .pagination-item.pagination-item--next > a.pagination-link {
      padding: 6px 6px 4px 19px !important;
    }
    
    .swal2-container {
      z-index: 100009!important;
    }
    
    .shopping-list-status .form-select {
      width: 180px;
    }
    
    #shopping_list_table .col-action {
      padding-bottom: 0!important;
    }
    td.col-action .action-wrap .action-lists {
      position: relative!important;
    }
    
    #pc-quickorderpad-entry {
      display: none;
    }
    
    #pc-quickorderpad-entry:first-child {
      display: flex;
      width: 340px;
    }
    .b2b-loading-overlay {
      z-index: 99999!important;
    }
    
    header div#menu {
      z-index: 999!important;
    }
    .salerep-infobox {
      z-index: 1000!important;
    }
    .tingle-modal {
      z-index: 100000!important;
    }
    .account-orderStatus-label {
        color: stencilColor('color-textBase')!important;
    }
    .previewCartAction-checkout, 
    .previewCartAction-viewCart {
        padding-left: unset!important;
    }
    #shopping_list_table .col-action .action-lists {
      width: 176px!important;
      bottom: -18px!important;
    }
    .rfq-form-wrapper .form-container {
      z-index: 9999!important;
    }
    
    #account-dropdown-signout-list .navBar--sub {
      margin-bottom: 0;
    }
    .modal-background {
      z-index: 100004;
    }
    #modal-user-management-edit-form,
    #modal-user-management-new-form,
    #previewModal {
      z-index: 100005 !important;
    }
    
    #modal {
      z-index: 100005!important;
    }
    .quotes .quotes-search-form {
      line-height: normal !important;
    }
    
    #quote-list-container {
      .dropdown-menu.show-action {
          width: unset !important;
      }
    }
    
  • assets/js/theme/global.js

    export default class Global extends PageManager {
        onReady() {
         // other code
          
         // add the following code
         window.b3themeConfig.useText = {
            'global.required.label': '*',
          }
    
          window.b3themeConfig.useContainers = {
            'tpa.button.container--s': '.navPages .sticky-navpages',
            'quickOrderPad.button.container--s': '.navPages .sticky-navpages',
            'dashboard.endMasquerade.container': '.logo-user-section.container',
            'orders.container': 'main.account',
          }
    
          window.b3themeConfig.useJavaScript = {
            login: {
              callback(instance) {
                const roleId = sessionStorage.getItem('B3RoleId')
    
                const hideWishList = () => {
                    $('[href^="/wishlist.php"]').remove()
                    $('[action^="/wishlist.php"]').remove()
                    $('head').append(`<style>
                      [href^="/wishlist.php"], [action^="/wishlist.php"] {
                        display: none!important;
                      }
                    </style>`)
                }
                
                const renderMobileNavs = () => {
                  if (!instance.isMobile) return;
                  $('.navPages .sticky-navpages .b3-mobile-nav').remove();
    
                  const $navs = $('.navBar--account .navBar-section').eq(0).children('.navBar-item')
                  $navs
                      .removeClass('navBar-item')
                      .addClass('navPages-item')
                      .addClass('b3-mobile-nav')
                      .children('a')
                      .removeClass('navBar-action')
                      .addClass('navPages-action');
                  
                  $('.navPages .sticky-navpages').append($navs)
    
                  instance.renderB3Navs({
                    containerSelector: '.navPages .sticky-navpages',
                    navItemClassName: 'navPages-item b3-mobile-nav',
                    insertType: 'beforeEnd'
                  })
    
                  hideWishList()
                }
    
                const hideJuniorSaw = () => {
                  const isJunior = roleId === '2'
                  if (isJunior) {
                      // pdp
                      $('#form-action-addToCart').parent().remove();
                  }
                }
    
                const renderDropDownMenu = () => {
                  $('#account-dropdown-signout-list .b3-dropdown-menu').remove();
                  instance.renderB3Navs({
                    containerSelector: '#account-dropdown-signout-list .navBar-section',
                    navItemClassName: 'navBar-item signout-list b3-dropdown-menu',
                    insertType: 'afterbegin'
                  })
    
                  // is show invoice in dropdown menu
                  if (instance.canShowB2BNav && instance.haveIPPermission) {
                    const invoiceEl = `<li class="navBar-item signout-list b3-dropdown-menu">
                                        <a class="navBar-action" href="/invoices/">Invoices</a>
                                  </li>`;
                    $('#account-dropdown-signout-list li:first-child').before(invoiceEl);
                  }
                  hideWishList()
                }
    
                const bindMasqueradAction = () => {
                  ((selectors) => {
                    selectors.forEach(selector => {
                      $('body').on('click', selector, async () => {
                        await instance.getIsShowAddressBook()
                        renderDropDownMenu()
                        renderMobileNavs()
                        const prevCompanyId = sessionStorage.getItem('B3CompanyId')
                        const timer = setInterval(() => {
                          const currCompanyId = sessionStorage.getItem('B3CompanyId')
                          if (prevCompanyId !== currCompanyId) {
                            clearInterval(timer)
                            renderDropDownMenu()
                            renderMobileNavs()
                          }
                        })
                      })
                    })
                  })(['[action-begin-masquerade]', '[end-masquerade]']);
                }
    
                if (roleId) {
                    renderDropDownMenu();
                    renderMobileNavs()
                    bindMasqueradAction()
                    hideJuniorSaw();
                }
    
              }
            }
          }
        }
    }
    
  • assets/temlates/layout/home.html and product.html

    add the following code to script tag:

    <script>
      // Exported in app.js
      window.stencilBootstrap("{{page_type}}", {{jsContext}}).load();
    	
    	+ window.jsContext = JSON.parse({{jsContext}})
    </script>
    

    add the following code to head tag:

    {{~inject "customer" customer}}
    {{~inject 'store_hash' settings.store_hash}}
    {{~inject "settings" settings}}
    {{~inject "page_type" page_type}}
    {{~inject "currency_selector" currency_selector}}
    
  • If you are using Vault-1.1.2+, please use the following links to do some extra configuration. templates/layout/base.html add the following code to head tag:

    {{inject 'themeSettings' theme_settings}}
    

# Roots

  • assets/scss/theme.scss

    add the folloing code at the end of the file:

    .body {
      display: none;
    }
    .button:hover, .button:focus, .button.is-active, .button.active, #search_button {
      background-color: stencilColor('button--default-backgroundColorHover');
      border-color: stencilColor('button--default-borderColor');
      color: white;
    }
    .button.button--small.dropdown-menu-item a {
      color: white!important;
    }
    .table-wrap .dropdown-menu .button a {
      padding: 7px 10px !important;
    }
    .button.modal-close.modal-close--button {
      color: white!important;
    }
    #new_shopping_list_form {
      .form-actions {
        a, input {
          height: 38px!important;
        }
      }
    }
    #shoppingList-pagination {
      width: 100%;
    }
    #add-new-shopping-list {
      display: inline-block;
    }
    #save_new_address {
      height: 38px!important;
    }
    #filter_open_button {
      display: inline-block!important;
    }
    .salerep-infobox {
      position: fixed!important;
      top: 0;
    }
    .logo-wrap a {
      line-height: inherit!important;
    }
    .button-status-approval, .button-status-reject {
      display: inline-block!important;
    }
    #filter_cancel_button, #filter_apply_button {
      display: inline-block;
    }
    #shopping-list-pagination {
      float: unset!important;
    }
    .productView-options .form-action {
        margin-top: 0!important;
    }
    .quotes-filter-form {
      .filter-fields {
        .filter-status {
          width: unset;
        }
      }
    }