# Customize styles

# Customize your Bundleb2b feature style using Bundleb2b style config JS API

  • We have all our BundleB2B related pages with notations below, all the keys below are available for customization, please find the key you want to modify in the pictures and overwrite or extend on demand.

# usage

window.b3themeConfig.useStyles = {}

# global

  • create shoppingList model
  'global.shoppingListModal.header': {},
  'global.shoppingListModal.header.title': {},
  'global.shoppingListModal.header.close': {},
  'global.shoppingListModal.body': {},
  'global.shoppingListModal.actions.container': {},
  'global.shoppingListModal.button.cancel': {},
  'global.shoppingListModal.button.save': {},
  'global.shoppingListModal.form.container': {},
  'global.shoppingListModal.form.item': {},
  'global.shoppingListModal.form.item.label': {},
  'global.shoppingListModal.form.item.input': {},
  'global.shoppingListModal.form.item.textarea': {},
  'global.shoppingListModal.form.item.required': {},

# trade professional application

  'tpa.mobile.entryButton': {},
  'tpa.entryButton': {},

# address book

  'addressBook.panel.container': {},
  'addressBook.panel.title': {},
  'addressBook.panel.info.container': {},
  'addressBook.panel.info': {},
  'addressBook.panel.phone.label': {},
  'addressBook.panel.phone': {},
  'addressBook.actions.container': {},
  'addressBook.search.input': {},
  'addressBook.search.icon': {},
  'addressBook.filter.button': {},
  'addressBook.filter.button.icon': {},
  'addressBook.actions.addNew.button': {},
  'addressBook.filter.container': {},
  'addressBook.filter.item.container': {},
  'addressBook.filter.item.input': {},
  'addressBook.filter.item.label': {},
  'addressBook.filter.item.select': {},
  'addressBook.filter.item.checkbox.container': {},
  'addressBook.filter.item.checkbox': {},
  'addressBook.filter.item.checkbox.label': {},
  'addressBook.filter.cancel.button': {},
  'addressBook.filter.apply.button': {},
  'addressBook.table.container': {},
  'addressBook.table.thead.th': {},
  'addressBook.td.shipping.icon': {},
  'addressBook.td.billing.icon': {},
  'addressBook.td.action.icon': {},
  'addressBook.td.action.container': {},
  'addressBook.td.action.item': {},
  'addressBook.modal.header': {},
  'addressBook.modal.header.title': {},
  'addressBook.modal.header.close': {},
  'addressBook.modal.body': {},
  'addressBook.modal.form.checkbox': {},
  'addressBook.modal.form.checkbox.checked': {},
  'addressBook.modal.form.checkbox.label': {},
  'addressBook.modal.form.item.container': {},
  'addressBook.modal.form.item.input': {},
  'addressBook.modal.form.item.label': {},
  'addressBook.modal.form.item.select': {},
  'addressBook.modal.form.item.required': {},
  'addressBook.modal.form.button.container': {},
  'addressBook.modal.form.button.save': {},
  'addressBook.modal.form.button.cancel': {},

# buy again

  'buyAgain.actions.container': {},
  'buyAgain.search.container': {},
  'buyAgain.search.input': {},
  'buyAgain.dateFilter.container': {},
  'buyAgain.dateFilter.from.input': {},
  'buyAgain.dateFilter.from.icon': {},
  'buyAgain.dateFilter.to.input': {},
  'buyAgain.dateFilter.to.icon': {},
  'buyAgain.table': {},
  'buyAgain.thead.th': {},
  'buyAgain.tbody.td': {},
  'buyAgain.td.qty.container': {},
  'buyAgain.td.qty.decrease': {},
  'buyAgain.td.qty.increase': {},
  'buyAgain.td.qty.input': {},
  'buyAgain.td.actions.container': {},
  'buyAgain.td.actions.button.addToCart': {},
  'buyAgain.td.actions.button.addToShoppingList': {},
  'buyAgain.unit.container': {},
  'buyAgain.unit.num': {},
  'buyAgain.shoppingListModal.header': {},
  'buyAgain.shoppingListModal.header.title': {},
  'buyAgain.shoppingListModal.header.close': {},
  'buyAgain.shoppingListModal.body': {},
  'buyAgain.shoppingListModal.list.container': {},
  'buyAgain.shoppingListModal.list.item': {},
  'buyAgain.shoppingListModal.list.item.active': {},
  'buyAgain.shoppingListModal.list.item.hover': {},
  'buyAgain.shoppingListModal.pagination.container': {},
  'buyAgain.shoppingListModal.actions.container': {},
  'buyAgain.shoppingListModal.button.addToNew': {},
  'buyAgain.shoppingListModal.button.add': {},
  'buyAgain.shoppingListModal.button.cancel': {},

