Problem with themes

UI Components for Angular
Post Reply
paata
Posts: 2
Joined: 05 Jun 2013, 08:46

30 Nov 2018, 23:04

Hello PrimeNG team,
I am very newbie on angular and primeng.

I have already written application which uses Angular Material Components.
I want to migrate entire application on PrimeNG.

I have done everything what is described into getting started page :

1. Npm Packages

Code: Select all

 npm install primeng --save
    npm install primeicons --save
2.Load Configuration

Code: Select all

import {TableModule} from 'primeng/table';
   import {ToolbarModule} from 'primeng/toolbar';
   imports: [
     TableModule,
     ToolbarModule,
     BrowserModule,
     ........
3. Imports into HTML file

Code: Select all

<link rel="stylesheet" type="text/css" href="/node_modules/primeicons/primeicons.css" />
     <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/themes/nova-light/theme.css" />
     <link rel="stylesheet" type="text/css" href="/node_modules/primeng/resources/primeng.min.css" />
4. Angular Animations is already installed

Code: Select all

npm install @angular/animations --save
5. Styles Configuration (angular.json file) :

Code: Select all

 "styles": [
              "src/styles.css",
              "node_modules/font-awesome/css/font-awesome.min.css",
              "node_modules/primeng/resources/primeng.css",
              "node_modules/primeng/resources/themes/nova-light/theme.css"
            ],
6. Toolbar example :

Code: Select all

<p-toolbar>
          <div class="ui-toolbar-group-left">
               <button pButton type="button" label="New" icon="pi pi-plus"><i class="material-icons">accessible</i> New</button>
               <button pButton type="button" label="Upload" icon="pi pi-upload" class="ui-button-success"></button>
          </div>
     </p-toolbar>
But style is not loading ...
Labels and icons is not visible on toolbar for example.

Also here is screens of mu example :

Image
Image


https://ibb.co/RjdnGnh
https://ibb.co/P4JgdMW

Please help on this.


Regards,
Paata.

yigitfindikli
Posts: 415
Joined: 08 Aug 2018, 14:09

03 Dec 2018, 08:34

Hi,
Can you update your style.css file like this ?

Code: Select all

@import '../node_modules/primeng/resources/themes/nova-light/theme.css';
@import '../node_modules/primeicons/primeicons.css';
@import '../node_modules/primeng/resources/primeng.min.css';

hiteshpatil
Posts: 1
Joined: 10 Jun 2021, 13:09

10 Jun 2021, 13:23

At primeng 12.0.0-rc.1
Try changing

./node_modules/primeng/resources/themes/nova-light/theme.css';
to
./node_modules/primeng/resources/themes/nova/theme.css';

It worked for me! Cheers!

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 5 guests