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
            
Deployment guide

          



          
          

            
This article provides a comprehensive guide on deploying your project when using the Finder template. There are multiple ways to deploy, whether manually uploading to a server or utilizing modern cloud platforms with integrated CI/CD.



            
            

              
Manually uploading to a server

              
The build system in Finder includes a streamlined command designed to prepare your project for production. The npm run build command performs several critical tasks:

              
    
                
  1. 
                  Builds and minifies: Compiles CSS and JavaScript, ensuring they are optimized for quick loading times.
                
    2. 
                
  2. 
                  Generates icon font: Converts SVG icons into a web-friendly icon font.
                
    3. 
                
  3. 
                  Copies vendor files: Transfers necessary third-party libraries and frameworks from the node_modules directory to the assets/vendor folder.
                
    4. 
                
  4. 
                  Validates HTML: Checks the HTML files against W3C standards to ensure they are compliant and error-free.
                
    5. 
                
  5. 
                  Creates a distribution folder: Generates a dist folder where all production-ready files are stored. This includes HTML files with updated links to the correct vendor files.
                
    6. 
              

              
Uploading to a server

              
Once the build process is complete, you can upload the contents of the dist folder to your hosting server using FTP, SFTP, or any other file transfer method you prefer. This step involves transferring your optimized files to a web server where they will be accessible to users.

            



            
            

              
Deploying with cloud platforms (Vercel)

              
For those preferring a more automated approach, using a cloud platform like Vercel offers a straightforward deployment process with benefits such as Continuous Integration and Deployment (CI/CD). Here's how you can set up your project with Vercel:

              
    
                
  1. 
                  Connect your repository: Link your GitHub, GitLab, or Bitbucket repository to Vercel. This allows Vercel to access your project files.
                
    2. 
                
  2. 
                  Configure the build settings: Set up the build commands and output directory in Vercel. Typically, this would involve specifying npm run build as your build command and dist as your output directory.
                
    3. 
                
  3. 
                  Deploy: Once configured, each push to your repository will trigger a new deployment automatically. Vercel handles all the aspects of serving your website, from CDN distribution to SSL certificate management.
                
    4. 
              

              
Below is an example screenshot showing the proper configuration for a Vercel project:

              

                Vercel project configuration
              

            

          

        

      

    



    
    

      
        Top
        
        
        
          
        
      
      
        Customize