Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  1. Configure your theme to use its copies of files: Modify the corresponding *.component.ts in your theme. 
    1. If you want to modify component style, replace the "styleUrls" in that file to point at the copy of *.component.scss in your theme.
    2. If you want to modify component HTML, replace the "template" in that file to point at the copy of *.component.html in your theme.
  2. Copy the default UI code into your theme file(s)
    1. If you want to modify component style, copy the default *.component.scss code (from src/app/) into your theme's component.scss file.
    2. If you want to modify component HTML, copy the default *.component.html code (from src/app/) into your theme's component.html file.
  3. Modify those theme-specific files  
    1. If you want to add images, add them to your theme's assets/images folder.  Then reference them at the /assets/[theme-name]/images/ URL path.
    2. Keep in mind, all Bootstrap variables, utility classes & styles can be used in these files. Take advantage of Bootstrap when you can do so.
  4. Remember to either rebuild the UI after each change, or run in dev mode (yarn start:dev) while you are doing theme work.

Removing

...

Subdirectories /

...

Components from your

...

Theme

Optionally, you may decide you want to keep your theme directory "simple" and only include components that you've modified. 

...