# quote list

  'quotes.container': {},
  'quotes.head.container': {},
  'quotes.head.title': {},
  'quotes.head.button.createQuote': {},
  'quotes.table': {},
  'quotes.thead.th': {},
  'quotes.tbody.td': {},
  'quotes.td.action.icon': {},
  'quotes.td.action.panel.container': {},
  'quotes.td.action.panel.item': {},
  'quotes.unit.container': {},
  'quotes.unit.num': {},

# create & edit quote

  'createQuote.head.container': {},
  'createQuote.head.title': {},
  'createQuote.head.actions.container': {},
  'createQuote.head.button.cancel': {},
  'createQuote.head.button.draft': {},
  'createQuote.head.button.update': {},
  'createQuote.head.button.preview': {},
  'createQuote.body.container': {},
  'createQuote.body.title': {},
  'createQuote.body.form.item.container': {},
  'createQuote.body.form.item.label': {},
  'createQuote.body.form.item.input': {},
  'createQuote.body.form.item.select': {},
  'createQuote.body.search.container': {},
  'createQuote.body.search.title': {},
  'createQuote.body.search.label': {},
  'createQuote.body.search.input': {},
  'createQuote.body.search.button': {},
  'createQuote.body.search.button.icon': {},
  'createQuote.body.search.add.button': {},
  'createQuote.table': {},
  'createQuote.thead.th': {},
  'createQuote.tbody.td': {},
  'createQuote.td.product': {},
  'createQuote.td.product.img': {},
  'createQuote.td.price': {},
  'createQuote.td.discount.container': {},
  'createQuote.td.discount.label': {},
  'createQuote.td.discount.input': {},
  'createQuote.td.newPrice.container': {},
  'createQuote.td.newPrice.label': {},
  'createQuote.td.newPrice.input': {},
  'createQuote.td.quantity.container': {},
  'createQuote.td.quantity.label': {},
  'createQuote.td.quantity.input': {},
  'createQuote.td.lineTotal.container': {},
  'createQuote.td.lineTotal.delete.icon': {},
  'createQuote.checkInfo.container': {},
  'createQuote.checkInfo.list.container': {},
  'createQuote.checkInfo.list.item': {},
  'createQuote.checkInfo.list.item.label': {},
  'createQuote.checkInfo.list.item.value': {},
  'createQuote.infomation.container': {},
  'createQuote.infomation.title': {},
  'createQuote.infomation.subtitle': {},
  'createQuote.infomation.textarea': {},
  'createQuote.foot.actions.container': {},
  'createQuote.foot.button.cancel': {},
  'createQuote.foot.button.draft': {},
  'createQuote.foot.button.update': {},
  'createQuote.foot.button.preview': {},
  'createQuote.companyModal.header': {},
  'createQuote.companyModal.header.input': {},
  'createQuote.companyModal.header.close': {},
  'createQuote.companyModal.body': {},
  'createQuote.companyModal.list.container': {},
  'createQuote.companyModal.list.item': {},
  'createQuote.companyModal.list.item.active': {},
  'createQuote.companyModal.list.item.hover': {},
  'createQuote.companyModal.pagination.container': {},
  'createQuote.companyModal.actions.container': {},
  'createQuote.companyModal.button.cancel': {},
  'createQuote.companyModal.button.save': {},
  'createQuote.addressModal.header': {},
  'createQuote.addressModal.header.input': {},
  'createQuote.addressModal.header.button': {},
  'createQuote.addressModal.header.button.icon': {},
  'createQuote.addressModal.header.close': {},
  'createQuote.addressModal.body': {},
  'createQuote.addressModal.list.item': {},
  'createQuote.addressModal.pagination.container': {},

# quote detail

  'quote.container': {},
  'quote.head.container': {},
  'quote.head.left.container': {},
  'quote.head.left.icon': {},
  'quote.head.right.container': {},
  'quote.button.print': {},
  'quote.button.print.icon': {},
  'quote.button.pdf': {},
  'quote.button.pdf.icon': {},
  'quote.button.email': {},
  'quote.button.email.icon': {},
  'quote.button.cancel': {},
  'quote.button.update': {},
  'quote.button.saveDraft': {},
  'quote.button.publish': {},
  'quote.draft.tag.container': {},
  'quote.draft.tag': {},
  'quote.info.container': {},
  'quote.info.items.container': {},
  'quote.info.item.container': {},
  'quote.info.item.title': {},
  'quote.info.item.text': {},
  'quote.table': {},
  'quote.thead.th': {},
  'quote.tbody.tr': {},
  'quote.tbody.td': {},
  'quote.tbody.td.img': {},
  'quote.checkInfo.wraper': {},
  'quote.checkInfo.container': {},
  'quote.checkInfo.item.container': {},
  'quote.checkInfo.item.label': {},
  'quote.checkInfo.item.value': {},
  'quote.additional.container': {},
  'quote.additional.title': {},
  'quote.additional.text': {},
  'quote.foot.container': {},
  'quote.emailModal.header': {},
  'quote.emailModal.header.title': {},
  'quote.emailModal.header.close': {},
  'quote.emailModal.form.container': {},
  'quote.emailModal.form.email.input': {},
  'quote.emailModal.form.email.label': {},
  'quote.emailModal.form.email.icon': {},
  'quote.emailModal.form.button.container': {},
  'quote.emailModal.form.button.cancel': {},
  'quote.emailModal.form.button.send': {},

