Customize theme

Colors
Primary
Success
Warning
Danger
Info
Direction
RTL

Change text direction

To switch the text direction of your webpage from LTR to RTL, please consult the detailed instructions provided in the relevant section of our documentation.
Border width, px
Rounding, rem
Back to settings

To apply the provided styles to your webpage, enclose them within a <style> tag and insert this tag into the <head> section of your HTML document after the following link to the main stylesheet:
<link href="assets/css/theme.min.css">


          

        

      


      
      

        
        
      

    



    
    

      

        
        
          
            
          
          Finder
          v2.0.0
        
        
        

          
          
    
            
  • 
              
            
    • 
            
  • 
              
            
    • 
            
  • 
              
            
    • 
          

        

        
        
          
          Buy now
        
      

    



    
    

      


        
        


        
        


          
          

            Getting started
            
Installation

          



          
          

            

              
              

                
The Finder template you are currently viewing is a Static HTML template built with Bootstrap 5, and it is NOT a WordPress theme.

                
Please do not attempt to install the Finder files on WordPress, as this will not work.

              

            

          



          
          

            
Prerequisites

            
    
              
  • HTML / CSS / JS (required): These core web technologies are essential for using the template.
    • 
              
  • Bootstrap 5 (required): This framework is necessary for the template's design and functionality.
    • 
              
  • Sass / Scss (highly recommended): Utilizing SCSS variables for customizing the template is much easier than modifying plain CSS code directly. It allows for more streamlined style adjustments.
    • 
              
  • Npm (highly recommended): npm is a powerful package manager tailored for Node.js, enabling efficient management of project dependencies. This tool helps with installing, updating, and removing dependencies. Additionally, npm includes a feature called "npm scripts," which automates common tasks such as minification, compilation, unit testing, linting, etc.
    • 
            

            
Note: All necessary configuration files, such as package.json, are provided in the download package. For detailed information on each configuration file and its purpose, refer to the Configuration files section of our documentation.

          



          
          

            
Dev environment

            

              
              

                Please note: The following steps are entirely optional. They are designed for advanced users who wish to leverage a professional-grade front-end toolset included with Finder to accelerate the development process. If you are not familiar with these tools or do not have time to explore them, you can continue to customize Finder using plain HTML, CSS, and JS. In this case, feel free to skip this and next sections. Happy coding! 😉
              

            

            
Finder is built using modern web development toolset.

            

              
Bootstrap Official website

              
Bootstrap 5 is the latest iteration of the world's most popular HTML, CSS, and JS framework. Finder extends Bootstrap with a variety of its own plugins and components, enriching the core framework to provide enhanced functionality and design options.

              
Sass (Syntactically Awesome Style Sheets) Official website

              
Sass is a scripting language that is either interpreted or compiled into Cascading Style Sheets (CSS). Recognized as the most mature, stable, and powerful CSS extension language globally, Sass enables the use of variables, mixins, functions, and more to streamline CSS development.

              
W3C Valid HTML Official website

              
The code follows W3C standards for HTML, ensuring that it meets the guidelines established by the World Wide Web Consortium for accessibility, functionality, and compatibility across different browsers and devices.

              
Future-proof JavaScript Official website

              
Finder's core scripts and all dependencies are meticulously crafted using vanilla JavaScript (ES6 modules) to ensure optimal performance and broad compatibility across various platforms.

              
Npm (Node.js) Official website

              
Npm is the default package manager for the Node.js environment. It offers robust package management capabilities and includes a powerful feature known as "Npm scripts." These scripts facilitate repetitive tasks such as minification, compilation, unit testing, and linting. The Silicon build system uses a series of JavaScript files, each designated for specific tasks, and associated Npm scripts to execute these tasks.

            

          



          
          

            
Text editor or CLI

            
You can use any text editor and command line tool available to you, such as Command Prompt for Windows or Terminal for macOS. Our personal preference is Visual Studio Code. It is a free editor that includes a built-in terminal (console), an integrated Git client, debugging capabilities, a vast library of extensions, and it is available for macOS, Windows, and Linux.

            

              
              

                We highly recommend installing the VS Code Prettier plugin and setting it as your default formatter for JavaScript. Enable the "format code on save" option to automatically beautify your code each time you save a file, enhancing readability and consistency.
              

            

          



          
          

            
Installing Node.js, npm and dependencies

            
To set up the Finder development environment, you will need to install Node.js and its package manager, npm. Node.js is completely free and can be downloaded from its official website for macOS, Windows, and Linux systems. You can download Node.js and npm from this link.

            
For more information about the Node Package Manager and the packages available, please visit npm's official website.

            
Installing necessary packages for Finder development

            
Once Node.js and npm are installed, you're ready to install all the dependencies required for developing with Finder.

            
Open your command line tool and type the following command:

            npm install
            
This command initiates the installation of all dependencies listed in the Finder/package.json file. Please wait until the installation process is complete before proceeding to the next section, Npm commands (scripts).

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize