Theme settings - new design (UI)

If the new theme (design) is implemented for your b2b environment there is a new theme editor available. 

Click on “Add” to add a new theme.
Add current theme: click on the pencil.
Change status: click on the name of your theme and change the status by ticking or unticking the box next to 'active'. Then click on 'store'. The changes apply immediately.

Name: give your theme a name. This name is only displayed in the back end.
Active: choose your status.
Type of language switch button: you can choose to have the language change displayed on the B2B flags or letters (e.g. NL, ENG).
Page width: choose from large or narrow.

For every item there are different options available.
Text color: changes the color of the text item
Background color: changes the color of the background item
Text color (hover): changes the colour of the text when you hover over it
Background Color (hover): changes the colour of the background when you hover over it
Border color: changes the outline color of the item
Border color (hover): changes the outline color of the item when you hover over it
Font: changes the font on the website

Note: By changing the color click on ‘choose’ to add the new color. After editing click on ‘store’.

General

General block header icons
Colour of icons in main button (for example speech bubble at “Contact” form),
General url
Colour of general menu texts (for example Categories in catalogue),
General button
Colour of text in button (e.g. "Login" or " To shopping basket".

Top header
Colour of text in the non-clickable text in the header bar.
Top header url
Colour of the text of the clickable link in the header bar.
Top header icons
Colour of icons for text in header bar
Top header language dropdown icon
Colour of drop-down arrow for language settings.
Top header language background
Backgroundcolor of drop-down arrow for language settings.

Main header

Main header
Colour of bar where search function and shopping basket are displayed.
Main header buttons
Colour of icons and text in header buttons (favourites, account).
Text = Colour of header buttons containing icons and text
Top header cart buttons
Colour of basket and number of items in basket.
Main header searchbar
Colour of 'search' text in the search bar.
Main header searchbar button
Colour of magnifying glass icon in search bar.
Mobile hamburger menu
Colour of display mobile menu.

Navigation and breadcrumbs

Navigation
Colour of main menu text in buttons.
Text = Colour of the bar in which the main menu buttons are located.
Breadcrumbs
Colour of breadcrumb text.

Footer

Footer
Colour of text in foot.
Sub footer
Colour of text in sub foot items.
Footer newsletter signup cta button
Colour of the text in the "log in" button.
Footer url
Colour of footer under the headings
Social media icons in the footer
Colour of the social media buttons in the footer on the left side.

Catalog

Catalog favorite icon
Colour of favourite icon associated with a product.
Catalog range slider
Colour of price range slider in catalogue filters.
Catalog pagination
Colour of page numbers in the catalogue.
Catalog display type
Colour of display icon type.
Catalog cta button
Colour of +/- button for simple products in the catalogue.
Catalog product link
Color of the hoover function product name.
Catalog filters text
Color of hoover function for product filters and customfilter.
Background hover= hoover text filters left catalogue.

Shoppingcart

Cart details url
Colour of a 'details' link of an item in the shopping cart.
Cart cta button
Colour of the text of the checkout button in the shopping basket.
Cart details border
Color of the ‘details’ border in the shoppingcart and checkout. The line shows on the left side.

Checkout en Forms

Checkout cta button secondary
Not available yet.
Checkout url
Colour of the text in the menu headings on the checkout page (e.g. 'edit' under 'delivery address'').
Checkout cta button
Color of 'go to payment' button in the checkout.

Forms checkbox
Colour for all checkboxes used in displayed forms.

Datatables

Datatables action buttons
Colour of the action buttons to copy/export the viewing fields. These are the buttons called copy/excel/csv/pdf or column visibility.
Action buttons for data in data tables
Colour for the action buttons on the left side in the accountpages like 'my weborders'.
Datatable pagination
Colour of the pagenumbers in the accountpages, at the bottom of the page.
Datatable pagination active
Colour of the active pagenumber at the bottom of the page.

 

Hardcoding
If a button or bar has not been listed, it means that it has a default color that cannot be adjusted. This is also known as hardcoding.

Additional CSS-lines (use only if you understand this)
Option to add extra styling. Click on the arrow to the right of this line. Names should be written in English.
Applicable settings must be added per line.
Example
#footer { (English name of the page)
background-image: none; (none means not to make any changes)
background-color: rgb(36,255,0);

Adjust text to type in the search bar
input[name="globalsearch"] {color:white !important;}
The color you see can be adjusted to your liking, for example to blue or black.