# dashboard

  'dashboard.head.container': {},
  'dashboard.head.info.container': {},
  'dashboard.head.info.left': {},
  'dashboard.head.info.right': {},
  'dashboard.panel.container': {},
  'dashboard.userInfo.container': {},
  'dashboard.userInfo.name.container': {},
  'dashboard.userInfo.name.label': {},
  'dashboard.userInfo.name.value': {},
  'dashboard.userInfo.email.container': {},
  'dashboard.userInfo.email.label': {},
  'dashboard.userInfo.email.value': {},
  'dashboard.companyInfo.container': {},
  'dashboard.companyInfo.title': {},
  'dashboard.companyInfo.num': {},
  'dashboard.actions.container': {},
  'dashboard.search.container': {},
  'dashboard.search.input': {},
  'dashboard.pagination.container': {},
  'dashboard.table': {},
  'dashboard.thead.th': {},
  'dashboard.tbody.tr': {},
  'dashboard.td': {},
  'dashboard.td.button.begin': {},
  'dashboard.td.button.selected': {},
  'dashboard.td.button.end.container': {},
  'dashboard.td.button.end': {},

# order detail

  'order.container': {},
  'order.content.container': {},
  'order.aside.container': {},
  'order.content.title': {},
  'order.content.list.container': {},
  'order.content.list.item.container': {},
  'order.content.list.item.product.container': {},
  'order.content.list.item.product.price': {},
  'order.content.list.item.product.title': {},
  'order.content.list.item.checkbox': {},
  'order.content.list.item.checkbox.checked': {},
  'order.checkInfo.container': {},
  'order.checkInfo.dd': {},
  'order.checkInfo.dt': {},
  'order.checkInfo.totalPrice': {},
  'order.aside.item.container': {},
  'order.aside.item.title': {},
  'order.aside.item.orderInfo.container': {},
  'order.aside.item.orderInfo.item.label': {},
  'order.aside.item.orderInfo.item.value': {},
  'order.aside.address.list.container': {},
  'order.aside.address.list.item': {},
  'order.aside.actions.container': {},
  'order.aside.button.print': {},
  'order.aside.button.reorder': {},
  'order.aside.button.addToNewShoppingList': {},

# order list

  'orders.statusActions.container': {},
  'orders.button.showMy': {},
  'orders.button.showAll': {},
  'orders.search.container': {},
  'orders.search.input': {},
  'orders.search.button': {},
  'orders.search.button.icon': {},
  'orders.search.filters.button': {},
  'orders.search.filters.button.icon': {},
  'orders.dateFilter.container': {},
  'orders.dateFilter.from.input': {},
  'orders.dateFilter.to.input': {},
  'orders.dateFilter.from.icon': {},
  'orders.dateFilter.to.icon': {},
  'orders.search.filters.container': {},
  'orders.search.filters.items.container': {},
  'orders.search.filters.item.container': {},
  'orders.search.filters.item.input': {},
  'orders.search.filters.item.label': {},
  'orders.search.filters.actions.container': {},
  'orders.search.filters.button.clear': {},
  'orders.search.filters.button.apply': {},
  'orders.table': {},
  'orders.thead.th': {},
  'orders.tbody.td': {},
  'orders.td.status': {},
  'orders.td.action.container': {},
  'orders.td.action.button.reorder': {},
  'orders.td.action.button.addToShoppingList': {},

# quick order pad

  'qop.mobile.entryButton': {},
  'qop.entryButton': {},
  'qop.container': {},
  'qop.left.panel.container': {},
  'qop.left.panel': {},
  'qop.left.panel.title': {},
  'qop.left.panel.subtitle': {},
  'qop.left.panel.upload.container': {},
  'qop.left.panel.upload.label': {},
  'qop.left.panel.button.addToCart': {},
  'qop.right.panel.container': {},
  'qop.right.panel': {},
  'qop.right.panel.title': {},
  'qop.right.panel.subtitle': {},
  'qop.right.panel.remove': {},
  'qop.right.panel.sku.input': {},
  'qop.right.panel.qty.input': {},
  'qop.right.panel.button.container': {},
  'qop.right.panel.button.addRow': {},
  'qop.right.panel.button.addToCart': {},

