Versions Compared

Old Version 21

changes.mady.by.user Tim Donohue

Saved on

compared with

New Version 22

changes.mady.by.user Tim Donohue

Saved on

Key

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

...

  1. First, you'll want to decide if you want to modify just the Home Page News HTML, or styles (CSS/Sass), or both. 
    1. If you want to modify the HTML, you'll need to create a copy of "home-news.component.html" in your theme, where you place your changes.
    2. If you want to modify the styles, you'll need to create a copy of "home-news.component.scss" in your theme, where you place your changes.

  2. Edit your theme's app/home-page/home-news/home-news.component.ts file. Swap the "templateUrl" and "styleUrls" properties, based on which you want to modify in your theme. 

    Code Block
    titlefooterhome-news.component.ts
    @Component({
  selector: 'ds-home-news',
  // If you want to modify styles, then...
  // Uncomment the styleUrls which references the "home-news.component.scss" file in your theme's directory
  // and comment out the one that references the default "src/app/home-page/home-news/home-news.component.scss"
  styleUrls: ['./home-news.component.scss'],
  //styleUrls: ['../../../../../app/home-page/home-news/home-news.component.scss'],
  // If you want to modify HTML, then...
  // Uncomment the templateUrl which references the "home-news.component.html" file in your theme's directory
  // and comment out the one that references the default "src/app/home-page/home-news/home-news.component.html"
  templateUrl: './home-news.component.html'
  //templateUrl: '../../../../../app/home-page/home-news/home-news.component.html'
})


  3. Now, based on what you want to modify, you will need to either update your theme's copy of home-news.component.html or home-news.component.scss or both.
    1. To change HTML: Your theme's version of the home-news.component.html file will be empty by default. Copy over the default HTML code from src/app/home-page/home-news/home-news.component.html into your version of this file.
    2. To change Styles: Your theme's version of the home-news.component.scss file will be empty by default. Copy over the default Sass code from src/app/home-page/home-news/home-news.component.scss into your version of this file.
  4. Modify the HTML or Sass as you see fit.
    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.
  5. Any changes require rebuilding your UI. If you are running in "dev mode" (yarn start:dev), then the UI will restart automatically whenever changes are detected.

...