Materio using SVG image for logo/branding. But you can use either image or svg.

Also, you can update/replace brand name Materio with your branding.

User can also add/remove utility classes for logo / branding as per their requirements. Like, branding text color, font size, margin/padding etc..

You can find below code in html files to update logo/branding :

<div class="app-brand">
  <a href="index.html" class="app-brand-link">
    <span class="app-brand-logo h-px-20 w-px-30">
      <!-- Replace SVG image -->
      <svg>
        .....
      </svg>
      <!--/ Replace SVG image -->
      OR
      <!-- Add image -->
      <img src="...IMAGE_PATH/IMAGE.PNG" alt="logo">
      <!--/ Add image -->
    </span>
    <span class="app-brand-text menu-text ms-2">Materio</span>
  </a>
  ...
</div>

If you have logo with png, jpg, then you can use <img> tag.

If you have logo with svg then you can use <svg> ... </svg> tag.

Materio admin template allows user to include custom font. To use google font, please follow below steps :

• Here, we are adding Open Sans google fonts.
• Create a google font URL with all the bold and italic options that you like to use, For that select style from here: https://fonts.google.com/specimen/Open+Sans
• After adding styles, you will get link to use on the web, like :
Copy

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,400;0,500;0,600;1,400;1,500;1,600&display=swap" rel="stylesheet">

• Include this copied link to html page's head section. That will include fonts inside your template.

Now, to apply included fonts to the template,

If you are familiar with SCSS (Recommended method),

• Find scss/_custom-variables/_bootstrap-extended.scss file and add below font-family variables:
Copy