# shopping lists

  'shoppinglists.head.container': {},
  'shoppinglists.head.title': {},
  'shoppinglists.head.button.container': {},
  'shoppinglists.head.button.create': {},
  'shoppinglists.actions.container': {},
  'shoppinglists.actions.button': {},
  'shoppinglists.table': {},
  'shoppinglists.thead.th': {},
  'shoppinglists.tbody.tr': {},
  'shoppinglists.tbody.td': {},
  'shoppinglists.td.action': {},
  'shoppinglists.td.button.view': {},
  'shoppinglists.td.button.delete': {},
  'shoppinglists.unit.container': {},
  'shoppinglists.unit.num': {},

# shopping list

  'shoppinglist.head.container': {},
  'shoppinglist.head.title': {},
  'shoppinglist.button.editInfo': {},
  'shoppinglist.info.container': {},
  'shoppinglist.info.label': {},
  'shoppinglist.info.select': {},
  'shoppinglist.button.update': {},
  'shoppinglist.products.container': {},
  'shoppinglist.left.wraper': {},
  'shoppinglist.left.container': {},
  'shoppinglist.left.title': {},
  'shoppinglist.left.form.container': {},
  'shoppinglist.left.form.item.container': {},
  'shoppinglist.left.form.item.label': {},
  'shoppinglist.left.form.item.input': {},
  'shoppinglist.left.button.singleSku': {},
  'shoppinglist.left.button.singleSku.icon': {},
  'shoppinglist.left.button.multipleSku': {},
  'shoppinglist.left.button.multipleSku.icon': {},
  'shoppinglist.left.button.more': {},
  'shoppinglist.left.button.choose': {},
  'shoppinglist.left.button.addToList': {},
  'shoppinglist.right.wraper': {},
  'shoppinglist.right.unit.container': {},
  'shoppinglist.right.unit.num': {},
  'shoppinglist.right.table': {},
  'shoppinglist.right.thead.th': {},
  'shoppinglist.right.checkbox': {},
  'shoppinglist.right.tbody.tr': {},
  'shoppinglist.right.tbody.td': {},
  'shoppinglist.right.td.img': {},
  'shoppinglist.right.td.qty.input': {},
  'shoppinglist.right.button.deleteSelected': {},
  'shoppinglist.right.button.updateQty': {},
  'shoppinglist.right.button.editOption': {},
  'shoppinglist.right.button.editOption.icon': {},
  'shoppinglist.right.button.delete': {},
  'shoppinglist.right.button.delete.icon': {},
  'shoppinglist.bottom.cart.wraper': {},
  'shoppinglist.bottom.cart.container': {},
  'shoppinglist.bottom.cart.content.container': {},
  'shoppinglist.bottom.cart.button.toggle': {},
  'shoppinglist.bottom.cart.button.addToCart': {},
  'shoppinglist.bottom.cart.button.goToCheckout': {},
  'shoppinglist.editModal.header.container': {},
  'shoppinglist.editModal.header.title': {},
  'shoppinglist.editModal.header.close': {},
  'shoppinglist.editModal.body': {},
  'shoppinglist.editModal.form.container': {},
  'shoppinglist.editModal.form.item.container': {},
  'shoppinglist.editModal.form.item.label': {},
  'shoppinglist.editModal.form.item.input': {},
  'shoppinglist.editModal.form.item.textarea': {},
  'shoppinglist.editModal.form.item.required': {},
  'shoppinglist.editModal.button.container': {},
  'shoppinglist.editModal.button.save': {},
  'shoppinglist.editModal.button.cancel': {},

# user management

  'userManagement.title.container': {},
  'userManagement.title.text': {},
  'userManagement.table': {},
  'userManagement.thead.th': {},
  'userManagement.tbody.tr': {},
  'userManagement.tbody.td': {},
  'userManagement.td.actions.container': {},
  'userManagement.td.button.edit': {},
  'userManagement.td.button.delete': {},
  'userManagement.unit.container': {},
  'userManagement.unit.num': {},
  'userManagement.button.container': {},
  'userManagement.button.addNew': {},
  'userManagement.modal.header.container': {},
  'userManagement.modal.header.title': {},
  'userManagement.modal.header.close': {},
  'userManagement.modal.body': {},
  'userManagement.modal.form.container': {},
  'userManagement.modal.form.item.container': {},
  'userManagement.modal.form.item.input': {},
  'userManagement.modal.form.item.select': {},
  'userManagement.modal.form.item.label': {},
  'userManagement.modal.form.item.required': {},
  'userManagement.modal.form.button.container': {},
  'userManagement.modal.form.button.save': {},
  'userManagement.modal.form.button.cancel': {},