Skip to main content

Branding & Content Customization Guide

This guide will walk you through customizing the branding and essential content of your Roofstick platform. Making these changes ensures the application reflects your unique brand identity.

1. Logo and Favicon Customization​

To update the logo on the website:

  1. Navigate to the frontend project directory: src/assets/images (or the respective image folder depending on the structure).
  2. Replace the existing logo.png or logo.svg with your own logo file. Make sure to keep the same file name to avoid breaking image links in the code, or update the file reference in the frontend codebase.
  3. For best results, use a transparent PNG or SVG with appropriate dimensions (e.g., 200x50 pixels).

Updating the Favicon​

  1. Navigate to the public folder in your frontend directory.
  2. Replace favicon.ico with your custom favicon.
  3. You may also want to update logo192.png and logo512.png in the public folder for PWA support.

2. Website Name and Text​

Updating the App Title​

To change the website name (which appears in the browser tab):

  1. Open the .env file in your frontend directory and look for REACT_APP_NAME or NEXT_PUBLIC_APP_NAME (depending on the framework). Update it to your desired name.
  2. Open public/index.html (if React) and update the <title> tag.

Modifying Static Text​

Most static text, including the hero banner text, footer text, and contact information, can be updated via the Admin Panel -> Settings (if dynamic) or directly in the frontend source code.

  • If editing code: Search for the specific text strings within the src/components or src/pages directories.

3. Colors and Theming​

To change the primary branding colors:

  1. Locate the main CSS/SCSS or Tailwind configuration file (e.g., tailwind.config.js or src/styles/globals.css).
  2. Look for the color variables or theme definitions. For example: 
    :root {
      --primary-color: #007bff; /* Change this hex code */
      --secondary-color: #6c757d;
    }
  3. Update these values to match your brand's color palette. The changes will reflect globally across the UI.

4. Banner and Images​

Home Page Banner​

  • If the banner is manageable from the Admin Panel, navigate to Admin Panel -> Appearance/Settings to upload a new banner image.
  • If it is static, locate the banner image in src/assets/images and replace it, or update the image path in the Home page component.

Placeholder Images​

Ensure you replace any placeholder images for properties or user avatars with your own default assets in the respective public/images or src/assets folders.

5. Contact Information​

To update the contact email, phone number, and address displayed on the website:

  1. Go to the Admin Panel -> Settings.
  2. Locate the Contact Information section.
  3. Update the details and save changes. (If these are hardcoded, search for them in the frontend Footer or Contact components).