Customizing Colors and Styles

In this guide, we'll walk you through how to customize the colors and styles of the script.

Important: Updates of the script likely overwrite any style changes you've made. We strongly advise that you create a backup of your modifications. After each update, recompile the assets and double-check to ensure there haven't been any additions to the files you previously modified in the update.

Prerequisites

Before you start, ensure you have the following installed:

Node.js: This is essential for managing JavaScript packages. If you don't have it, download and install Node.js.
PHP (Optional but required for localhost preview): To run the project on your localhost, ensure PHP is installed on your machine. PHP serves as the backbone for the Laravel framework.

Setting Up

1. Preview on Localhost using Laravel

Note: This step is optional and requires PHP to be installed on your machine.

To preview the application on your localhost:

$ cd path_to_your_project
$ php artisan serve

This will start a web server, and you can view the application in your browser, usually at http://localhost:8000.

2. Install JavaScript Libraries

First, navigate to your project's directory:

$ cd path_to_your_project

Then, install the necessary JavaScript libraries:

$ npm install

3. Building and Developing with Assets

Compiling Assets

The primary step in deploying or testing your changes is to compile your assets (like CSS and JavaScript files). Whether you've made a small tweak or a significant adjustment, before deploying or seeing the final changes, always compile:

$ npm run build

This ensures that all changes are bundled, optimized, and ready for production.

Real-time Development (Optional)

For those who want to see changes as they develop, a real-time development mode is available. However, remember that any changes observed in this mode will not be saved for production until you run the compile command (npm run build).

Before utilizing this mode, ensure the localhost web server is running as described in the Preview on Localhost using Laravel section.

To activate real-time changes while developing:

$ npm run dev

Again, after finishing your development, always compile your assets using npm run build to make sure they're updated for the main application.

Customizing Main Colors and Styles

The tailwind.config.js file in your project's root contains the main configurations for styles and colors. For a deeper understanding, consult the official documentation.

Open: tailwind.config.js
Modify Colors: Within this file, you'll find a colors section. Here you can customize the primary and secondary colors of the application. Example:

colors: {
  primary: {
    "50": "#fff7ed",
    ...
  },
  secondary: {
    "50": "#eff6ff",
    ...
  }
}

Adjust these color values as per your requirements.

Modify Font Families: If you want to change the font, there's a fontFamily section. Update the font names in the order of preference:

fontFamily: {
  'body': ['Inter', 'ui-sans-serif', ...],
  'sans': ['Inter', 'ui-sans-serif', ...]
}

Other Customizations: Feel free to explore and adjust other settings in the tailwind.config.js file.

Remember, every time you make a significant change in styles, it's a good idea to compile the assets again using npm run build to see the updated changes in your application.

Exploring Additional Styles

Beyond the configurations in tailwind.config.js, additional styles and components can be found in the CSS stylesheets located in the directory resources\css\.

In particular, you might want to explore:

Main Styles:
- Path: resources\css\app.css
This file contains the primary styles used throughout the application. It includes styles that integrate with Tailwind CSS and those that might override or extend default styles.
Custom Components:
- Path: resources\css\custom-components.css
This file is dedicated to styles for any custom components you might have in your application. If you're looking to change a style for a specific component or element, there's a good chance it's defined here.

Feel free to explore these files and adjust styles as needed. Remember that after editing these files, it's essential to run:

$ npm run build

To see the changes reflect in your application.

Reward Loyalty Documentation