// Prefix for :root CSS variables
$variable-prefix: bs- !default;
// * Typography
// *******************************************************************************
// scss-docs-start font-variables
$font-family-sans-serif: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !default;
$font-family-monospace: monospace !default;  // You can update this font as well
// stylelint-enable value-keyword-case
$font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
$font-family-code: var(--#{$variable-prefix}font-monospace) !default;

If you are not familiar with SCSS (Not recommended method)

• You can change --bs-font-sans-serif CSS variable value with new one in the folder assets/vendors/css/, files core.css and core-dark.css (for dark layout).
  For example, to use Open Sans fonts, --bs-font-sans-serif: 'Open Sans'.
  
  For RTL supported layouts, find same files from assets/vendors/css/rtl folder.

Materio provides option to use custom font icons. So user can use icons of their own choice as well.

If you are using building tools,

If you want to add other font-icons like boxicons. Please follow below steps :

• Include font-icons inside package.json file to install using npm / yarn
Copy

"dependencies": {
  ...
  "boxicons": "~2.0.9",
  ...
}

• Run command yarn install or npm install to install fonts inside template's node-modules
• Now, create boxicons.scss file inside src/fonts/ folder.
• Include boxicon css from node-modules to boxicons.scss file.
• You can add custom variables, style and override current font style. Like below
Copy

$boxicons-font-size-base: 16px;  // variable

@import '../node_modules/boxicons/css/boxicons';  // import from node-modules

// Custom scss
.bx {
  vertical-align: middle;
  font-size: 1.15rem;
  line-height: 1;
}
// Override font path according to yours
@font-face {
  font-family: 'boxicons';
  font-weight: normal;
  font-style: normal;

  src: url('../fonts/boxicons/boxicons.eot');
  src: url('../fonts/boxicons/boxicons.eot') format('embedded-opentype'),
    url('../fonts/boxicons/boxicons.woff2') format('woff2'),
    url('../fonts/boxicons/boxicons.woff') format('woff'),
    url('../fonts/boxicons/boxicons.ttf') format('truetype'),
    url('../fonts/boxicons/boxicons.svg?#boxicons') format('svg');
}

• To build css and get fonts files, declare custom fonts to src/tasks/build.js file.
Copy

// Build fonts
// -------------------------------------------------------------------------------
const FONT_TASKS = [
  {
    name: 'boxicons',
    path: 'node_modules/boxicons/fonts/*'
  },
  ...
]

• Include style file in html files, like
Copy

<link rel="stylesheet" href="ASSETS_PATH/vendor/fonts/boxicons.css" />

• Run below command(s) to build fonts. For other build tasks read more :
Copy

yarn build

OR

yarn build:fonts
yarn build:css

• Now, user can use boxicons fonts with it's classes like class="bx bx-message" and so on..

If you are not using building tools,

You can include CDN fonts using CDN. Read More

If you want to use font icons using font files. Read More

Since Materio is a template and a starter project, it’s built as the starting point of your project. It cannot be simply installed and used with an existing project like a third party library.

Although using Materio with any existing project is still possible, it would require extra work to connect everything together. We strongly recommend you to either start your project with Materio, or move your project on top of it to have the best experience.

Here, we're providing guidance on updating breakpoints to control the hiding or collapsing of the menu within specific layout sections such as the navbar, menu, and footer. Remember that customization is necessary for components and elements used within the content area to align with these breakpoint adjustments.

Please proceed with the following steps to update breakpoint from xl to lg:

1. In the file scss\_custom-variables\_components.scss , you should replace the existing value of the variable with your desired breakpoint value. You can use values such as xxl, xl, lg, md, or sm. As we have updated with lg

$menu-collapsed-layout-breakpoint: lg !default;

2. For the JavaScript breakpoint, it's crucial to ensure it matches the CSS breakpoint. You'll need to ascertain the pixel sizes of breakpoints, such as xl (1200px) and lg (992px). Update the LAYOUT_BREAKPOINT value in the js/helpers.js file to correspond with the CSS variable breakpoint:

LAYOUT_BREAKPOINT = 992; // Update this value according to your CSS variable breakpoint

Step 1 & 2 changes will synchronize the CSS and JavaScript functionality to reflect the adjusted collapse menu breakpoint.

3. However, it's important to note that components like the navbar utilize xl classes to maintain the default screen layout.

   For instance, if you've updated xl to lg, the following changes would be required for the navbar (Between <!-- Navbar --> <!--/ Navbar -->) in HTML:

   Vertical Layout

   • Update the class navbar-expand-xl to navbar-expand-lg in <nav> tag.
   • Also, ensure you adjust layout-menu-toggle breakpoints from *-xl-* to *-lg-*

   Horizontal Layout

   • Update navbar branch display classes from navbar-brand app-brand demo d-none d-xl-flex to navbar-brand app-brand demo d-none d-lg-flex
4. If you intend to make comprehensive changes, locate classes with xl and modify them according to the new breakpoints. For instance, if you've changed xl to lg, update related classes accordingly.

To remove any style switcher from light, dark, system.

For example, user wants to remove system option then they need to remove it from navbar & customizer

Remove below code from every HTML pages,

<li>
  <a class="dropdown-item" href="javascript:void(0);" data-theme="system">
    <span class="align-middle"><i class="ri-computer-line ri-22px me-2"></i>System</span>
  </a>
</li>

Find below code in template-customizer.js file,

// Styles
    TemplateCustomizer.STYLES = [
      {
        name: 'light',
        title: 'Light'
      },
      {
        name: 'dark',
        title: 'Dark'
      },
      {
        name: 'system',
        title: 'System'
      }
    ]

And, remove system option from that array, so it will be like,

// Styles
    TemplateCustomizer.STYLES = [
      {
        name: 'light',
        title: 'Light'
      },
      {
        name: 'dark',
        title: 'Dark'
      }
    ]

And, all set!!

Materio template gives facility to search page and directly go to that page on click.

As this template provides vertical & horizontal layout options, We are using search-[vertical|horizontal].json file for search list. You can find this file inside src/assets/json/ folder.

Now, Let's have a look at how to update the array list of this file. You can update this file list as per your requirements. In search list, we are adding pages, files & members. All the page path and image URLs should be updated as per your requirements.

Below is the format of an item:

{
  "pages": [
    {
      "name": "Dashboard Analytics",
      "icon": "ri-home-line",
      "url": "index.html"
    },
    {...}
  ],
  "files": [
    {
      "name": "Class Attendance",
      "subtitle": "By Tommy Shelby",
      "src": "img/icons/misc/search-xls.png",
      "meta": "17kb",
      "url": "app-file-manager.html"
    },
    {...}
  ],
  "members": [
    {
      "name": "John Doe",
      "subtitle": "Admin",
      "src": "img/avatars/1.png",
      "url": "app-user-view-account.html"
    },
    {...}
  ]
}

Following is the details of all json list items:

If you are using dark & light both mode(layout) then you can set dark & light image with img tag.

Use data-app-light-img data attribute for light image and data-app-dark-img data attribute for dark image. You can find switchImage javascript function from main.js which use data-app-{dark|light}-img data attribute to switch image.

Find below code for an example to use to add dark/light image attributes :

<img src="img/image-light.png" alt="" class="app-brand-img w-px-150" data-app-light-img="image-light.png" data-app-dark-img="image-dark.png">

Materio using relative assets path for our HTML file assets.

You can't run HTML files directly from the file system. You need to run it from a web server.

For example, if you open index.html file directly from the file system, you will get below error in your browser console.

Find below ways to resolve this issue:

1. Run the template on your local server like, XAMPP, MAMP, WAMP, etc... Then add our template inside htdocs/ folder of your Local Server.

   After that, you can access the template using http://localhost/Materio/ URL.

2. Use npm or yarn command to run the template on your local server. Read more

   For Yarn: (Recommended)

   yarn
   yarn build (optional)
   yarn serve

   For NPM:

   npm install
   npm run build (optional)
   npm run serve

3. Also, If you are using VS Code IDE, you can use live server extension to make template work with direct serve.

While installing node packages using npm,, if you are getting error Like, Unable to resolve dependency tree errors then below solution might be helpful to you.

It seems that the older peer dependencies from your system causing this issue. This happens for some packages after updating to npm 7 (opens new window). Parameter --legacy-peer-deps can help:

npm i --legacy-peer-deps

Use Yarn instead of Npm to avoid this type of errors.

You might get some warnings while running yarn install/npm install like below:

The warnings you are receiving while installing are from library/packages we used.

We always keep our packages up to date when we make major releases. However, the writer of that package may use an older dependency that is no longer maintained for backward compatibility or any other code-related issue. But, that's not an issue with template and you should not worry about it. Those packages will work fine with our template.

Causes of npm install or yarn install issue can be due to various things which include:

• Dependency resolved by package manager (npm/yarn) conflict with other installed dependency. Check unable to resolve dependency tree error
• The dependency of the package we use have an internal issue or that dependency has some issue with your environment.
• Package or dependency of the package requires some additional step or configuration to work in your environment.
• Downloaded package is broken or is got tampered.

To resolve such installation issue:

• Please try again downloading fresh package/zip from ThemeForest and perform the installation again.
• Make sure you are using Node LTS version or Suggest node version by template while installing packages.
• run npm cache clean

After following above steps and still if you are getting the error then please raise support at our support portal with the following details:

• Your OS information, Node version, npm/yarn version, Template/Package version.
• Attache log file of the error you are getting in your console (Provide full log).

Like other HTML templates, you will need to manually handle all updates that we provide in future.

There are two different ways to updating Materio:

1. Fork our Git Repo (Recommended)
1. Before starting your new project, get template repository access and fork it and build your app on top of that fork.
2. In the future, you can easily merge the changes from the main repo onto your fork. This may require merging a lot of changes manually, but it's the best way to keep the Materio updated and track the changes easily.
3. Using GitHub you can easily Sync a fork of a repository to keep it up-to-date with the upstream repository.
2. Update manually
1. Prerequisite:
• VS Code IDE
• VS Code Extension: Compare Folders
• Materio Package you started your project with (Older version of Materio package which you used)
2. Review Materio changelog to have a quick preview on what has been updated.
3. Download Materio Latest Package and Unzip it.
4. Use VS code compare folders extension and compare both packages for changes to adopt them in your project.
5. If you haven't made any changes in core folder then replace with merge scss/, js/, libs/ and fonts/ folders. Your custom files like, style.scss or script.js should not affect by using replace with merge.
6. Manually update the HTML code where necessary by using VS code compare.
7. Run yarn install or npm install task to update 3rd party plugins with their latest versions.
8. Build the project using npm run build command. Read more
9. Save and test your project files with Materio's latest updates.

If something goes wrong, you can revert your updates by using backup files.

For the time being, we do NOT offer any tutorials or any other materials on how to integrate Materio with any CMS, Web Application Frameworks or any other similar technology. However, since Materio is a static HTML/CSS and JS template, then it should be compatible with any backend technology and frameworks.

In the future we may provide different version of this template with front-end and back-end framework integration.